Creating/Updating multiple series Chart
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<table style="width: 100%;">
<tr>
<td style="text-align:center; vertical-align:center">
<select id="selectDataSerie">
<option value="distance" selected="selected">distance</option>
<option value="movingTime">moving time</option>
<option value="elapsedTime">elapsed time</option>
<option value="totalElevationGain">elevation gain</option>
<option value="activities">activities</option>
</select>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
</td>
</tr>
</table>
JavaScript
$(document).ready(function(){
$.ajax({
url: "https://drive.google.com/open?id=1RK1QH0bdjFl6l86EoGWkfmfUrrQDSh-B",
type: "POST",
success: function (data) {
var result = JSON.parse(data);
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: false,
//theme: "light1", // "light1", "light2", "dark1", "dark2"
axisX: {
lineThickness: 0,
lineColor: "black",
labelFontColor: "silver"
},
axisY: {
gridThickness: .1,
lineThickness: .1,
title: "distance (miles)",
titleFontSize: 16,
suffix: "",
lineColor: "black",
titleFontColor: "black",
labelFontColor: "silver",
interval: 50,
minimum: -10,
labelFormatter: function(e){
var elem = document.getElementById("selectDataSerie");
var dataToDisplay = elem.options[elem.selectedIndex].value;
switch(dataToDisplay) {
case "movingTime":
totalSeconds = e.value;
hours = String("0" + (Math.floor(totalSeconds / 3600))).slice(-2);
totalSeconds %= 3600;
minutes = String("0" + (Math.floor(totalSeconds / 60))).slice(-2);
seconds = String("0" + (totalSeconds % 60)).slice(-2);
return hours + ":" + minutes + ":" + seconds;
break;
case "elapsedTime":
totalSeconds = e.value;
hours = String("0" + (Math.floor(totalSeconds / 3600))).slice(-2);
totalSeconds %= 3600;
minutes = String("0" + (Math.floor(totalSeconds / 60))).slice(-2);
seconds = String("0" + (totalSeconds % 60)).slice(-2);
return hours + ":" + minutes + ":" + seconds;
break;
case "distance":
return e.value;
break;
case "totalElevationGain":
return e.value;
break;
case "activities":
return e.value;
break;
}
},
},
toolTip: {
shared: true
},
legend:...