How To Get All Json Values In Line Chart
I have many Json values, using them I am going to create a line chart but it shows only one value in the chart. I am a newbie to javascript and have an idea to plot all values in
Solution 1:
Based on your code, I can see why the chart shows only one point, which is the last data point of those points expected to be shown on the chart. Here is the problem:
var len = data.length;
/* Loop through each item in the data */
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len); /* Draw a chart with one point */
});
So you end up drawing many charts with the last chart which has the last data point to replace all the previous charts.
Instead, you should adjust the foreach block as follow and draw the chart once you've converted the data into an array of points.
$.getJSON('dashboard_summary.php?', function(data) {
varTips = [];
varRevs = [];
$.each(data, function(i, v) {
Tips.push({ x: newDate(v.Date), y: parseInt(v.Tip) });
Revs.push({ x: newDate(v.Date), y: parseInt(v.Revenue) });
});
chart(Tips, Revs);
});
Also, you can format the x-axis to make the chart look prettier (The format of the x-axis here is designed for the data given above. In your application, you may have to use another format style depending on the actual data):
functionchart(Tips,Revs) {
varchart=newCanvasJS.Chart("chartContainer", {
title: {
text:"Revenue",
fontSize:15
},
axisX: {
gridColor:"Silver",
tickColor:"silver",
valueFormatString:"DD/MMM",
interval:14,
intervalType:"day"
},
toolTip: {
shared:true
},
theme:"theme2",
axisY: {
gridColor:"Silver",
tickColor:"silver"
},
legend: {
verticalAlign:"center",
horizontalAlign:"right"
},
data: [
{
type:"line",
showInLegend:true,
lineThickness:2,
name:"Tip",
markerType:"square",
color:"#F08080",
dataPoints:Tips
},
{
type:"line",
showInLegend:true,
name:"Revenue",
color:"#20B2AA",
lineThickness:2,
dataPoints:Revs
}
],
legend: {
cursor:"pointer",
itemclick:function(e) {
if(typeof(e.dataSeries.visible)==="undefined"||e.dataSeries.visible) {
e.dataSeries.visible=false;
} else {
e.dataSeries.visible=true;
}
chart.render();
}
}
});chart.render();
}
Solution 2:
Updated codes. it Works >> Pastebin
<!DOCTYPE HTML><html><head><scripttype="text/javascript"src = "http://canvasjs.com/wp-content/themes/bootstrap_child/assets/js/jquery-1.8.3.min.js"></script><scripttype="text/javascript"src="http://canvasjs.com/assets/script/canvasjs.min.js"></script></head><body><divid="chartContainer"class="chart"><scripttype="text/javascript">
data=[
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}];
var len = data.length;
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
functionchart (dates,Tip,Rev,len) {
var chart = newCanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: newDate(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: newDate(dates),
y: parseInt(Rev)
}
]
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
</script></body></html>Solution 3:
Update Code:dataRevenue=
[
{ x:newDate(2014, 00,30), y:0 },
{ x:newDate(2014, 01,31), y:7},
{ x:newDate(2014, 02,28), y:47}
];dataTip=[
{ x:newDate(2014, 00,30), y:0 },
{ x:newDate(2014, 01,31), y:3},
{ x:newDate(2014, 02,28), y:8}
];varchart=newCanvasJS.Chart("chartContainer",
{
theme:"theme2",
title:{
text:"line chart"
},
axisX: {
valueFormatString:"MMM",
interval:1,
intervalType:"month"
},
axisY:{
includeZero:false
},
data: [
{
type:"line",
//lineThickness:3,
dataPoints:dataTip
},
{
type:"line",
//lineThickness:3,
dataPoints:dataRevenue
}
]
});chart.render();
Post a Comment for "How To Get All Json Values In Line Chart"