Home Forums Chart Support STATIC TO DYNAMIC CONVERSION

STATIC TO DYNAMIC CONVERSION

Viewing 3 posts - 1 through 3 (of 3 total)
  • #22119
    <!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://cdn.canvasjs.com/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.

    #22124

    @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

    #22127

    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)

You must be logged in to reply to this topic.