bar chart horizontal legend not working properly

[Patrick Beaudan]

My bar charts used to work fine until a few days ago, but I've noticed today that the horizontal legend now shows multiple times the same value. It seems that the chart creates vertical lines interpolated between the bars and sticks a legend there even though that legend does not correspond to a bar. 

My JSON string for a stacked bar chart is

{"cols":[{"label":"Year","type":"number"},{"label":"Positive Months","type":"number"},{"label":"Negative Months","type":"number"}],"rows":[{"c":[{"v":2007},{"v":1},{"v":2}]},{"c":[{"v":2008},{"v":5},{"v":7}]},{"c":[{"v":2009},{"v":8},{"v":4}]},{"c":[{"v":2010},{"v":7},{"v":5}]},{"c":[{"v":2011},{"v":6},{"v":6}]},{"c":[{"v":2012},{"v":10},{"v":2}]},{"c":[{"v":2013},{"v":9},{"v":3}]},{"c":[{"v":2014},{"v":1},{"v":1}]}]}

the resulting chart horizontal axis displays twice 2007 (once without a bar and once under the stacked bars), and so on for every year.

 I've tried using the option to show only every other legend, the problem is then that the chart picks up every legend that is not under the stacked bars, creating an even worse result. Could someone help me fix this?

This is my function to create the data:

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {        

  var jsonData = $.ajax({          

  url: "http://www.beladv.com/charts/custom/chart_customPositiveMonths.php",          

  dataType:"json",          

  async: false          

}).responseText;  

var data = new google.visualization.DataTable(jsonData);   // Create our data table out of JSON data loaded from server.           

var options = {          

  'legend': {position: 'top'}, 

  'colors': ['green' , 'red'], 

  'vAxis': {minorGridlines: 'NULL', baselineColor:'blue', baseline:0, maxValue: 12, gridlines: {count:5}, textStyle: {fontSize:10, color:'black', bold:'true'}  },

  'hAxis': {gridlines: {count:-1}, minorGridlines: 'NULL', textStyle: {fontSize:10, color:'black', bold:'true'}, format:'####' },

  'isStacked': true,

  'fontName':'Trebuchet MS'         

};        

var chart = new google.visualization.ColumnChart(document.getElementById('chart_customPositiveMonths'));        

chart.draw(data, options);      

}    

[asgallant]

Take away the hAxis.format option, and you will see what is going on.  Try these for your hAxis options instead:

hAxis: {

    textStyle: {

        fontSize:10,

        color:'black',

        bold:'true'

    },

    format: '####',

    ticks: data.getDistinctValues(0)

[Patrick Beaudan]

Amazing! Thanks so much, works perfectly.

[Patrick Beaudan]

Thanks very much, worked great.

> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Google Visualization API" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/google-visualization-api/oQvIZwE1rC4/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> google-visualizati...@googlegroups.com.
> To post to this group, send email to
> google-visua...@googlegroups.com.
> Visit this group at http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/groups/opt_out.



--

Best Regards,
Patrick Beaudan
(415) 839-5239

[krishna prasad]

please help me to take the data for this chart onnetsourcing.com/vivera/chart.html

> google-visualization-api+unsub...@googlegroups.com.