JavaScript Multi Series Charts & Graphs - 0 | JSFiddle Sample Code

JavaScript Multi Series Charts & Graphs - 0 | JSFiddle Sample Code

by riaanc

HTML

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/javascript-charts/multi-series-chart/#" target="_blank" title="JavaScript Multi Series Charts &amp; Graphs ">https://canvasjs.com/javascript-charts/multi-series-chart/#</a></div>

JavaScript

async function makeData(){
  let result = await fetch("https://riaancillie.blob.core.windows.net/test/data.json.gz");
  let gzArrayBuf = await result.arrayBuffer();
  let gzBytes = new Uint8Array(gzArrayBuf);
  let jsonBytes = fflate.decompressSync(gzBytes);
  let jsonStr = new TextDecoder().decode(jsonBytes);  
  let json = JSON.parse(jsonStr);
  
  
  var flow = json[0].Channels.find(x => x.Code == "FlowRate");
  //console.log(flow);
  
  var leak = json[0].Channels.find(x => x.Code == "Leak");
  console.log(calcQuartile(leak.Data, 95));
  
  var data = flow.Data.map((itm, idx) => {
    return {
    	x: new Date(flow.Time[idx]), y: itm
    }
  });
  
  return data;
}



window.onload = async function () {
	let data = await makeData();	

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
  zoomEnabled: true,
	title:{
		text: "BMC Data"
	},
	axisX: {
		valueFormatString: "DD MMM,YY"
	},
	axisY: {
		title: "Flow Rate",
		suffix: "L/min"
	},
	legend:{
		cursor: "pointer",
		fontSize: 16,
		itemclick: toggleDataSeries
	},
	toolTip:{
		shared: true
	},
	data: [{
		name: "Myrtle Beach",
		type: "spline",
		yValueFormatString: "#0.## L/min",
		showInLegend: true,
		dataPoints: data
	},
	]
});
chart.render();

function toggleDataSeries(e){
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else{
		e.dataSeries.visible = true;
	}
	chart.render();
}

}

function calcAverage(arr){
    var a = arr.slice();
    if (a.length){
        sum = sumArr(a);
        avg = sum / a.length;
        return avg;
    }    
    return false;
}

/** Extract the maximum in an array of values
*
* @arg arr - array
* @return float 
*/
function calcMax(arr){
    return Math.max(...arr);
}

/** Calculate the Median of an array of values
 * 
 */
function calcMedian(arr){
        var a = arr.slice();
        hf = Math.floor(a.length/2);
        arr = sortArr(a);
        if (a.length % 2){
            return...