Using an array for data in highcharts - javascript

So when using the data I want in high charts I can just type it in as such and it works:
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [0.818883519277839, 0.8118310020160356, 0.8292750491048191, 0.8207364844853503, 0.8187873450691459, 0.8098962769401326, 0.8060550491107373, 0.7960675107192992, 0.7798022181293245, 0.7747131667969733, 0.77704753581292, 0.780881503288139, 0.7808802272036436, 0.7828232760186384, 0.7745154579263632, 0.7858447215087305, 0.7903196602781966, 0.7904203695573747, 0.7842096993261638, 0.7736738976551895]
}]
});
});
However, when I try to replace it with a for-loop that goes through my array it doesn't work. Is there a proper way for using an array for data?
For instance:
myArray = [0.818883519277839, 0.8118310020160356, 0.8292750491048191, 0.8207364844853503, 0.8187873450691459, 0.8098962769401326, 0.8060550491107373, 0.7960675107192992, 0.7798022181293245, 0.7747131667969733, 0.77704753581292, 0.780881503288139, 0.7808802272036436, 0.7828232760186384, 0.7745154579263632, 0.7858447215087305, 0.7903196602781966, 0.7904203695573747, 0.7842096993261638, 0.7736738976551895]
and then
series: [{
name: 'Tokyo',
data: myArray,
}]
Thanks!


What are your y-axis values?
Also, the data for the x-axis must be ordered increasingly for highcharts to work properly. Check your console to see if there are any errors as stated by Sebastian.


It should work the way you're trying to do it.
See fiddle: http://jsfiddle.net/c4arw1se/
series: [{
name: 'Tokyo',
data: myArray
}]
Can you post the function you're using to generate the data array?

Related

Section wise labeling in highchart

I'm making a graph with multiple y-axis using this Highchart but i'm stuck while making multiple labels for x-axis.
currently i reached on this
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Week Comparison'
},
subtitle: {
text: 'Values: Wastage and OEE'
},
xAxis: [{
categories: days.reverse(),
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}%',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'OEE',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Waste',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'OEE',
type: 'column',
yAxis: 1,
data: oee.reverse(),
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Waste',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5],
tooltip: {
valueSuffix: ' %'
}
}]
});
current output is this where i manipulated x and y axis dynamically.
Now i want to add sections on x-axis values in 3 value chunks
below is the relevant graph(not actual)
I'm not good at JS can anyone help me to figure out whether it is possible to print x-axis in sections like above image.
Your help will be highly push me to solve this problem.
Also if any other library can do it? you can mention its link.

You can use 'grouped-categories.js' plugin.
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]
}
Live demo: https://jsfiddle.net/BlackLabel/TFhd7/
Docs: http://blacklabel.github.io/grouped_categories/

