Home forums Using CanvasJS Display Y and Y2 on the same label

This topic contains 7 replies, has 3 voices, and was last updated by  Indranil Deo 3 days, 5 hours ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #16006

    Gigi
    Member

    Hello,

    I am trying to display 2 values per label, y and y2, obtained from data.php:

    data.php:

       $sql="SELECT hour, success, failed FROM daily_chart";
        $data_points = array();
        
        $result = mysqli_query($conn, "$sql");
        
        while($row = mysqli_fetch_array($result))
        {        
            $point = array("label" => $row['hour'] , "y" => $row['success'], "y2" => $row['failed']);
            
            array_push($data_points, $point);        
        }
        
        echo json_encode($data_points, JSON_NUMERIC_CHECK);

    JSON result:
    [{"label":0,"y":450,"y2":5},{"label":1,"y":300,"y2":10},{"label":2,"y":200,"y2":15},{"label":3,"y":170,"y2":20},{"label":4,"y":150,"y2":25},{"label":5,"y":150,"y2":15},{"label":6,"y":175,"y2":35},{"label":7,"y":200,"y2":15},{"label":8,"y":250,"y2":25},{"label":9,"y":300,"y2":15},{"label":10,"y":400,"y2":45},{"label":11,"y":450,"y2":15},{"label":12,"y":500,"y2":65},{"label":13,"y":520,"y2":15},{"label":14,"y":600,"y2":75},{"label":15,"y":550,"y2":15},{"label":16,"y":600,"y2":45},{"label":17,"y":700,"y2":15},{"label":18,"y":750,"y2":65},{"label":19,"y":900,"y2":15},{"label":20,"y":1100,"y2":45},{"label":21,"y":1200,"y2":15},{"label":22,"y":1000,"y2":35},{"label":23,"y":450,"y2":25}]

    I use the array above as input to getJSON, but nothing is displayed with the code below:

    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="canvasjs.js"></script>
    
    <script type="text/javascript">
     $(document).ready(function () {
    
    	var dataPointsSuccess = [];
    	var dataPointsFailed = [];
    
    // Ajax request for getting JSON data
    
    	$.getJSON("data.php", function(result) {
    		for( var i = 0; i < result.length; i++) {
    			dataPointsSuccess.push({ label: result[i].label, y: result[i].y });
    			dataPointsFailed.push({ label: result[i].label, y: result[i].y2 });
    		}	
    
    // Chart with label + y and y2 values or multiSeries Chart
    
    		var chart = new CanvasJS.Chart("multiChart",
    		{
    			title:{
    				text: "Chart with y and y2 values"
    			},		
    			data: [
    			{
    				type: "column",
    				dataPoints: dataPointsSuccess
    			},
    			{				
    				type: "column",
    				dataPoints: dataPointsFailed
    			}			
    			]
    		});
    		chart.render();
    	});
    });
    </script>
    </head>
    <body>
    <div id="multiChart" style="width: 80%; height: 300px;></div>
    </body>
    </html>
    • This topic was modified 1 week, 5 days ago by  Gigi.
    #16011

    Indranil Deo
    Member

    @gigi,

    Are you looking for something like this?

    __________
    Indranil Deo,
    Team CanvasJS

    #16014

    Gigi1
    Member

    Hello Indranil,

    I need something like this:
    2 values per X

    For each hour of the day I will have 2 values.
    I tried the code from Anjali for the 3rd graph: https://canvasjs.com/forums/topic/multiple-charts-from-one-json-result/
    But it does not work for me. Please help.

    PS: Sorry for registering twice, the password recovery doesn’t send a valid link to reset the password.

    Best regards,
    Gigi.

    • This reply was modified 1 week, 3 days ago by  Gigi1.
    #16018

    Indranil Deo
    Member

    Gigi,

    Please take a look at this new example.

    Thanks for reporting the password reset issue. We are looking into it. Meanwhile, please use this link to reset your password.

    ___________
    Indranil Deo,
    Team CanvasJS

    #16019

    Gigi
    Member

    Hello Indranil,

    The example provided is almost ok, except that it enters the data manually.
    This is why the code provided by Anjali is much closer to my need, but it doesn’t work, maybe there is a syntax error.
    I need to split automatically the data_points into dataPoints1 and dataPoints2.

    Thank you for your help! I really appreciate it!

    Gigi.

    #16030

    Indranil Deo
    Member

    Gigi,

    Please take a look at this example. It creates the chart using JSON Data from an external source.

    _________
    Indranil Deo,
    Team CanvasJS

    #16080

    Gigi
    Member

    Hi Indranil,

    Thank you very much, this is exactly what I needed!
    It works very well, the only modification I made is below, in order to display the label received from JSON.

    return label = e.chart.data[0].dataPoints[i].label;

    Thank you very much for your time and dedication, I really appreciate it!

    Best regards,
    Gigi.

    #16081

    Indranil Deo
    Member

    Gigi,

    Glad you figured it out.

    ____________
    Indranil Deo,
    Team CanvasJS

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

You must be logged in to reply to this topic.