Hi, trying to pass data from a json file into a Highchart, there is no data in the series. Am very new to this, can anyone tell me why?
Thank you!
<json>
[{"data":[326978158],"name
":"Excl_Sp
lash","tim
e":"2016-0
3-01"},{"d
ata":[5479
6390],"nam
e":"Splash
","time":"
2016-03-01
"},{"data"
:[34479833
0],"name":
"Excl_Spla
sh","time"
:"2016-04-
01"},{"dat
a":[597783
09],"name"
:"Splash",
"time":"20
16-04-01"}
,{"data":[
358185573]
,"name":"E
xcl_Splash
","time":"
2016-05-01
"},{"data"
:[63700566
],"name":"
Splash","t
ime":"2016
-05-01"},{
"data":[35
2688360],"
name":"Exc
l_Splash",
"time":"20
16-06-01"}
,{"data":[
68822877],
"name":"Sp
lash","tim
e":"2016-0
6-01"},{"d
ata":[3536
99748],"na
me":"Excl_
Splash","t
ime":"2016
-07-01"},{
"data":[75
092301],"n
ame":"Spla
sh","time"
:"2016-07-
01"},{"dat
a":[342876
795],"name
":"Excl_Sp
lash","tim
e":"2016-0
8-01"},{"d
ata":[8055
3501],"nam
e":"Splash
","time":"
2016-08-01
"},{"data"
:[32954323
2],"name":
"Excl_Spla
sh","time"
:"2016-09-
01"},{"dat
a":[845712
45],"name"
:"Splash",
"time":"20
16-09-01"}
,{"data":[
333080061]
,"name":"E
xcl_Splash
","time":"
2016-10-01
"},{"data"
:[92084128
],"name":"
Splash","t
ime":"2016
-10-01"},{
"data":[31
9192787],"
name":"Exc
l_Splash",
"time":"20
16-11-01"}
,{"data":[
92971575],
"name":"Sp
lash","tim
e":"2016-1
1-01"},{"d
ata":[3476
71803],"na
me":"Excl_
Splash","t
ime":"2016
-12-01"},{
"data":[97
767328],"n
ame":"Spla
sh","time"
:"2016-12-
01"},{"dat
a":[286103
288],"name
":"Excl_Sp
lash","tim
e":"2017-0
1-01"},{"d
ata":[9291
2586],"nam
e":"Splash
","time":"
2017-01-01
"},{"data"
:[26779663
3],"name":
"Excl_Spla
sh","time"
:"2017-02-
01"},{"dat
a":[927679
94],"name"
:"Splash",
"time":"20
17-02-01"}
,{"data":[
302103577]
,"name":"E
xcl_Splash
","time":"
2017-03-01
"},{"data"
:[10934391
1],"name":
"Splash","
time":"201
7-03-01"}]
</json>
<!-- jQuery -->
<script src="{% static "js/jquery.js" %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="
https://code.highcharts.com/highcharts.js"></script>
<script src="
https://code.highcharts.com/modules/data.js"></script>
<script src="
https://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="
https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="
https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="
https://www.highcharts.com/media/com_demo/css/highslide.css" />
<style>
body{
margin: 30px;
margin-left:40px;
}
</style>
<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('
http://191.0.0.0:8000/api/monthlyytd', function(data) {
// Populate series
for (i = 0; i < data.length; i++){
processed_json.push([data[
i].key, data[i].value]);
}
// draw chart
$('#container').highcharts
({
chart: {
type: "column"
},
title: {
text: "SPLASH TRANSACTIONS"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: "time"
}
},
yAxis: {
title: {
text: "name"
}
},
series: [{
name: 'data',
data: processed_json
}]
});
});
});
console.log(data[1]);
</script>
<div id="container"></div>
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.