Home forums Using CanvasJS Bar Chart with Multiple Data Columns Reply To: Bar Chart with Multiple Data Columns

#17466

corylee766
Member

So I have made a few changes. I have two queries from mysql pulling data. 1 query pulls data showing Jan – November. The second query only found data in Jul-Oct. But when it display the first bar chart displays Jan-Nov and the second bar chart is side by side but Jan for #1 is displaying as Jul for #2 and July -Oct is Jan-Apr.


  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON("chart-mth-data-ca.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
				title:{
					text: "Monthly Workload for Service"
				},

                     axisY:{
                     includeZero: true,
                           },

                    data: [
                        {
                        includeZero: "true",
                        indexLabelFontColor: "white",
                        indexLabelPlacement: "inside",
                        indexLabel: "{y}",
                            dataPoints: result[0],
                        },
                        {
                        includeZero: "true",
                        indexLabelFontColor: "white",
                        indexLabelPlacement: "inside",
                        indexLabel: "{y}",
                            dataPoints: result[1],
                        },
                    ]
                });

                chart.render();
            });
        });
    </script>
</head>
<body>
<div align='center'>
    <div id="chartContainer" style="width: 1100px; height: 420px;"></div>
</div>
</body>
</html>