We help IT Professionals succeed at work.

How to change the colour of columns using dynamic data for google charts

Black Sulfur
Black Sulfur asked
on
624 Views
Last Modified: 2018-02-06
I had this question after viewing How to make google charts responsive.

If I am using php dynamic data from a database to generate my charts, how do I change the colours? I have 2 different charts next to each other and both are blue and red. What if I want one to be blue and red and the other green and orange for example?

I tried something like this which won't work because I am trying to use one argument when there are two bars that need to be colored.

function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Target', 'Actual', { role: 'style' }],
          ['<?php echo date('m');?>', <?php echo $form_vars['target'];?>, <?php echo $form_vars['actual'];?>, 'color: #e5e4e2']
        ]);

        var options = {
          chart: {
            title: '',
           
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

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

Open in new window

Comment
Watch Question

Dmitriiconsultant
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Most Valuable Expert 2011
Author of the Year 2014
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Since nobody else has posted I will accept both answers with the jpGraph alternative as the accepted solution as that is offering an alternative with potentially more flexibility.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.