Develop Reference

Two line chart from JSON on c3.js

i've got a JSON that store multiple value like this,
[
{"Description":"bankname1", "Month":"April", "Amount":"1700"},
{"Description":"bankname1", "Month":"June", "Amount":"1300"},
{"Description":"bankname1", "Month":"March", "Amount":"1500"},
{"Description":"bankname2", "Month":"March", "Amount":"100"},
{"Description":"bankname2", "Month":"April", "Amount":"1200"},
]
Into this JSON I've 12 Month for each Bankname (JSON can have multiple bank name).
I would like to show a line-bar for each bankname and on x axis show Month name.
At this moment I can see only one line chart with value of bank mixed on name line.
this is my code:
var chart = c3.generate({
bindto: '#c3_incassi',
data: {
json: data,
keys: {
x: 'MONTH',
value: ['AMOUNT']
},
type: 'line'
},
axis: {
x: {
type: 'category',
categories: ['GENNAIO', 'FEBBRAIO', 'MARZO', 'APRILE', 'MAGGIO', 'GIUGNO', 'LUGLIO', 'AGOSTO', 'SETTEMBRE', 'OTTOBRE', 'NOVEMBRE', 'DICEMBRE'],
}
}
});
How can I solve this problem?
Many thanks
Bye
Francesco

You need to get your json data into the correct format, as already commented by Abhas. The correct json format for c3.js line chart with multiple lines looks as follows:
{"bankname1":[1700,1300,1500,1100,1400,1800,2000,2100,1900,1100,1250,1050],"bankname2":[100,1200,300,1100,400,700,350,200,1200,1400,1050,900]}
The json string would contain the "bankname1" followed by 12 numeric values, one for each month, then "bankname2" followed by the 12 numeric values etc.
If you are using php at server-side, you can echo your json data, let's call it "dataset", into c3.js by:
var dataset = <?php echo $dataset; ?>;
data: {
json: dataset
},
I am doing it the excact same way and it works. The axis labels you can set up as in your code:
axis: {
x: {
type: 'category',
categories: ['GENNAIO', 'FEBBRAIO', 'MARZO', 'APRILE', 'MAGGIO', 'GIUGNO', 'LUGLIO', 'AGOSTO', 'SETTEMBRE', 'OTTOBRE', 'NOVEMBRE', 'DICEMBRE'],
}
}

Why is HighCharts not recognizing my data properly?

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();
});

Change the date to UNIX timestamp in all stock quotes for highstock

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.

Highcharts not plotting Date string as Category

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

Highcharts not displaying data at some zoom levels

I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.
When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart becomes blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:
mainChart = new Highcharts.StockChart({
chart: {
renderTo: 'linegraph'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1 d'
}, {
type: 'week',
count: 1,
text: '1 wk'
}, {
type: 'month',
count: 1,
text: '1 mo'
}, {
type: 'year',
count: 1,
text: '1 yr'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
series: [{
name: 'Electricity usage (kWh)',
data: graphData,
tooltip: {
valueDecimals: 2,
valueSuffix: "kWh"
}
}],
});

I had the same issue, but it was everything normal with timestamps on X axis.
Resolved it by sorting data by ascending (provided firstly in reversed order).

It turns out that you can't use Date in the X axis of your data. Instead, use the Unix timestamp of the date: Date.getTime(). Major props to FloppyDisk for pointing me in the right direction.