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
On Thu, Sep 24, 2015 at 3:17 PM, <[email protected]> wrote: > > I have a ColumnChart which data is sitting in a GoogleSheet > <https://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI/edit#gid=2073092266> > > 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: > > > <https://lh3.googleusercontent.com/-MqpeDqNUkTk/VgRL55DXcZI/AAAAAAAAAvQ/JTE-a7-X2wE/s1600/result.JPG> > > *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 dataSourceUrl = ' > https://docs.google.com/spreadsheets/d/1xfb9trifQA5KDPc9Nh5hBL4MJ290Mxcc1Uod2VTPzYI > '; > 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> > > > > -- > 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 [email protected]. > To post to this group, send email to > [email protected]. > 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 > <https://groups.google.com/d/msgid/google-visualization-api/1ceb324c-cf8e-4a1f-8544-dd711e57d822%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- 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 [email protected]. To post to this group, send email to [email protected]. 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/CAOtcSJM7uOumToCoOhaSKgpQWDBM2csY-cVJYVyA6zqyqDzS0Q%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
