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]
}]
});
});
Related
am trying to plot a line graph in highchart but its rectangle in shape, how to make it in square shape.
code here
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
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]
}]
});
Should be something like above img
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
},
.....
I want to export a highchart to a jpeg image and place it into a specific folder.
What is the flow that goes through the highscript.js?
You can export into jpeg ,but it renders on browser as api did not provide location .
API URL :http://api.highcharts.com/highcharts#exporting
and
$('#container').highcharts({
credits: {
enabled: false
},
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]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
exporting: {
type: 'image/jpeg'
}
});
You can prepare your own server (http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts) and define directory, where exported file should be saved, but you have no ability to have influence on customer / client direction (security aspects).
How to on or off credits with a button click in highcharts?
Can some 1 explain with example
You can enable/disable by show/hide functions, related with SVG object.
http://jsfiddle.net/N6b6H/1/
$('#showhide').toggle(function () {
chart.credits.hide();
},function(){
chart.credits.show();
});
Here i created a jsfiddle in which bydefault the credit enable is false but onclick credit enables becomes true.
Try this:
[http://jsfiddle.net/jvaibhav/N6b6H/]
HTML is Like :
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px">
</div>
<button id="showhide"> Click Me </button>
Script is Like:
$(function () {
$('#showhide').click(function(){
$('#container').highcharts({
chart: {
},
credits: {
enabled: true
},
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]
}]
});
});
$('#container').highcharts({
chart: {
},
credits: {
enabled: false
},
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]
}]
});
});
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.