CODEWITHSUNDEEP
javascriptgoogle-visualization
Irithiel
Irithiel

Reputation: 23

Adding a 3rd column for links to a Google DataTable in order to draw a ChartWrapper

I am using Google ColumnChart and I want to add links on columns. But on the other hand, I want to use a NumberRangeFilter on this chart. I have managed to do both things separately, but I can't bring them together on the chart. The reason seems to be the 3rd column that I add for links in the DataTable, that causes an error in the application :

One or more participants failed to draw()

All series on a given axis must be of the same data type

Here is what I have tried :

  1. Add a link on columns :

    // Load the Visualization API and the controls package.
google.charts.load('current', { packages: ['corechart', 'controls'] });

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

// DataTable with 3 columns, and the 2nd is for links
var dataStats = google.visualization.arrayToDataTable([
    ['Name of X axis', 'link', 'Name of Y axis'],
    // Use of PHP variables
    {% if stats is defined and stats is not null %}
        {% for stat in stats %}
            ['{{ stat['id'] }}', '{{ path('the_path', {'id': stat['id']}) }}', {{ stat['COUNT(*)'] }}],
        {% endfor %}
    {% else %}
        ['0', '{{ path('other_path') }}', 0],
    {% endif %}
]);

// Options for the DataTable
var optionsStats = { 
// ...
};

// DataView
var viewStats = new google.visualization.DataView(dataStats);
viewStats.setColumns([0, 2]);

// Draw the chart
var chartStats = new google.visualization.ColumnChart(document.getElementById('stats_div'));
chartStats.draw(viewStats, optionsStats);

//Listener on the chart
function selectColumn() {
    window.location = dataStats.getValue(chartStats.getSelection()[0]['row'], 1);
}
google.visualization.events.addListener(chartStats, 'select', selectColumn);

    It makes all columns clickable and gives a customized appearance.

  2. Add a filter to print only some datas :

    //Dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 

//Chart range filter
var rangeFilter = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control_div',
    'options': {
        'filterColumnIndex': 1 // Should be set to 2 if there is a column 
                               // for links in the DataTable, to filter values of Y axis
     }
});

// The chart is now a ChartWrapper to fit in the dashboard
var chartStats = new google.visualization.ChartWrapper({
   'chartType': 'ColumnChart',
   'containerId': 'stats_div'
});

// Establish dependencies
dashboard.bind(rangeFilter, chartStats);

// Draw the dashboard
dashboard.draw(dataStats);

Note that there are no more options on the ChartWrapper because it seems not to work the same as ColumnChart.

Finally, how could I add a column for links in the DataTable and add a range filter at the same time?

Thanks in advance.

Upvotes: 2

Views: 123

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

first, you can use the same chart options on the wrapper,
just assign to the wrapper's options property

you can also place a view, directly on the wrapper

to assign your select event, first listen for the wrapper's ready event,
then assign the select event on the chart by using --> wrapper.getChart()

see following snippet... 

//Dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

//Chart range filter
var rangeFilter = new google.visualization.ControlWrapper({
  controlType: 'NumberRangeFilter',
  containerId: 'control_div',
  options: {
    filterColumnIndex: 2
   }
});

// The chart is now a ChartWrapper to fit in the dashboard
var chartStats = new google.visualization.ChartWrapper({
  chartType: 'ColumnChart',
  containerId: 'stats_div',
  options: optionsStats,
  view: {
    columns: [0, 2]
  }
});

function selectColumn() {
  window.location = dataStats.getValue(chartStats.getSelection()[0]['row'], 1);
}

google.visualization.events.addListener(chartStats, 'ready', function () {
  google.visualization.events.addListener(chartStats.getChart(), 'select', selectColumn);
});

// Establish dependencies
dashboard.bind(rangeFilter, chartStats);

// Draw the dashboard
dashboard.draw(dataStats);

Upvotes: 1

Related Questions