I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.
Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];
You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result
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();
});
I have a series of high and low temperatures that I would like to display in a column range chart with Highcharts.
I would specifically like a chart like the one shown in the demo example at: http://www.highcharts.com/stock/demo/columnrange
I have placed my data in a file called datatest.json, and it contains this text:
[
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]
When I load the data from the file, it doesn't give me a chart. For example, with this:
$(function () {
$.getJSON('data/datatest.json', function (data) {
$('#container').highcharts('StockChart', {
chart: {
type: 'columnrange'
},
rangeSelector: {
selected: 2
},
title: {
text: 'Temperature variation by day'
},
tooltip: {
valueSuffix: '°C'
},
series: [{
name: 'Temperatures',
data: data
}]
});
});
});
But if I put the data directly into my code (as follows), it does display the chart as I expect:
$(function () {
$('#container').highcharts('StockChart', {
chart: {
type: 'columnrange'
},
rangeSelector: {
selected: 2
},
title: {
text: 'Temperature variation by day'
},
tooltip: {
valueSuffix: '°C'
},
series: [{
name: 'Temperatures',
data: [
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]
}]
});
});
I think that I am either formatting the data incorrectly in my data file, or that I'm not reading from the file in the proper way.
Any suggestions or guidance to help me get on the right track would be much appreciated.
Credit to #SebastianBochan for directing my attention to the fact that my JSON was not valid.
Here is an abbreviated clip of what the correctly formatted JSON looks like:
{
"data":
[
[1420640460000,36.7,37.25],
[1420640520000,37.19,37.74],
[1420640580000,37.74,38.6],
[1420640640000,38.72,39.33],
[1420640700000,39.33,39.51]
]
}
I used a JSON validator: http://jsonformatter.curiousconcept.com/
It didn't matter whether I called it "data" or "temperature" It just had to be a string, and then when I referenced it, I needed to be sure to reference it as data.data. If I had called it "temperature" then it would have been data.temperature. In any case, here is the bit of code:
series: [{
data: data.data
}]
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.