Home › Forums › Chart Support › Bar Chart with Multiple Data Columns

Bar Chart with Multiple Data Columns

Viewing 7 posts - 1 through 7 (of 7 total)
  • November 7, 2017 at 2:06 am #17457

    corylee766

    I have created two files that I call my data from and trying to tie them together. I am still a newbie with JSON so could use some help.

     <!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://cdn.canvasjs.com/canvasjs.min.js"></script>

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

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

                var chart = new CanvasJS.Chart("chartContainer", {
				title:{
					text: "Monthly Workload for Dexter, MI"
				},
     axisY:{
       maximum: 150,
       interval: 10
     },
                    data: [
                        {
                        indexLabelFontColor: "white",
                        indexLabelPlacement: "inside",
                        indexLabel: "{y}",
                            dataPoints: result
                        }
                    ]
                });

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

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

                var chart = new CanvasJS.Chart("chartContainer1", {
				title:{
					text: "Monthly Workload for San Leandro, CA"
				},
      axisY:{
       maximum: 150,
       interval: 10
     },
                    data: [
                        {
                        indexLabelFontColor: "white",
                        indexLabelPlacement: "inside",
                        indexLabel: "{y}",
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
            });
        });
    </script>
</head>
<body>
<div align='center'>
    <div id="chartContainer" style="width: 1100px; height: 420px;"></div>
</div>
<br>
<br>
<br>
<div align='center'>
    <div id="chartContainer1" style="width: 1100px; height: 420px;"></div>
</div>
</body>
</html>
    November 7, 2017 at 3:13 pm #17464

    Suyash Singh

    @corylee766,

    Are you looking for something like this? If not kindly brief us more about what you are looking for, so that we can understand your requirement better & help you out.

    ___
    Suyash Singh
    Team CanvasJS

    November 7, 2017 at 5:14 pm #17466

    corylee766

    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://cdn.canvasjs.com/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>
    November 7, 2017 at 5:30 pm #17467

    corylee766

    I could not post the query in here so here is it in JSFiddle.

    November 8, 2017 at 4:21 pm #17487

    Suyash Singh

    @corylee766,

    Please have a look at this jsfiddle for creating multiple charts from external JSON.

    ___
    Suyash Singh
    Team CanvasJS

    November 9, 2017 at 8:21 am #17495

    corylee766

    @Suyash Singh

    I looked at the jFiddle and tried to replicate it and must be missing something. I am still a novice when it comes to Json.

    What am I doing wrong?

    
  <!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' >
<head>
    <title></title>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
var dps1 = [], dps2 = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Multiseries Chart from JSON Data"
  },
  data: [
    {
      type: "column",
      dataPoints: dps1
    },
    {
      type: "column",
      dataPoints: dps2
    }
  ]
});
$.getJSON("https://api.myjson.com/bins/b1gun", function(chartData) {
	for(var i = 0; i < chartData.length; i++){
  	dps1.push({ x: new Date(chartData[i].x), y: chartData[i].y});
  }
  chart.render();
});

$.getJSON("https://api.myjson.com/bins/18fvvz", function(chartData) {
	for(var i = 0; i < chartData.length; i++){
  	dps2.push({ x: new Date(chartData[i].x), y: chartData[i].y});
  }
  chart.render();
});

});
  </script>

</head>
<body>
<br><!-- Just so that JSFiddle's Result label doesn't overlapthe Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
</body>
</html>
    November 9, 2017 at 11:06 am #17498

    Vishwas R

    @corylee766,

    Since you are using getJSON, including jQuery library to the webpage will work fine in your case. Please download static html from here.

    —
    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.