CODEWITHSUNDEEP
javascriptlinegraph
Richard Siaw
Richard Siaw

Reputation: 45

Problems Creating Line Graph

I am creating a line graph using javascript but I am unable to display dates on the Y axis... It can only display numbers. Could someone have a look at my codes and tell me how to fix it please?

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Daily Data Usage');

      data.addRows([
        [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
        [6, 11],
      ]);

      var options = {
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'Total Data Usage (GB)'
        },
        backgroundColor: '#f1f8e9'
      };

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

Upvotes: 0

Views: 41

Answers (1)

Aetricity
Aetricity

Reputation: 149

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'X');
      data.addColumn('number', 'Daily Data Usage');

      data.addRows([
        ["Jan 1st, 2016", 0],   ["Jan 2nd, 2016", 10],  ["Jan 3rd, 2016", 23],  ["Jan 4th, 2016", 17],  ["Jan 5th, 2016", 18],  ["Jan 6th, 2016", 9],
        ["Jan 7th, 2016", 11],
      ]);

      var options = {
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'Total Data Usage (GB)'
        },
        backgroundColor: '#f1f8e9'
      };

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

What you had to fix was changing the first type to a string instead of a number.

Upvotes: 1

Related Questions