Develop Reference

Why is HighCharts not recognizing my data properly? - javascript

GOAL:
Plot the JSON data on a scatter plot. Each object contain 3 values but the last (the array of IDs) should be ignored -- it is not necessary to represent it on the graph.
PROBLEM:
It seems that HighCharts is not recognizing my x-data. It will not scale the x-axis (datetime) according to my data. It does understand my y-values. And it is represented in the graph.
WHAT ARE YOU DOING?
I'm taking a JSON string, using JSON.parse() on it, making the dates like YYYY-MM-DD instead of UTC, then I'm giving myArray['vector'] to HighChart's data key.
THOUGHTS:
I believe this is related to how I'm structuring the JSON string or how I'm passing it to the key/value pair data. I'm a bit confused as to how JSON data should be 'translated' to a key/value pair.
Below is the result. Note how the x-axis has no ticks. The values are also in order of their position of the array (not by their date)
JSON:
{
"vector":[
[
"2017-06-06T04:31:16.000Z",
0.42,
[
"10155104233200659_10155105320445659",
"10155107157865659_10155107413550659",
"10155100854365659_10155101259520659",
"10155098835305659_10155101265245659",
"10155100854365659_10155101191290659",
"10155100854365659_10155101285415659",
"10155100854365659_10155101300165659",
"10155100854365659_10155101337070659",
"10155100854365659_10155101354640659",
"1558728630806541_1561351187210952",
"10155101928310659_10155102129290659",
"10155100854365659",
"10155101928310659_10155102183210659",
"10155101455910659_10155101458430659",
"1561546217191449_1561590010520403",
"10155101455910659_10155101459025659",
"10155101455910659_10155101461415659",
"10155101455910659_10155102138275659",
"10155101928310659_10155102150395659",
"10155101455910659_10155101462715659",
"870299173970694144",
"10155101455910659_10155101466670659",
"10155100854365659_10155101699660659",
"10155100854365659_10155102227220659",
"10155100854365659_10155102338105659",
"10155101928310659_10155102363275659",
"10155101455910659_10155101723225659",
"1561432737202797",
"10155101928310659_10155102372445659",
"10155101455910659_10155101481925659"
]
],
[
"2017-06-01T03:06:45.000Z",
0.47,
[
"10155078962635659_10155088932395659",
"10155086108505659_10155086203305659",
"10155086108505659_10155086234940659",
"10155085853500659_10155089736675659",
"10155086108505659_10155086284290659",
"10155086108505659_10155086294655659",
"868637256197840896",
"10155086108505659_10155086299195659",
"10155089549730659_10155089737300659",
"10155086108505659_10155086390050659",
"10155086108505659_10155086391925659",
"10155080256225659_10155089749815659",
"10155089549730659_10155090102235659",
"10155089549730659_10155090105425659",
"10155089549730659_10155090154310659",
"10155089549730659_10155090160515659",
"10155089549730659_10155090191730659",
"10155089549730659_10155090365070659",
"10155041106080659_10155086572640659",
"10155086108505659_10155086121160659",
"10155086108505659_10155086155370659",
"10155085853500659_10155086166860659",
"10155086108505659_10155086173400659",
"10155086108505659_10155086176665659",
"10155086108505659_10155086186500659",
"10155086108505659_10155086189325659",
"10155086108505659_10155086193075659",
"10155086108505659_10155086197225659",
"10155086108505659_10155086635920659",
"10155086108505659_10155087687155659"
]
],
[
"2017-05-26T03:32:24.000Z",
0.43,
[
"10155076988775659_10155077020050659",
"10155076988775659_10155077018590659",
"10155076988775659_10155077016610659",
"10155076988775659_10155077018385659",
"10155076988775659_10155077016860659",
"10155076988775659_10155077016865659",
"10155076988775659_10155077018410659",
"10155076988775659_10155077016530659",
"10155076988775659_10155077015135659",
"10155076988775659_10155077017130659",
"10155076988775659_10155077016630659",
"10155076988775659_10155077015210659",
"10155076988775659_10155077015205659",
"10155076988775659_10155077018990659",
"10155076988775659_10155077015255659",
"10155076988775659_10155077017270659",
"10155076988775659_10155077013155659",
"10155076988775659_10155077016690659",
"10155076988775659_10155077019325659",
"10155076988775659_10155077017305659",
"10155076988775659_10155077017385659",
"10155076677150659_10155077073125659",
"10155076677150659_10155077036660659",
"10155076988775659_10155077017615659",
"10155076988775659_10155077019365659",
"10155076988775659_10155077017695659",
"10155076988775659_10155077017680659",
"10155076988775659_10155077017780659",
"10155076988775659_10155077017760659",
"10155076568000659_10155077074260659"
]
],
[
"2017-05-07T03:02:04.000Z",
0.8,
[
"15a1e146e7ed603aecbe16de25ed53fc",
"10155015378740659_10155015486550659",
"10155011834555659_10155013722600659",
"10155015378740659_10155015483050659",
"10155012171695659_10155022393165659",
"859973050628026368",
"860299410340630528",
"860096826610941952",
"859989850455408642",
"7d79e45313c878ec78a0b34de60c69f3",
"860127021120327680",
"860300107266138112",
"860311173073391617",
"860312531407163393",
"860316615765876736",
"860156681401114626",
"860317260409257985",
"Qd_q0XF0Y10",
"860166160851099649",
"860190399180222466",
"860204548777889792",
"860211634886901760",
"1529799180366153_1532172110128860",
"860269305077870592",
"860287769960165376",
"860297098775982082",
"860162336727977985",
"10155014502490659_10155016027360659",
"1532221810123890_1533617433317661",
"10155015378740659_10155015420560659"
]
],
[
"2017-05-04T03:08:33.000Z",
0.55,
[
"10155005822955659_10155006234215659",
"10155005822955659_10155006238455659",
"10155005609550659_10155006194705659",
"10155005822955659_10155006241065659",
"10155005822955659_10155006241655659",
"10155005822955659_10155006177605659",
"10155005114840659_10155006201270659",
"10155005609550659_10155006091430659",
"10155005609550659_10155006095520659",
"10155005609550659_10155006099105659",
"10155002652900659_10155006101040659",
"10155005822955659_10155006101600659",
"10155005609550659_10155006109155659",
"10155002652900659_10155006110655659",
"10155005822955659_10155006113965659",
"10155005609550659_10155006132275659",
"10155005609550659_10155006139910659",
"10155005822955659_10155006142495659",
"10155005609550659_10155006143850659",
"10154997175925659_10155006178085659",
"10155005822955659_10155006148580659",
"10155005609550659_10155006190080659",
"10155005114840659_10155006154345659",
"10155005822955659_10155006154825659",
"10155005114840659_10155006167935659",
"10155005609550659_10155006157700659",
"10155005114840659_10155006160225659",
"10155005609550659_10155006231175659",
"10155005609550659_10155006187295659",
"10155005822955659_10155006162850659"
]
],
[
"2017-05-02T03:01:57.000Z",
0.49,
[
"874302750531694592",
"851862555752640513",
"851862767925637120",
"874318907250757634",
"874329266107936768",
"874335249144086531",
"851870647521341443",
"874107458871894021",
"851772861501059072",
"874355138969956352",
"874250856476139520",
"874274312253034496",
"874278730088280066",
"874356894428798977",
"851893814474264576",
"874666827904937985",
"851923766158520320",
"851891395493101568",
"874684725188845572",
"874685434911236098",
"874391730396708864",
"874396116737019909",
"874737533766311937",
"874799536073519104",
"874817322791313409",
"851892924115582977",
"874396860777091072",
"874551209625100288",
"874558005903335424",
"874609184905588736"
]
],
[
"2017-04-11T03:04:21.000Z",
0.54,
[
"872880479300603905",
"872905370355855361",
"872914304227475460",
"872661418985877506",
"872662404416638976",
"872922590024794115",
"872923180117241856",
"872967240488034305",
"872980087943176193",
"872989868145741829",
"872997173008486402",
"872880235649392640",
"873003042869792790",
"872941776868433921",
"873004432853696512",
"872841099542450178",
"872767600647954435",
"872819121804726272",
"872940586894061568",
"872985706150350848",
"872762907746066432",
"872869944161165312",
"872880243824103424",
"872846343147999233",
"873015156883812353",
"872938894320390145",
"872655599145824256",
"873351602639384576",
"873352989515403264",
"ea4b7c58ceee69909aad70a8d25f46ef"
]
]
]
}
JavaScript and HighCharts initialization:
var myJSON = '{"vector":[["2017-06-06T04:31:16.000Z",0.42,["10155104233200659_10155105320445659","10155107157865659_10155107413550659","10155100854365659_10155101259520659","10155098835305659_10155101265245659","10155100854365659_10155101191290659","10155100854365659_10155101285415659","10155100854365659_10155101300165659","10155100854365659_10155101337070659","10155100854365659_10155101354640659","1558728630806541_1561351187210952","10155101928310659_10155102129290659","10155100854365659","10155101928310659_10155102183210659","10155101455910659_10155101458430659","1561546217191449_1561590010520403","10155101455910659_10155101459025659","10155101455910659_10155101461415659","10155101455910659_10155102138275659","10155101928310659_10155102150395659","10155101455910659_10155101462715659","870299173970694144","10155101455910659_10155101466670659","10155100854365659_10155101699660659","10155100854365659_10155102227220659","10155100854365659_10155102338105659","10155101928310659_10155102363275659","10155101455910659_10155101723225659","1561432737202797","10155101928310659_10155102372445659","10155101455910659_10155101481925659"]],["2017-06-01T03:06:45.000Z",0.47,["10155078962635659_10155088932395659","10155086108505659_10155086203305659","10155086108505659_10155086234940659","10155085853500659_10155089736675659","10155086108505659_10155086284290659","10155086108505659_10155086294655659","868637256197840896","10155086108505659_10155086299195659","10155089549730659_10155089737300659","10155086108505659_10155086390050659","10155086108505659_10155086391925659","10155080256225659_10155089749815659","10155089549730659_10155090102235659","10155089549730659_10155090105425659","10155089549730659_10155090154310659","10155089549730659_10155090160515659","10155089549730659_10155090191730659","10155089549730659_10155090365070659","10155041106080659_10155086572640659","10155086108505659_10155086121160659","10155086108505659_10155086155370659","10155085853500659_10155086166860659","10155086108505659_10155086173400659","10155086108505659_10155086176665659","10155086108505659_10155086186500659","10155086108505659_10155086189325659","10155086108505659_10155086193075659","10155086108505659_10155086197225659","10155086108505659_10155086635920659","10155086108505659_10155087687155659"]],["2017-05-26T03:32:24.000Z",0.43,["10155076988775659_10155077020050659","10155076988775659_10155077018590659","10155076988775659_10155077016610659","10155076988775659_10155077018385659","10155076988775659_10155077016860659","10155076988775659_10155077016865659","10155076988775659_10155077018410659","10155076988775659_10155077016530659","10155076988775659_10155077015135659","10155076988775659_10155077017130659","10155076988775659_10155077016630659","10155076988775659_10155077015210659","10155076988775659_10155077015205659","10155076988775659_10155077018990659","10155076988775659_10155077015255659","10155076988775659_10155077017270659","10155076988775659_10155077013155659","10155076988775659_10155077016690659","10155076988775659_10155077019325659","10155076988775659_10155077017305659","10155076988775659_10155077017385659","10155076677150659_10155077073125659","10155076677150659_10155077036660659","10155076988775659_10155077017615659","10155076988775659_10155077019365659","10155076988775659_10155077017695659","10155076988775659_10155077017680659","10155076988775659_10155077017780659","10155076988775659_10155077017760659","10155076568000659_10155077074260659"]],["2017-05-07T03:02:04.000Z",0.8,["15a1e146e7ed603aecbe16de25ed53fc","10155015378740659_10155015486550659","10155011834555659_10155013722600659","10155015378740659_10155015483050659","10155012171695659_10155022393165659","859973050628026368","860299410340630528","860096826610941952","859989850455408642","7d79e45313c878ec78a0b34de60c69f3","860127021120327680","860300107266138112","860311173073391617","860312531407163393","860316615765876736","860156681401114626","860317260409257985","Qd_q0XF0Y10","860166160851099649","860190399180222466","860204548777889792","860211634886901760","1529799180366153_1532172110128860","860269305077870592","860287769960165376","860297098775982082","860162336727977985","10155014502490659_10155016027360659","1532221810123890_1533617433317661","10155015378740659_10155015420560659"]],["2017-05-04T03:08:33.000Z",0.55,["10155005822955659_10155006234215659","10155005822955659_10155006238455659","10155005609550659_10155006194705659","10155005822955659_10155006241065659","10155005822955659_10155006241655659","10155005822955659_10155006177605659","10155005114840659_10155006201270659","10155005609550659_10155006091430659","10155005609550659_10155006095520659","10155005609550659_10155006099105659","10155002652900659_10155006101040659","10155005822955659_10155006101600659","10155005609550659_10155006109155659","10155002652900659_10155006110655659","10155005822955659_10155006113965659","10155005609550659_10155006132275659","10155005609550659_10155006139910659","10155005822955659_10155006142495659","10155005609550659_10155006143850659","10154997175925659_10155006178085659","10155005822955659_10155006148580659","10155005609550659_10155006190080659","10155005114840659_10155006154345659","10155005822955659_10155006154825659","10155005114840659_10155006167935659","10155005609550659_10155006157700659","10155005114840659_10155006160225659","10155005609550659_10155006231175659","10155005609550659_10155006187295659","10155005822955659_10155006162850659"]],["2017-05-02T03:01:57.000Z",0.49,["874302750531694592","851862555752640513","851862767925637120","874318907250757634","874329266107936768","874335249144086531","851870647521341443","874107458871894021","851772861501059072","874355138969956352","874250856476139520","874274312253034496","874278730088280066","874356894428798977","851893814474264576","874666827904937985","851923766158520320","851891395493101568","874684725188845572","874685434911236098","874391730396708864","874396116737019909","874737533766311937","874799536073519104","874817322791313409","851892924115582977","874396860777091072","874551209625100288","874558005903335424","874609184905588736"]],["2017-04-11T03:04:21.000Z",0.54,["872880479300603905","872905370355855361","872914304227475460","872661418985877506","872662404416638976","872922590024794115","872923180117241856","872967240488034305","872980087943176193","872989868145741829","872997173008486402","872880235649392640","873003042869792790","872941776868433921","873004432853696512","872841099542450178","872767600647954435","872819121804726272","872940586894061568","872985706150350848","872762907746066432","872869944161165312","872880243824103424","872846343147999233","873015156883812353","872938894320390145","872655599145824256","873351602639384576","873352989515403264","ea4b7c58ceee69909aad70a8d25f46ef"]]]}';;
var myArray = JSON.parse(myJSON);
$.each(myArray['vector'],function(index, value){
//Reduce the datetime to just YYYY-MM-DD
myArray['vector'][index][0] = myArray['vector'][index][0].substring(0,10);
});
$(document).ready(function(){
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart:{
zoomType:'x',
},
exporting: {
enabled: false
},
xAxis: {
type: 'datetime',
title:{text:'Time'},
tickInterval: 1000 * 60 * 60 * 24
},
yAxis: {
max:1,
min: 0,
title:{ text: 'Focus of Conversations'},
plotBands: [{
color: 'black',
from: .5, // Start of the plot band
to: .51 // End of the plot band
}]
},
title: {
text: 'Focus of Conversations Over Time'
},
series: [
{
type: 'scatter',
data: myArray['vector'],
marker: { radius: 8 },
showInLegend: false
}]
});
});