Can`t place on the X axis, dates from ms sql server

$(function () {
Highcharts.setOptions({
global : { useUTC : false
}
});
$('#container').highcharts({
title: {
text: 'coefficient 10 days',
x: -20
},
subtitle: {
text: 'Company',
x: -20
},
xAxis: {
categories: [<?php echo join($data, ',')?>],
type: 'datetime'
},
yAxis: {
title: {
text: 'Коэффициент'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '', enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
series: [
{
name: 'value',
data: [<?php echo join($koef, ',')?>]
}, {
name: 'norm',
data: [<?php echo join($norm, ',')?>], color: '#FF0000'
}
]
});
});
When format in php as 'Ymd', date is correct but as number, like '20151210' this not readable for users. When i try format (in php code) 'd.m.Y' java say script1007 error. On api.highcharts.com nothing in the description specified what to do. Probably i need set in javascript something about datetime setting.

Place Data in Highchart using json and post url

Create Line chart with JSON data using i have a data in json in following format:
Data
{"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]}
Highchart code:
$.post(trendUrl,params,function(data)
{
console.log("you are submitting"+data);
});
$('#trendChart').highcharts({
title: {
x: -20 //center
},
subtitle: {
x: -20
},
xAxis: {
gridLineWidth: 1,
categories: []
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
color:'#FBA208',
data: []
}]
});
Here i would like to plot categories in X and Series in y.
Thanks in advance

try:
$(function () {
data = {"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]};
$('#container').highcharts({
title: {
text: 'title',
x: -20 //center
},
subtitle: {
text: 'subtitle',
x: -20
},
xAxis: {
categories: data.Categoires
},
yAxis: {
title: {
text: 'yaxis'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'dd'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'data',
data: data.Series
},]
});
});
jsfiddle: http://jsfiddle.net/e2bm7wu8/

Convert the y-axis values to Millions in dual axis high charts

I am using dual-axis highcharts. In the y-axis the values are too big to read. I wold like to convert them to shortcuts like 1K for 1000 and 1.0L for 100000 and 1.0M for 1000000 and 35.8M for 35869982 and 3.5M for 3550977.
This is my FIDDLE
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'VOLUME',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REVENUE',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Revenue',
type: 'column',
yAxis: 1,
data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'volume',
type: 'spline',
data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
tooltip: {
valueSuffix: ''
}
}]
});
});
Here I have rounded up where I want to make changes in the below figure

You need to make a use of formatter:
formatter: function(){
return this.value/1000000 + "M";
}
Fiddle

To utilize the built in "shortening" functionality you can just remove your yAxis.label.format. You have currently set it to {value}, which is the default, but manually setting it seems to prevent the metric prefixes from being applied.
Look at this JSFiddle example, where all I've changed is removing the following line from both of your y-axis labels:
format: '{value}'
With this automatic shortening the following metric prefixes may be applied:
[ "k" , "M" , "G" , "T" , "P" , "E"]
You can set your own values with the lang.numericSymbols option (API).

Column width in Highcharts when combined with spline

I have this annoying thing in Highcharts that I cannot figure out. I have graphs that are dynamically generated and can contain multiple columns and splines. In the example the spline is a temperature measurement and contains lots of data points. The two columns are grouped by day and therefore contain only one value per day.
When I use this combination the column width becomes almost invisible:
http://jsfiddle.net/FXRj2/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Test'
},
subtitle: {
text: 'Me'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true
}, { // Tertiary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#red'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4red'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall 1',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47],[1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57],[1374624000000,9.73]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Rainfall 2',
color: '#red',
type: 'column',
yAxis: 2,
data: [
[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12],[1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [[1374105600000,21.9],[1374109200000,21.6],[1374112800000,21.2],[1374116400000,20.8],[1374120000000,20.5],[1374123600000,20],[1374127200000,19.7],[1374130800000,19.6],[1374134400000,19.9],[1374138000000,20.3],[1374141600000,20.9],[1374145200000,21.4],[1374148800000,21.9],[1374152400000,22.5],[1374156000000,23.1],[1374159600000,23.5],[1374163200000,23.9],[1374166800000,23.7],[1374170400000,23.8],[1374174000000,23.3],[1374177600000,23.1],[1374181200000,22.4],[1374184800000,21.9],[1374188400000,21.4],[1374192000000,21],[1374195600000,20.4],[1374199200000,20.1],[1374202800000,19.7],[1374206400000,19.3],[1374210000000,19],[1374213600000,18.7],[1374217200000,18.9],[1374220800000,19.3],[1374224400000,19.8],[1374228000000,20.6],[1374231600000,21.4],[1374235200000,22.1],[1374238800000,22.6],[1374242400000,23.2],[1374246000000,23.5],[1374249600000,23.5],[1374253200000,23.5],[1374256800000,23.1],[1374260400000,23],[1374264000000,22.4],[1374267600000,22],[1374271200000,21.4],[1374274800000,21.2],[1374278400000,20.6],[1374282000000,20.2],[1374285600000,20.3],[1374289200000,20.2],[1374292800000,20],[1374296400000,19.7],[1374300000000,19.3],[1374303600000,19],[1374307200000,18.9],[1374310800000,19],[1374314400000,19.2],[1374318000000,19],[1374321600000,19.7],[1374325200000,19.8],[1374328800000,20.2],[1374332400000,20.6],[1374336000000,21],[1374339600000,21.6],[1374343200000,21.8],[1374346800000,22.1],[1374350400000,22.3],[1374354000000,22.1],[1374357600000,21.5],[1374361200000,21.1],[1374364800000,20.6],[1374368400000,20.1],[1374372000000,19.7],[1374375600000,19.4],[1374379200000,19],[1374382800000,18.6],[1374386400000,18.2],[1374390000000,18.2],[1374393600000,18.6],[1374397200000,19.4],[1374400800000,20.4],[1374404400000,21.6],[1374408000000,22.9],[1374411600000,24.2],[1374415200000,25.4],[1374418800000,26.5],[1374422400000,27.2],[1374426000000,27.8],[1374429600000,28.3],[1374433200000,28.5],[1374436800000,28.4],[1374440400000,27.8],[1374444000000,27.1],[1374447600000,26.2],[1374451200000,25.7],[1374454800000,25],[1374458400000,24.3],[1374462000000,23.8],[1374465600000,23.1],[1374469200000,22.5],[1374472800000,22.1],[1374476400000,22.2],[1374480000000,22.5],[1374483600000,23.1],[1374487200000,23.9],[1374490800000,24.9],[1374494400000,26.1],[1374498000000,27],[1374501600000,27.8],[1374505200000,28.4],[1374508800000,28.9],[1374512400000,29.1],[1374516000000,29.2],[1374519600000,29],[1374523200000,28.7],[1374526800000,28.5],[1374530400000,27.7],[1374534000000,27.3],[1374537600000,26.8],[1374541200000,26.5],[1374544800000,25.9],[1374548400000,25.4],[1374552000000,24.8],[1374555600000,24.1],[1374559200000,23.6],[1374562800000,23.5],[1374566400000,23.8],[1374570000000,24.3],[1374573600000,24.9],[1374577200000,25.5],[1374580800000,25.7],[1374584400000,26.3],[1374588000000,27.3],[1374591600000,28.1],[1374595200000,28.5],[1374598800000,28.9],[1374602400000,29],[1374606000000,29.4],[1374609600000,29.1],[1374613200000,28.9],[1374616800000,28.2],[1374620400000,27.6],[1374624000000,26.9],[1374627600000,26.2],[1374631200000,25.6],[1374634800000,25.1],[1374638400000,24.6],[1374642000000,24.3],[1374645600000,23.7],[1374649200000,23.6],[1374652800000,23.5],[1374656400000,23.9],[1374660000000,24.4],[1374663600000,24.4],[1374667200000,24.3],[1374670800000,24.9],[1374674400000,25.9],[1374678000000,26.3]],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
I have been searching for ways to dynamically control the width of columns by using pointWidth but this gets me into a hole new area of issues, as I am not always sure if there is a combination of columns and splines and what the date range is.
Is there a trick to solve this? I hope I have missed something simple.

I was reading through the API description of Highcharts when I noticed an option to have multiple x axis. Since my problem seemed to be related to scaling on the x axis I decided to give it a go...
I created a new x axis for the line data and it works like a charm. Of course we do not want to see multiple x axis, so a little fiddling with the settings hides it again.
My x axis definition now looks like this:
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
opposite: true,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}],
On the data series that has 'too many' points I simply added 'xAxis: 1'.
Fiddle here : http://jsfiddle.net/AM4vx/

Categories