Google Visualization API : Line Chart – Hide negative values in Y-axis

google-visualization

I use Google Visualization API to plot Line Chart. Here are the codes:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
    // Total Coupon View
    var data_total_users = new google.visualization.DataTable();
    data_total_users.addColumn('string', 'Total Users');
    data_total_users.addColumn('number', 'User Count');

    data_total_users.addRows(7);
    data_total_users.setValue(0, 0, 'Sunday');
    data_total_users.setValue(0, 1, 10);
    data_total_users.setValue(1, 0, 'Monday');
    data_total_users.setValue(1, 1, 4);
    data_total_users.setValue(2, 0, 'Tuesday');
    data_total_users.setValue(2, 1, 3);
    data_total_users.setValue(3, 0, 'Wednesday');
    data_total_users.setValue(3, 1, 7);
    data_total_users.setValue(4, 0, 'Thursday');
    data_total_users.setValue(4, 1, 8);
    data_total_users.setValue(5, 0, 'Friday');
    data_total_users.setValue(5, 1, 10);
    data_total_users.setValue(6, 0, 'Saturday');
    data_total_users.setValue(6, 1, 10);
    var chart = new google.visualization.LineChart(document.getElementById('chart_users_total'));
    chart.draw(data_total_users, {width: 1000, height: 400, title: '', hAxis: {title: ''}});
}

The result looks like this:

Screenshot

Question is: How can I remove the -0.5, -1.0 ? Also, I would like to have integers (e.g. 0, 1, 2, 3, …) in Y-axis. Which parameter should I add?

Best Answer

In your chart.draw call, add: vAxis:{viewWindow: {min: 0}}

Related Solutions

Postive/Negative Chart in Google Visualization API

This is called a "Stacked Bar Chart", and can indeed be created with the Google Visualisation API.

Simply use the "isStacked" property (described here; http://code.google.com/apis/visualization/documentation/gallery/barchart.html).

Here's some sample code (based off the default bar chart example provided by Google and updated to show the use of isStacked and some sample data from your example);

function drawVisualization() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number');
  data.addColumn('number');

  data.addRows(12);

  data.setCell(0, 0, 'January');
  data.setCell(1, 0, 'February');
  data.setCell(2, 0, 'March');
  data.setCell(3, 0, 'April');
  data.setCell(4, 0, 'May');
  data.setCell(5, 0, 'June');
  data.setCell(6, 0, 'July');
  data.setCell(7, 0, 'August');
  data.setCell(8, 0, 'September');
  data.setCell(9, 0, 'October');
  data.setCell(10, 0, 'November');
  data.setCell(11, 0, 'December');

  data.setCell(0, 1, 19);
  data.setCell(1, 1, 18);
  data.setCell(2, 1, 20);
  data.setCell(3, 1, 19);
  data.setCell(4, 1, 18);
  data.setCell(5, 1, 20);
  data.setCell(6, 1, 19);
  data.setCell(7, 1, 18);
  data.setCell(8, 1, 20);
  data.setCell(9, 1, 19);
  data.setCell(10, 1, 18);
  data.setCell(11, 1, 20);

  data.setCell(0, 2, -12);
  data.setCell(1, 2, -13);
  data.setCell(2, 2, -11);
  data.setCell(3, 2, -12);
  data.setCell(4, 2, -13);
  data.setCell(5, 2, -11);
  data.setCell(6, 2, -12);
  data.setCell(7, 2, -13);
  data.setCell(8, 2, -11);
  data.setCell(9, 2, -12);
  data.setCell(10, 2, -13);
  data.setCell(11, 2, -11);
  data.setCell(0, 2, -12);
  data.setCell(1, 2, -13);
  data.setCell(2, 2, -11);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"S&P 500 Up/Down Performance Since 1980", 
            width:600, height:400,
            isStacked:"true",
            legend:"none" }
      );
}

And the results...

Stacked Bar Chart

Php – Google Visualization API – Multi-Line Chart

I figured it out myself. My god! What a relief it is. I just had to have an array in this format:

Array
(
    [December 2012] => Array
        (
            [0] => 71
            [1] => 85
        )

    [November 2012] => Array
        (
            [0] => 70
            [1] => 83                
        )

    [October 2012] => Array
        (
            [0] => 66
            [1] => 81
        )

)

The rest was a small modification in the foreach loop and voila! It was done.

Related Topic

Javascript – Google visualization line chart missing Y axis