Issue solved. I converted my YYYY-MM-DD dates into seconds since the epoch and everything worked fine.
I changed this...
$.each(myArray['vector'],function(index, value){
//Reduce the datetime to just YYYY-MM-DD
myArray['vector'][index][0] = myArray['vector'][index][0].substring(0,10);
});
to this...
$.each(myArray['vector'],function(index, value){
//Reduce the datetime to just YYYY-MM-DD
console.log(myArray['vector'][index][0].substring(0,10));
myArray['vector'][index][0] = (new Date(myArray['vector'][index][0].substring(0,10))).getTime();
});

Related

I'm trying to build a reusable chart component using Echarts, and I'd like to find a way to use the same dataset format for all chart types, so I need to only format my data once, and then use options like series and encode to update the way data is displayed.
After perusing the Echarts docs, I've settled on this dataset format:
{
source: [
{ date: "2017-10-31", first: 43.3, second: 85.8 },
{ date: "2017-11-30", first: 83.1, second: 73.4 },
{ date: "2017-12-31", first: 86.4, second: 65.2 },
{ date: "2018-01-31", first: 72.4, second: 53.9 },
];
}
This is reasonably close to my source data so I can convert it easily and most of my data are time series anyway. If the data is a topN value (like a sum of some sort) I can display it as a stacked bar chart too with this format.
The Question
The only thing I can't find out is how to display data in this format as a pie chart. Let's say this is my dataset:
{
source: [
// 'date' is irrelevant, and I could remove it, but it doesn't
// matter for this example
{ date: "2017-10-31", first: 43.3, second: 85.8 },
];
}
Is there any way I can structure my series in a way that lets me make a pie chart comparing 'first' to 'second'?
Things I tried
Naively setting the type
This just displays "second" as one single 100% pie slice
var option = {
dataset: { source: [{ date: "2017-10-31", first: 43.3, second: 85.8 }] },
series: [
{
type: "pie",
},
],
};
seriesLayoutBy
No Effect
var option = {
dataset: { source: [{ date: "2017-10-31", first: 43.3, second: 85.8 }] },
series: [
{
type: "pie",
seriesLayoutBy: "row",
},
],
};
encode
No Effect
var option = {
dataset: { source: [{ date: "2017-10-31", first: 43.3, second: 85.8 }] },
series: [
{
type: "pie",
seriesLayoutBy: "row",
encode: {
itemName: "date",
value: [1, 2],
},
},
],
};
Multiple Series
No effect
var option = {
dataset: { source: [{ date: "2017-10-31", first: 43.3, second: 85.8 }]},
series: [
{
type: "pie",
encode: {
value: "first",
},
},
{
type: "pie",
encode: {
value: "second",
},
},
],
};
Help me plase
Is there really no way to use one dataset format for both pie charts and any time series x/y axis based charts in Echarts?
I'm not married to this exact dataset format, but I'd like to have a format that can represent multiple values per date, because otherwise I can't fit my other data in there. Any ideas?

