How to assign a different color to each column in a ColumnChart when reading the data from a Google Sheets?

143 views
Skip to first unread message

samuel.ma...@bbva.com

unread,
Sep 24, 2015, 3:17:12 PM9/24/15
to Google Visualization API

I have a ColumnChart which data is sitting in a GoogleSheet

I know that to define the color of each Column can be done as follow if you are hardcoding your data 

var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);


However, since I'm getting all my data from a Google Sheets even I had define different colors


       var optionsPieChart = {
          height: 400,
          title: 'Progress of the Implementation for Selected System',
          colors: ['#094FA4', '#006EC1', '#009EE5', '#52BCEC', '#89D1F3','#B5E5F9']
        };


All my bars appear in the same color:


My question is: How can I assign a different color to each column when reading the data from a Google Sheets?

THANKS!!!!!


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="Piequerywrapper.js"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.load('visualization', '1.0', {packages: ['charteditor']});

    google.setOnLoadCallback(init);

    var magicIncantation = '/gviz/tq?sheet=ImplementationProgress&headers=1&tq=';
    var query;

    //Establece opciones para el Pie Char
       var optionsPieChart = {
          height: 400,
          title: 'Progress of the Implementation for Selected System',
          colors: ['#094FA4', '#006EC1', '#009EE5', '#52BCEC', '#89D1F3','#B5E5F9']
        };


    function init(){
      var queryString = encodeURIComponent("SELECT B, C WHERE A = 'CRDB'");
      var container = document.getElementById('Piechart_div');
      var PieChart = new google.visualization.ColumnChart(container);
      query && query.abort();
      query = new google.visualization.Query(dataSourceUrl + magicIncantation + queryString);
      var queryWrapper = new QueryWrapper(query, PieChart, optionsPieChart, container);
      queryWrapper.sendAndDraw();
    }


    function sendAndDraw(querySelector) {
      var container = document.getElementById('Piechart_div');
      var PieChart = new google.visualization.ColumnChart(container);

      query && query.abort();
      var queryToPass = "SELECT B, C WHERE A = '" + querySelector + "'"
      query = new google.visualization.Query(dataSourceUrl + magicIncantation + queryToPass);
      var queryWrapper = new QueryWrapper(query, PieChart, optionsPieChart, container);
      queryWrapper.sendAndDraw();
    }





    function loadEditor(querySelector) {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         //Set up the default Chart Selected
         'chartType':'PieChart',
         'dataSourceUrl':dataSourceUrl + magicIncantation,
         'query':querySelector,
         'options': {'title':'Title of Pie Chart', 'legend':'none', 'colors': ['#094FA4', '#006EC1', '#009EE5', '#52BCEC', '#89D1F3','#B5E5F9']}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('Piechart_div'));
    }

   </script>

  </head>
  <body>

  <select id="SystemSelector" onChange="sendAndDraw(this.value)">
    <option value="CRDB">CRDB</option>
    <option value="EDW">EDW</option>
    <option value="FDM">FDM</option>
    <option value="Basel III">Basel III</option>
  </select>

        <div id="Piechart_div" style="width: 100%;"></div>


 <br>
  
  <button onclick="loadEditor(SystemSelector.value)">Change type of Graph</button>
  </body>
</html>



Daniel LaLiberte

unread,
Sep 24, 2015, 4:08:42 PM9/24/15
to Google Visualization API
Samuel,

You should probably set up a DataView in which you add the role: 'style' column.  See https://developers.google.com/chart/interactive/docs/reference#dataview-class

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/1ceb324c-cf8e-4a1f-8544-dd711e57d822%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

samuel.ma...@bbva.com

unread,
Sep 24, 2015, 6:06:31 PM9/24/15
to Google Visualization API
Sorry, but I'm looked into that link and wasn't able to figure out how to to it and where.

Something like that? I tried that but doesn't seams to work.

         style: {color: 'color1','color2',},  


       var optionsPieChart = {
         height: 400,
         title: 'Progress of the Implementation for Selected System',

         style: {color: 'color1','color2',},  
         colors: ['#094FA4', '#006EC1', '#009EE5', '#52BCEC', '#89D1F3','#B5E5F9']
       };

Thank you again
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
Reply all
Reply to author
Forward
0 new messages