CODEWITHSUNDEEP
javascriptjavagoogle-visualization
kishoresrivatsa
kishoresrivatsa

Reputation: 13

Google Bar chart Bar color not changing

I'm using google bar chart to represent set of issues into different categories like open, closed, in progress etc., I'm getting the count of different categories and storing it to a hashmap, and then I retrieve the data from hashmap and displaying it in the bar chart using the below code.

Edited below is the code that I'm using. I've included it in a jsp page

      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawBarChart);

      function drawBarChart() {
        var data = google.visualization.arrayToDataTable([
           ['Status', 'No. of Issues', { role: 'style' }], 
          <%for(String SC:StatusCount.keySet()){
            %>
            ['<%=SC.toString()%>',<%=StatusCount.get(SC.toString())%>, 'blue'],
            <%  
            }
            %>
            <%for(String EC:EscCount.keySet()){
                %>
                ['<%=EC.toString()%>',<%=EscCount.get(EC.toString())%>, 'red' ],
                <%  
            }
            %>
        ]);

        var options = {
          chart: {
            title: 'Performance',
          },
          is3D: true,
          titleTextStyle: {
              fontName: 'Arial',
              fontSize: 20
          },

          'width':550,
          'height':400,
          backgroundColor: 'transparent',
          bars: 'vertical' // Required for Material Bar Charts.
        };

        var barchart = new google.charts.Bar(document.getElementById('barchart_material'));

        barchart.draw(data, google.charts.Bar.convertOptions(options));
      }

StatusCount is used for the status count and EscCount for the no of escalations. I wanted to change the color of the Escalations bar. But when I specify the color, it's not getting changed. Used the same thing that Google itself has given to change the color. Kindly help. Thanks in advance

Upvotes: 1

Views: 2321

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

Column Roles, including 'style' are only supported by Classic charts...

Classic --> google.visualization.BarChart & ColumnChart --> packages: ['corechart']

Material --> google.charts.Bar --> packages: ['bar']

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Status', 'No. of Issues', { role: 'style' }],
    ['Closed',14, 'blue'],
    ['On Hold',8, 'blue'],
    ['In Progress',20, 'blue'],
    ['Open',24, 'blue'],
    ['Escalations',4, 'red'],
  ]);

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

Upvotes: 1

Related Questions