Reputation: 113
I have a problem with loading the .json file:
[
[
[
"2014-11-19 06:00:00",
"1.1"
],
[
"2014-11-19 14:00:00",
"4.9"
],
[
"2014-11-19 15:00:00",
"4.9"
],
[
"2014-11-19 16:00:00",
"4.9"
],
[
"2014-11-19 17:00:00",
"4.9"
],
[
"2014-11-19 18:00:00",
"4.9"
]
],
[
[
"2014-11-13 23:00:00",
"194"
],
[
"2014-11-14 00:00:00",
"195"
],
[
"2014-11-14 01:00:00",
"187"
],
[
"2014-11-14 02:00:00",
"191"
],
[
"2014-11-14 03:00:00",
"218"
],
[
"2014-11-14 04:00:00",
"170"
]
]
]
values:
[[data, valueTemperature],[data,WindMax]]
I tried in this way, but does not work:
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy'
},
title: {
text: 'Temperatura'
},
subtitle: {
text: '5 dni'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: -25,
max: 25,
}, { // Secondary yAxis
title: {
text: 'Prędkość wiatru',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} m/s',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 15,
opposite: true
}],
tooltip: {
shared: true
},
series: [{}]
};
var chart;
$.getJSON('test.json', function (data) {
options.series[0].data = data;
chart = new Highcharts.Chart(options);
});
});
How to correctly write it for a data type?
Upvotes: 0
Views: 472
Reputation:
There are a few issues:
"
's off the temperature and wind speed values or I'd get Highcharts Error #14options.series
. You should be creating two series objects and adding them to the options.series
array.yAxis == 1
.Here's an example to showcase the above: http://jsfiddle.net/6yvdkp20/1/
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy'
},
title: {
text: 'Temperatura'
},
subtitle: {
text: '5 dni'
},
xAxis: {
type: 'datetime',
},
yAxis: [
{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: -25,
max: 25,
}, { // Secondary yAxis
title: {
text: 'Prędkość wiatru',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} m/s',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 200,
opposite: true
}
],
tooltip: {
shared: true
},
series: [
{
data: [
[
"2014-11-19 06:00:00",
1.1
],
[
"2014-11-19 14:00:00",
4.9
],
[
"2014-11-19 15:00:00",
4.9
],
[
"2014-11-19 16:00:00",
4.9
],
[
"2014-11-19 17:00:00",
4.9
],
[
"2014-11-19 18:00:00",
4.9
]
]
},{
yAxis: 1, // This means the second yAxis will be used to plot this series
data:[
[
"2014-11-13 23:00:00",
194
],
[
"2014-11-14 00:00:00",
195
],
[
"2014-11-14 01:00:00",
187
],
[
"2014-11-14 02:00:00",
191
],
[
"2014-11-14 03:00:00",
218
],
[
"2014-11-14 04:00:00",
170
]
]
}
]
};
$('#container').highcharts(options);
});
Since you mentioned in the comments that you cannot change the format of the data you are fetching, you will need to correct the format after receiving the data. The following function should correctly do that (though I make no guarantees):
function fixFormat(data) {
for(var i = 0; i < dataSeries[0].length; ++i) {
dataSeries[0][i][1] = parseFloat(dataSeries[0][i][1]);
}
for(var i = 0; i < dataSeries[1].length; ++i) {
dataSeries[1][i][1] = parseInt(dataSeries[1][i][1]);
}
}
Usage:
$.getJSON('http://kamery.topr.pl/meteo/charts/moko.php', function (data) {
// Correct the formatting
fixFormat(data);
// Put the data in the right place
options.series[0].data = data[0];
options.series[1].data = data[1];
});
Upvotes: 3