Google LineChart Displaying Nagative Value

Question

I am displaying Google Line chart using below code

google.charts.load('current', {'packages':['corechart']});  
      //google.charts.setOnLoadCallback(drawChart);
     
    function drawChart(chart_data) {
        
        
                
        
        var jsonData = chart_data;
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Day');
            data.addColumn('number', 'SOLD');
            data.addColumn('number', 'BOUGHT');
            $.each(jsonData, function(i, jsonData){
                var Day = parseFloat($.trim(jsonData.Day));
                var SOLD = parseFloat($.trim(jsonData.SOLD));
                var BOUGHT = parseFloat($.trim(jsonData.BOUGHT));
                data.addRows([[Day, SOLD, BOUGHT]]);
            });
      
        var options = {
                fontName: 'Roboto',
                height: 400,
                fontSize: 12,
                chartArea: {
                    left: '7%',
                    width: '93%',
                    height: 350
                },
                pointSize: 10,
                curveType: 'function',
                backgroundColor: 'transparent',
                tooltip: {
                    textStyle: {
                        fontName: 'Roboto',
                        fontSize: 13
                    }
                },
                vAxis: {
                    title: '',
                    titleTextStyle: {
                        fontSize: 13,
                        italic: false,
                        color: '#333'
                    },
                   
                    viewWindow: {
                        min: 0
                    },
                    textStyle: {
                        color: '#333'
                    },
                    baselineColor: '#ccc',
                    gridlines:{
                        color: '#eee',
                        count: 10
                    }
                   
                },
                hAxis: {
                    textStyle: {
                        color: '#333'
                    }
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        color: '#333'
                    }
                },
                series: {
                    0: { color: '#f58646' },
                    1: { color: '#66BB6A' }
                }
            };

        var chart = new google.visualization.LineChart(document.getElementById('google-line'));

        chart.draw(data, options);
      }

Its working fine like below if there data greater than 0

But if there all data value is 0, its display like below

I do not want display negative data and I will have never negative value in my data. So I have added code like below in options as suggested in some questions here.

viewWindow: {
  min: 0
},

However its not working and still I have negative values showing. Can anyone help me here for solve the puzzle? Also in horizontal line its missing dates and show in batch of 5 like 5, 10, 15, its possible to show all?

Thanks!

user_5090771 · Answer

that looks like some sort of bug with the 'current' version.
if we use version '45' it works properly.

google.charts.load('45', ...

see following working snippet...

google.charts.load('45', {
  packages: ['corechart']
}).then(function() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'SOLD');
  data.addColumn('number', 'BOUGHT');
  data.addRows([
    [0, 0, 0],
    [5, 0, 0],
    [10, 0, 0],
    [15, 0, 0],
    [20, 0, 0],
    [25, 0, 0],
    [30, 0, 0]
  ]);

  var options = {
    fontName: 'Roboto',
    height: 400,
    fontSize: 12,
    chartArea: {
      left: '7%',
      width: '93%',
      height: 350
    },
    pointSize: 10,
    curveType: 'function',
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        fontName: 'Roboto',
        fontSize: 13
      }
    },
    vAxis: {
      title: '',
      titleTextStyle: {
        fontSize: 13,
        italic: false,
        color: '#333'
      },

      viewWindow: {
        min: 0
      },
      textStyle: {
        color: '#333'
      },
      baselineColor: '#ccc',
      gridlines: {
        color: '#eee',
        count: 10
      }

    },
    hAxis: {
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: '#333'
      }
    },
    series: {
      0: {
        color: '#f58646'
      },
      1: {
        color: '#66BB6A'
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('google-line'));

  chart.draw(data, options);
});

or, when using the 'current' version,
if we add a max value to the viewWindow, then it will work...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'SOLD');
  data.addColumn('number', 'BOUGHT');
  data.addRows([
    [0, 0, 0],
    [5, 0, 0],
    [10, 0, 0],
    [15, 0, 0],
    [20, 0, 0],
    [25, 0, 0],
    [30, 0, 0]
  ]);

  var options = {
    fontName: 'Roboto',
    height: 400,
    fontSize: 12,
    chartArea: {
      left: '7%',
      width: '93%',
      height: 350
    },
    pointSize: 10,
    curveType: 'function',
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        fontName: 'Roboto',
        fontSize: 13
      }
    },
    vAxis: {
      title: '',
      titleTextStyle: {
        fontSize: 13,
        italic: false,
        color: '#333'
      },

      viewWindow: {
        min: 0,
        max: 1
      },
      textStyle: {
        color: '#333'
      },
      baselineColor: '#ccc',
      gridlines: {
        color: '#eee',
        count: 10
      }

    },
    hAxis: {
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: '#333'
      }
    },
    series: {
      0: {
        color: '#f58646'
      },
      1: {
        color: '#66BB6A'
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('google-line'));

  chart.draw(data, options);
});

Google LineChart Displaying Nagative Value

1 Answers