Home › Forums › Chart Support › Display Y and Y2 on the same label

Display Y and Y2 on the same label

Viewing 8 posts - 1 through 8 (of 8 total)
  • September 10, 2017 at 3:09 pm #16006

    Gigi

    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 7 years, 3 months ago by Gigi.
    September 11, 2017 at 10:36 am #16011

    Indranil

    @gigi,

    Are you looking for something like this?

    __________
    Indranil Deo,
    Team CanvasJS

    September 11, 2017 at 10:09 pm #16014

    Gigi1

    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 7 years, 3 months ago by Gigi1.
    September 12, 2017 at 12:38 pm #16018

    Indranil

    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

    September 12, 2017 at 1:52 pm #16019

    Gigi

    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.

    September 13, 2017 at 10:43 am #16030

    Indranil

    Gigi,

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

    _________
    Indranil Deo,
    Team CanvasJS

    September 19, 2017 at 12:36 am #16080

    Gigi

    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.

    September 19, 2017 at 9:51 am #16081

    Indranil

    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.