Home forums Using CanvasJS Bar Chart with Multiple Data Columns

This topic contains 6 replies, has 3 voices, and was last updated by  Vishwas R 1 week, 6 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #17457

    corylee766
    Member

    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://canvasjs.com/assets/script/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>
    #17464

    Suyash Singh
    Moderator

    @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

    #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>
    
    #17467

    corylee766
    Member

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

    #17487

    Suyash Singh
    Moderator

    @corylee766,

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

    ___
    Suyash Singh
    Team CanvasJS

    #17495

    corylee766
    Member

    @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://canvasjs.com/assets/script/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>
    
    #17498

    Vishwas R
    Keymaster

    @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.