Forum Replies Created by corylee766

Viewing 3 posts - 1 through 3 (of 3 total)
  • November 9, 2017 at 8:21 am in reply to: Bar Chart with Multiple Data Columns #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 7, 2017 at 5:30 pm in reply to: Bar Chart with Multiple Data Columns #17467

    corylee766

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

    November 7, 2017 at 5:14 pm in reply to: Bar Chart with Multiple Data Columns #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>
Viewing 3 posts - 1 through 3 (of 3 total)