I am trying to make a graph that shows how much power solarpanels are produsing using chartJS. I am using data in the following format
{x: Fri Mar 19 2021 06:20:28 GMT+0100 (centraleuropeisk normaltid), y: 1.88}
And it makes a graph but the x values is not in a readable date format. The graph liks like this:
Link to picture of graph (I am not allowed to post images yet apparently)
https://i.imgur.com/HUOHoqg.png
To make the graph I use this code:
var ctx = document.getElementById("lineChart");
var line = new Chart(ctx, {
type: "scatter",
data: {
datasets: [
{
data: power,
borderColor: "#ffd420",
showLine: true,
fill: false,
},
],
},
options: {
tooltips: { enabled: false },
hover: { mode: null },
elements: {
point: {
radius: 0,
},
},
//---
xAxes: [],
//--
},
});
I have tried to play with the xAxes settings but it still show a large number instead of a date.
Does anyone know what settings can fix this or do I need to change the format of the input?
I have searched alot but I can't find a solution to this problem.

There are 2 options, you can make use of the timescale provided by chart.js in here you can set what format you want it to show the dates: https://www.chartjs.org/docs/latest/axes/cartesian/time.html
The other options is to use the tick callback to do it yourself like this:
options: {
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
const date = new Date(value)
return `${date.getDate()}/${date.getMonth()}/${date.getFullYear()}`
}
}
}]
}
}

