FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › STATIC TO DYNAMIC CONVERSION

STATIC TO DYNAMIC CONVERSION

Viewing 3 posts - 1 through 3 (of 3 total)

Tagged: , , ,

  • August 5, 2018 at 3:08 pm #22119

    Hemel619619     
    <!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme:"dark2",
	
	title:{
		text: "TIME vs. # of start phone calls"
	},	
	
	axisY :{
		includeZero: true,
		title: "# of start phone calls",
		suffix: "%"
	},
	
	toolTip: {
		shared: true
	},
	
	legend: {
		cursor:"pointer",
		itemclick: toggleDataSeries
	},
	
	data: [{
		type: "column",
		name: "PERIODIC",
		legendText: "PERIODIC",
		showInLegend: true, 
		yValueFormatString: "#,##0\"%\"",
		dataPoints:
		[
			{ label: "6am - 10am", y: 10 },
			{ label: "10am - 4pm", y: 30 },
			{ label: "4pm - 8pm", y: 55 },
			{ label: "8pm - 12am", y: 80 },
			{ label: "12pm - 6am", y: 75 }
			
			]
	},
	
	{
		type: "column",
		name: "VOICE CALL",
		legendText: "VOICE CALL",
		showInLegend: true, 
		yValueFormatString: "#,##0\"%\"",
		dataPoints:
		[
			{ label: "6am - 10am", y: 50 },
			{ label: "10am - 4pm", y: 60 },
			{ label: "4pm - 8pm", y: 57 },
			{ label: "8pm - 12am", y: 80 },
			{ label: "12pm - 6am", y: 90 }
			]
	},
	
	{
		type: "column",	
		name: "LOCATION CHANGE",
		legendText: "LOCATION CHANGE",
		showInLegend: true,
		yValueFormatString: "#,##0\"%\"",
		dataPoints:
		[
		
			{ label: "6am - 10am", y: 60 },
			{ label: "10am - 4pm", y: 90 },
			{ label: "4pm - 8pm", y: 65 },
			{ label: "8pm - 12am", y: 20 },
			{ label: "12pm - 6am", y: 15 }
			  ]	
					
	}]
});
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();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

    In this code I want to make a change so that EXTERNAL JSON DATA can fetch through jquery and generate this graph using JSON DATA! How can I do this? please let me know.

    August 6, 2018 at 9:44 am #22124

    Vishwas R

    @hemel619619,

    Please take a look at this jsfiddle for an example on rendering multi-series chart from JSON.

    If this doesn’t help you out, kindly create jsfiddle reproducing the issue so that we can look into your code & JSON format and help you out accordingly.

    —
    Vishwas R
    Team CanvasJS

    August 6, 2018 at 10:51 am #22127

    Hemel619619

    Could you please change the code wherever it’s required to run the json data to produce graph? It would be wonderful if you could send me the full html file.

    Thank you

Viewing 3 posts - 1 through 3 (of 3 total)

Tagged: , , ,

You must be logged in to reply to this topic.