Google Visualization Multiple Charts - Options Not Working

Question

I have a multi-chart Google Visualization script (1 column chart and 2 line charts). The charts are working/displaying correctly except for the var Options code. The most important part of the Options section is being able to change the column/line color. So I tried changing it using the role: 'style'} alternative, but it didn't work either.

Please see below code for the 3 charts. I'm new to Google Visualization, so any feedback/help is much appreciated!

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
          
  // Chart data
  var data = [];
  data[0] = google.visualization.arrayToDataTable ([["Date","Sessions", {role: 'style'}],
                                <?php
                                    for($a = 0; $a < 7; $a++)
                                    {
                                        echo "['".$date[$a]."', ".$sessions[$a].", 'fill-color: #76A7FA'],";
                                    }
                                ?>
                                                    ]);
  data[1] = google.visualization.arrayToDataTable ([["Date","Sessions"],
                                <?php
                                    for($a = 0; $a < 31; $a++)
                                    {
                                        echo "['".$date[$a]."', ".$sessions[$a]."],";
                                    }
                                ?>
                                                    ]);
  data[2] = google.visualization.arrayToDataTable ([["Date","Sessions"],
                                <?php
                                    for($a = 0; $a < count($query); $a++)
                                    {
                                        echo "['".$date[$a]."', ".$sessions[$a]."],";
                                    }
                                ?>
                                                    ]);
    
  var current = 0;
  var current_chart = 0;

  // Create and draw the visualization
  var chart = [];
  chart[0] = new google.visualization.ColumnChart(document.getElementById('sessions_chart'));

  chart[1] = new google.visualization.LineChart(document.getElementById('sessions_chart'));
  
  function drawChart() {
    // Disabling the buttons while the chart is drawing.
    document.getElementById('week_btn').disabled = true;
    document.getElementById('month_btn').disabled = true;
    document.getElementById('all_btn').disabled = true;
    google.visualization.events.addListener(chart, 'ready', function() {
    // Enable the buttons after the chart has been drawn
    document.getElementById('week_btn').disabled = false;
    document.getElementById('month_btn').disabled = false;
    document.getElementById('all_btn').disabled = false;
    });
    
    var view = new google.visualization.DataView(data[current]);    
  
    var options = {
                    title: 'Number of Sessions',
                    vAxis: {title: "# of Sessions", minValue:0},
                    hAxis: {format: 'MMM d, y'},
                    colors: 'lightgreen'
                };  

    // Convert first column to date format
    view.setColumns([{
        calc: function (dt, row) {
            return new Date(dt.getValue(row, 0));
        },
        label: data[current].getColumnLabel(0),
        type: 'date'
    }, 1]);  
      
    chart[current_chart].draw(view, data[current], options);
  }
  drawChart();
    // google.charts.setOnLoadCallback(drawChart);

document.getElementById('week_btn').addEventListener("click", displayWeek);
function displayWeek() {
  current = 0;
  current_chart = 0;
  drawChart();
}  
document.getElementById('month_btn').addEventListener("click", displayMonth);
function displayMonth() {
  current = 1;
  current_chart = 1;
  drawChart();
}  
document.getElementById('all_btn').addEventListener("click", displayAll);
function displayAll() {
  current = 2;
  current_chart = 1;
  drawChart();
}  
});

score 0 · Answer 1 · answered Feb 23 '21 at 12:46

the colors option should be an array...

colors: ['lightgreen']

as for the style role, try providing only the color...

echo "['".$date[$a]."', ".$sessions[$a].", '#76A7FA'],";

AND

highly recommend NOT building json manually in php from a string.

instead, separate the php from the html in two different files.
build the data in php and return the encoded json to the page.
then use ajax to call the php page and get the encoded json.
then draw the chart.

here are some examples...
How to automatically update Google Gauge
JSON $ajax problems

Thank you for your response! It turns out the problem was the ordering of `chart.draw(view, data[current], options);` I had to switch `data[current]` and `options`. Thanks for the recommendation, I'll check out the links to separate PHP and encode json — BNM, Feb 23 '21 at 17:21

Google Visualization Multiple Charts - Options Not Working

1 Answers1