You must be logged in to post your query.
Home › Forums › Chart Support › Bar Chart with Multiple Data Columns
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>
@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
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>
I could not post the query in here so here is it in JSFiddle.
Please have a look at this jsfiddle for creating multiple charts from external JSON.
@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>
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
You must be logged in to reply to this topic. Login/Register