I have data that is returned in an integer format that is based on time, but isn't a measurement of time that we normally use.
The integers are not evenly spaced, so I'm trying reflect that in the chart.
Is there any way to do this without the time in milliseconds?
Here's what I've got so far:
$('#container').highcharts({
chart: {
type: 'line',
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
categories: xCategories(),
title: {
text: 'Time'
},
ordinal: true
},
series: [{
data: getInterestRates()
}]
});
ordinal: true doesn't seem to work because this isn't a formal time format.
Thanks in advance for your help.
Example Data:
{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
},
{
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
},
{
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
},

This can be done using a x-axis of type linear (this is the default type), and passing an array of [x,y] pairs as data of your series. Given your example data format you'll have to convert it into this format.
A simple Highcharts example would be (JSFiddle):
$('#container').highcharts({
xAxis: {
type: 'linear'
},
series: [{
data: [[1024,0],[2048,5],[4096,5]]
}]
});
The format conversion could be done like this (JSFiddle):
var json = [{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
}, {
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
}, {
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
}];
var data = [];
$.each(json, function(i, v) {
data.push([v.integerOfTime, v.thingMeasuredOverTime]);
});

i want to make graph of stock quotes (downloaded from yahoo finance as csv and changed to json array), but date is in standard format(mm/dd/yyyy) but highstocks works only in unix timestamp (i guess). please give me the whole code on how to change the time's format. i know about date.parse() but i don't know how to apply this to whole data.
please help me with the code please
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function(data) {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: [ // Y: [Open, High ,Low, Close]
/* May 2006 */
[Date.parse("8/2/2012"), 602.84, 610.69, 600.25, 607.79, 83039600],
[Date.parse("8/3/2012"), 613.63, 617.98, 611.56, 615.7, 86230200],
[Date.parse("8/6/2012"), 617.29, 624.87, 615.26, 622.55, 75525800],
[Date.parse("8/7/2012"), 622.77, 625, 618.04, 620.91, 72611700]
["8/7/2012", 622.77, 625, 618.04, 620.91, 72611700],
["8/6/2012", 617.29, 624.87, 615.26, 622.55, 75525800],
["8/3/2012", 613.63, 617.98, 611.56, 615.7, 86230200],
["8/2/2012", 602.84, 610.69, 600.25, 607.79, 83039600],
["8/1/2012", 615.91, 616.4, 603, 606.81, 96125400]
],
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
]
]
}
}]
});
});
});
i'm inputting the data manually,still i don't know the use of sample data
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {

When you get data from json, you need to use map your dates to timestamps, in the preprocessing. Use any loop / condition to prepare new array with series, including correct values.

I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?

I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.

If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data