CODEWITHSUNDEEP
javascriptphpjsonchartsgoogle-visualization
user3368088
user3368088

Reputation: 151

data not displaying in google barchart

I am trying to display graph using google api. Even though i get result in array, it is not getting displayed in chart.

here is my code

<?php
$query = "SELECT
            MONTHNAME(last_modified) as Month,
            SUM(before_order_line_items.total) AS Quotes,
            COUNT(orders.order_id) AS Qcnt
          FROM orders
          INNER JOIN before_order_line_items
          ON orders.sales_order_id = before_order_line_items.sales_order_id
          WHERE order.order_quote='Quote' AND orders.authorise = 'Yes'

          GROUP BY MONTH(orders.last_modified)
          ORDER BY YEAR(orders.last_modified)
         ";      
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($result)) {
  $myurl[] = "['".$row['Month']."', ".$row['Quotes'].", ".$row['Qcnt']."]";
}
?>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {
    callback: drawChart,
    packages: ['corechart']
  });

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Quotes', 'Counts'],
      <?php
        echo implode(",", $myurl);
      ?>
    ]);

    var options = {
      title: 'Orders',
      vAxis: {
        title: '',
        titleTextStyle: {
          color: 'red'
        }
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="height: 400px;"></div>

When i check the date i am getting the date for Qcnt also

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Quotes', 'Counts'],
      ['May', 23299.00, 2]    ]);

But it is not getting displayed in graph. Only Quote amount is getting displayed.

Upvotes: 1

Views: 68

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the value for 'Counts' is too small
and simply isn't visible due to the scale of the chart...

you could assign the 'Counts' series to a second y-axis... 

series: {
  1: {
    targetAxisIndex: 1
  }
},

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Quotes', 'Counts'],
    ['May', 23299.00, 2],
    ['June', 23200.00, 2]
  ]);

  var options = {
    series: {
      1: {
        targetAxisIndex: 1,
      }
    },
    title: 'Orders',
    vAxis: {
      title: '',
      titleTextStyle: {
        color: 'red'
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions