Home forums Using CanvasJS Cannot get the graph to show my data

Tagged: ,

This topic contains 5 replies, has 2 voices, and was last updated by  bambinou 1 year, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #9303

    bambinou
    Member

    Hello,

    I have this code:
    [php]
    <?php
    $query = “SELECT
    SUM(cust_order_total) AS label,
    due_date AS y
    FROM orders
    WHERE YEAR(due_date) = YEAR(CURDATE())
    AND MONTH(due_date) = MONTH(CURDATE())
    GROUP BY due_date
    ORDER BY label”;
    $rows = [];
    $result = mysqli_query($connection,$query);
    $rows = mysqli_fetch_all($result, MYSQLI_ASSOC);
    ?>

    <!–Graph1 Daily Chart —>
    <script type=”text/javascript”>
    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    theme: “theme2”,
    title:{
    text: “Earthquakes – per month”
    },
    animationEnabled: true,
    axisX: {
    valueFormatString: “MMM”,
    interval:1,
    intervalType: “month”

    },
    axisY:{
    includeZero: false

    },
    data: [
    {
    type: “line”,
    //lineThickness: 3,
    dataPoints: <?php echo json_encode($rows); ?>
    }

    ]
    });

    chart.render();
    }
    </script>
    [/php]

    My json encode output is:
    [{“label”:”95.00″,”y”:”2015-09-01″},{“label”:”112.50″,”y”:”2015-09-10″},{“label”:”150.00″,”y”:”2015-09-23″}]

    I am not understanding how to put the date on the X axis and the prices on the y Axis.

    The graph is showing correctly as a demo on my page but as soon as I pass my json encode output, the graphs is blank.

    Please help,

    Thank you,

    Ben

    #9305

    bambinou,

    You have to parse the json before assigning to dataPoints. Here is the code to do the same.

    <script type=”text/javascript”>
    	window.onload = function () {
    		var jsonData = <?php echo json_encode($rows); ?>;
    		
    		var dataPoints = [];
    
    		for (var i = 0; i <= jsonData.length - 1; i++) {
    			dataPoints.push({ x: new Date(jsonData[i].y), y: Number(jsonData[i].label) });
    		}
    
    		var chart = new CanvasJS.Chart("chartContainer", {
    			theme: "theme2",
    			title:{
    				text: "Earthquakes – per month"
    			},
    			animationEnabled: true,
    			axisX: {
    				//valueFormatString: "MMM",
    				interval:1,
    				intervalType: "week"
    			},
    			axisY:{
    				includeZero: false
    			},
    			data: [
    			{
    				type: "line",
    				lineThickness: 3,
    				dataPoints: dataPoints
    				}
    			]
    		});
    
    		chart.render();
    	}
    </script>
    #9308

    bambinou
    Member

    Hi,

    Thank you for your help,
    Unfortunately I am not getting any graphs showing up with the below code, there is an error somewhere:
    [php]
    <?php
    $query = “SELECT
    SUM(cust_order_total) AS label,
    due_date AS y
    FROM orders
    WHERE YEAR(due_date) = YEAR(CURDATE())
    AND MONTH(due_date) = MONTH(CURDATE())
    GROUP BY due_date
    ORDER BY label”;
    $rows = [];
    $result = mysqli_query($connection,$query);
    $rows = mysqli_fetch_all($result, MYSQLI_ASSOC);
    ?>

    <!–Graph1 Daily Chart —>
    <script type=”text/javascript”>
    window.onload = function () {
    var jsonData = <?php echo json_encode($rows); ?>;

    var dataPoints = [];

    for (var i = 0; i <= jsonData.length – 1; i++) {
    dataPoints.push({ x: new Date(jsonData[i].y), y: Number(jsonData[i].label) });
    }

    var chart = new CanvasJS.Chart(“chartContainer”, {
    theme: “theme2”,
    title:{
    text: “Earthquakes – per month”
    },
    animationEnabled: true,
    axisX: {
    //valueFormatString: “MMM”,
    interval:1,
    intervalType: “week”
    },
    axisY:{
    includeZero: false
    },
    data: [
    {
    type: “line”,
    lineThickness: 3,
    dataPoints: dataPoints
    }
    ]
    });

    chart.render();
    }
    </script>
    <div id=”chartContainer” style=”height: 300px; width: 100%;”></div>
    [/php]

    #9309

    bambinou,

    Can you please post the complete JSON returned to jsonData or provide a link to the page if it can be publicly accessible.

    #9311

    bambinou
    Member

    Thank you, I think the easy solution for me is to get a library where I can directly parse from php into json format witout reparsing it again and again which i think really complicates things when not needed. I was looking at canvasjs and the data can be parsed directly from php and dropped in the js code,much much easier….

    I cannot give you a publicly available link as this is on my local computer.

    Thanks again for your help,

    #9312

    bambinou
    Member

    sorry not cancasjs…but other libraries I meant…Also canvasjs has a problem with the dates, we cannot get dd/mm/yyyy which is a real problem.

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

You must be logged in to reply to this topic.