Home forums Report Bugs Not able to render Graph using PHP

This topic contains 1 reply, has 2 voices, and was last updated by  Anjali 2 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #7087

    gaikar1990
    Participant

    Hi,

    Here is my json code from data1.php file which I am using in data.php.

    [{“label”:”2014-09-10″,”y”:”58751″},{“label”:”2014-09-09″,”y”:”264396″},{“label”:”2014-09-08″,”y”:”234439″},{“label”:”2014-09-07″,”y”:”179431″},{“label”:”2014-09-06″,”y”:”182605″},{“label”:”2014-09-05″,”y”:”226082″},{“label”:”2014-09-04″,”y”:”239130″}]

    Here is data.php file

    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml” >
    <head>
    <title>Loading Status</title>
    <script src=”jquery.php”></script>
    <script src=”canvasjs.php”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    $.getJSON(“data1.php”, function (result) {
    var chart = new CanvasJS.Chart(“chartContainer”, {
    data: [
    {
    dataPoints: result
    }
    ]
    });
    chart.render();
    });
    });
    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 300px; width: 100%;”>
    </div>
    </body>
    </html>

    Only X co-orddinate is rendered and Y is not displayed.

    Please help me.

    #7099

    Anjali
    Participant

    Hi,

    CanvasJs Expects the value to be integer – stings are not parsed automatically. So you’ll have to parse y values before assigning. Below is how you can do the same.

    $(document).ready(function () {
    	var dataPoints = [];
    	$.getJSON("data1.php", function (result) {
    		for(var i = 0; i <= result.length-1; i++) {
    			dataPoints.push({label: result[i].label, y: parseInt(result[i].y)});
    		}
    	var chart = new CanvasJS.Chart("chartContainer", {
    		data: [
    		{
    			dataPoints: dataPoints
    		}
    		]
    	});
    	chart.render();
    	});
    });

    __
    Anjali

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

You must be logged in to reply to this topic.