Area Chart from JSON Data - CanvasJS JavaScript Charts
Area Chart from JSON Data - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="Historiales2y3" style="height: 360px; width: 100%;"></div>
JavaScript
var result = [{"palabra":"pa","y":22,"label":"2017/05/28"}, {"palabra":"ma","y":10,"label":"2017/05/28"}, {"palabra":"pa","y":8,"label":"2017/05/29"}, {"palabra":"ma","y":30,"label":"2017/05/29"}, {"palabra":"pa","y":0,"label":"2017/05/30"}, {"palabra":"ma","y":0,"label":"2017/05/30"}, {"palabra":"pa","y":12,"label":"2017/05/31"}, {"palabra":"ma","y":16,"label":"2017/05/31"}, {"palabra":"pa","y":7,"label":"2017/06/01"}, {"palabra":"ma","y":36,"label":"2017/06/01"}, {"palabra":"pa","y":12,"label":"2017/06/02"}, {"palabra":"ma","y":33,"label":"2017/06/02"}, {"palabra":"pa","y":0,"label":"2017/06/03"}, {"palabra":"ma","y":14,"label":"2017/06/03"}, {"palabra":"pa","y":5,"label":"2017/06/04"}, {"palabra":"ma","y":30,"label":"2017/06/04"}, {"palabra":"pa","y":19,"label":"2017/06/05"}, {"palabra":"ma","y":25,"label":"2017/06/05"}, {"palabra":"pa","y":11,"label":"2017/06/06"}, {"palabra":"ma","y":35,"label":"2017/06/06"}, {"palabra":"pa","y":24,"label":"2017/06/07"}, {"palabra":"ma","y":34,"label":"2017/06/07"}, {"palabra":"pa","y":24,"label":"2017/06/08"}, {"palabra":"ma","y":59,"label":"2017/06/08"}, {"palabra":"pa","y":0,"label":"2017/06/09"}, {"palabra":"ma","y":39,"label":"2017/06/09"}, {"palabra":"pa","y":14,"label":"2017/06/10"}, {"palabra":"ma","y":22,"label":"2017/06/10"}, {"palabra":"pa","y":13,"label":"2017/06/11"}, {"palabra":"ma","y":6,"label":"2017/06/11"}, {"palabra":"pa","y":18,"label":"2017/06/12"}, {"palabra":"ma","y":32,"label":"2017/06/12"}, {"palabra":"pa","y":17,"label":"2017/06/13"}, {"palabra":"ma","y":49,"label":"2017/06/13"}, {"palabra":"pa","y":15,"label":"2017/06/14"}, {"palabra":"ma","y":12,"label":"2017/06/14"}];
var dps1 = [], dps2 = [];
for (var i = 0; i < result.length; i++) {
switch (result[i].palabra) {
case 'pa':
dps1.push({ x: new Date(result[i].label), y: result[i].y });
break;
case 'ma':
dps2.push({ x: new Date(result[i].label), y: result[i].y });
break;
}
}
var revenueBarChart = new...