I'm trying to translate a graphs language from English to Arabic, I'm using ruby on rails with haml, I also have chartkick gem, and highcharts, here is what I did:
on the view i have a div with an Id 'con'
#con
and for the JavaScript I have this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'con'
},
title: {
text: 'أضغط لعرضها فى المقدمة'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
my problem is when I run this on Firefox everything works perfectly
and it gives me the correct title
أضغط لعرضها فى المقدمة
but when I run it on chrome it gives me the reversed latter and they are not connected to each others something like this:
ف ي ةم د ق م ل ا.....
I have solved this, just in case someone else needed the answer: you should add useHTML: true
var chart = new Highcharts.Chart({
chart: {
renderTo: 'con'
},
title: {
text: 'أضغط لعرضها فى المقدمة',
useHTML: true
},
.....
Related
It looks like Highcharts has added more explicit support for annotations in version 6.0.0 but it doesn't seem to be working. Trying the example right of their website but the described annotations are not appearing on the chart.
Below is the code taken directly from the website:
$(function () {
console.log('ready ', Highcharts.version);
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Highcharts Annotations'
},
series: [{
data: [{y: 29.9, id: 'min'}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
id: 'max'
}, 194.1, 95.6, 54.4]
}],
annotations: [{
labels: [{
point: 'max',
text: 'Max'
}, {
point: 'min',
text: 'Min',
backgroundColor: 'white'
}]
}]
});
}
)
Found the problem. You need to also require or include a script tag for 'annotations.js' in addition to highcharts.js
I upgraded to HighCharts version 3.0.0 today and am having some issues with animation. The web application I am working on is built for IE 9. I am getting no animation in IE but when running chrome the animation still renders for my application. I can however view highcharts demos in IE 9 on the official site with full animation.
chartVar = document.createElement('div');
chartVar.setAttribute('id', 'container');
chartVar.style.width = '400px';
chartVar.style.height = '200px';
document.getElementById('quad0').appendChild(chartVar);
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
I have a line graph where Y values are -10 to +60. I would like to style the y=0 line to stand out from other grid lines.
Is this possible?
Thanks.
Take a look at the plotLines API in the yAxis...
http://api.highcharts.com/highcharts#yAxis.plotLines
Example...
http://jsfiddle.net/48dUL/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
plotLines: [{
color: '#C0C0C0',
width: 5,
value: 0
}]
},
series: [{
data: [-29.9, -71.5, -106.4, -129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Is there a way in highstock for panning to work in yAxis. I have set max in yAxis so that the user cannot see data above the max yAxis value by default. However I want to give user the ability to pan and see the data beyond the max yAxis value.
Example in the jsfiddle where max yAxis is set to 200.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
panning: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
max: 200
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Thanks.
For some reason, the scrollbar option for Highcharts is not working on my Rails 3.2.1 application. What is odd is that everything looks exactly the same as this: http://jsfiddle.net/highcharts/fj6d2/
... except that the scrollbar is missing. I have the exact same code as that shown in the jsfiddle above, the graph appears on my local application, but the scrollbar is missing.
This is the code in my local app, the same as in the jsfiddle:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 6
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Again, the graph shows, but only the scrollbar doesn't. Why isn't the scrollbar showing? Has anybody had success using a scrollbar in their highcharts graphs? I would love to get a fix for this, I really am stumped as to why its not working.
I figured out what was wrong. In my local app, I was loading the highcharts.js file, whereas in the jsfiddle it was loading highstock.js. Adding this:
<script type="text/javascript" src="http://www.highcharts.com/js/highstock.js"></script>
fixed the problem.