I want to render a histogram/line chart using HighCharts.
I don't want to hard code the array which is used by series.
My data that I wish to render is in the object display, which looks like:
0: o, 107983,
1: 1, 347923,
2: 2, 182329,
.
.
.
My code is here:
function RenderChart(display) {
myDisplay = display;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Metric histogram'
},
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
minPadding: 0.05,
maxPadding: 0.05
},
plotOptions: {
line: {
animation: false
},
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [myDisplay]
}]
});
};
This doesn't render the line chart. It renders an empty chart.
run a routine such that the response you get is processed as accepted by the highchart. then you can assign the resultant to the data directly.
try this, it will work
Related
Can anyone help me set step value on x-axis or y-axis dynamically say on clicking a button (not at the design time). In the example below, I should be able to set the step/interval as 100 instead of 250.
here is the example fiddle
http://jsfiddle.net/PanicJ/H2pyC/8/
$(function () {
var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4];
var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4];
var data = Math.random() < 0.5 ? setA : setB;
var height=Math.max.apply(Math, data);
if(height > 1000){
height = 1000;
}
$('#container').highcharts({
chart: {
marginRight: 80 // like left
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
lineWidth: 1,
max: height,
min: 0,
title: {
text: 'Primary Axis'
}
}],
series: [{
data: data
}]
});
});
The tickInterval is what you want to change:
$('#setStep').click(function () {
var chart = $('#container').highcharts();
chart.yAxis[0].update({
tickInterval: 100
});
});
http://jsfiddle.net/blaird/H2pyC/85/
I have a stacked bar graph with two data attributes. I want to make the second bar looked grayed out with a dashed border. I've tried "dashStyle: 'longdash' but that and anything else i've tried doesn't work.
This is the look i'm going for:
In general it's not supported, but simple hack can enable this: http://jsfiddle.net/ztRF5/132/ (note: required is latest version from github).
// mapping between SVG attributes and the corresponding options
Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'percent'
}
},
series: [{
data: [29.9],
borderColor: 'black',
borderWidth: 2,
dashStyle: 'dash'
}, {
data: [13]
}]
});
Notice that in the latest version of HighCharts, Highcharts.seriesTypes.bar.prototype.pointAttrToOptions is no longer defined, thus the code will error out. You can simply comment out the first line (Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';) and it will work. (http://jsfiddle.net/willieliao/6c48x39v/)
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'percent'
}
},
series: [{
data: [29.9],
borderColor: 'black',
borderWidth: 2,
dashStyle: 'dash'
}, {
data: [13]
}]
});
I am new to Highchart.
I have a line chart. X axis is a series of dates, and the Y values are only integers.
How can I make Highchart display only integers on the values of Y axis?
Try to null all values in xAxis or use following code.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
enabled: false
}
}
Please see the example
http://jsfiddle.net/ssgoanb5/
See the Doc: http://api.highcharts.com/highcharts#xAxis.labels.enabled
New Updates:
For avoiding decimals values on graph Axis(x/y), Add allowDecimals attributes.
See the Doc. http://api.highcharts.com/highcharts#yAxis.allowDecimals
yAxis: {
allowDecimals: false,
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
Please check the updated JSfiddle: http://jsfiddle.net/ssgoanb5/6/
I've been looking all over, and testing one million things now. I just can't get it to work. I want the numbers to show up as "99 999" instead of "99,999".
Yes, I eventually found "thousandsSep", but it seems to be ignored completely. All my numbers show up as "99,999" even when I have "lang: { thousandsSep: ' ' }" and whatnot.
Please help.
thousandsSep works for me:
Highcharts.setOptions({
lang: {
thousandsSep: ' '
}
});
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled : true
}
}
},
series: [{
data: [10029, 1715, 1006, 1292, 14400, 1760, 135, 1480, 10216, 1194, 1956, 1544]
}]
});
http://jsfiddle.net/FPF2t/
Highcharts can connect a series line between null values, but it appears that it cannot connect a line between points with value of 0 if the yAxis min is also set to 0. Is there a workaround?
Here's an example: http://jsfiddle.net/p2EYM/2/
What the chart looks like (note breaks in line):
and the Highcharts code:
$(function () {
$('#container').highcharts({
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 10,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{
data: [20, 0, 0, 0, 0, 40, 50, 10, null, null, 0, 0]
}]
});
});