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

Question

I am writing to seek help, with the following error -- All series on a given axis must be of the same data type --- error, which I am getting on the client end.

I cannot seem to figure out, where I may be going wrong, as I made sure the chartWrapper and controlWrapper have the same columns assigned.

 <script type="text/javascript">
   function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
    if (dataValues.length < 1)
        return;
    var data = new google.visualization.DataTable();
    data.addColumn('string', columnNames.split(',')[0]);
    data.addColumn('number', columnNames.split(',')[1]);
    data.addColumn('string', columnNames.split(',')[2]);
    data.addColumn('datetime', columnNames.split(',')[3]);
    data.addColumn('number', columnNames.split(',')[4]);

    for (var i = 0; i < dataValues.length; i++) {

        var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));

        data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date, dataValues[i].ID]);
    }

    // Define a Pie chart
    var pie = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'PieChartContainer',
        'options': {
            'width': 950,
            'height': 450,
            'legend': 'right',
            'chartView': { 'columns': [4, 1] },
            'title': chartTitle,
            'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },
            'tooltip': {isHtml: true}
        },
        'view': { 'columns': [4, 1] }
    });

    // Create a chart range slider  
    var myIdSlider = new google.visualization.ControlWrapper({  
    'controlType': 'ChartRangeFilter',  
    'containerId': 'control_div',  
    'options': {  
        'filterColumnLabel': columnNames.split(',')[4],
        'filterColumnIndex': '4',
        'chartView': { 'columns': [4, 1] },
        }
      }); 

    new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([myIdSlider], [pie]).draw(data);
}

Sample:

 <script type="text/javascript">google.load('visualization','1.0',{'packages':  ['corechart','controls']});google.setOnLoadCallback(function(){drawVisualization([{"ColumnName":"HARBM","Value":81,"Type":"TK","Date":"\/Date(1395273600000)\/","ID":541255},{"ColumnName":"HARBM","Value":100,"Type":"TK","Date":"\/Date(1395273600000)\/","ID":541254},{"ColumnName":"INCAPS","Value":88,"Type":"TK","Date":"\/Date(1395273600000)\/","ID":541253},{"ColumnName":"INCAPS","Value":88,"Type":"TK","Date":"\/Date(1395273600000)\/","ID":541252},{"ColumnName":"WBCMT","Value":111,"Type":"TK","Date":"\/Date(1395273600000)\/","ID":541251}],'Text Example','Text Example','Text Example','Type,');});</script></form>

Please advise. Thank you for your time and help.

Add samples for dataValues, chartTitle, columnNames, and categoryCaption to your question so I can test this. — asgallant
Thank you for your response. I have updated my question with the requested sample. Many thanks. — user3070072

asgallant asgallant · Accepted Answer · 2014-03-21T17:54:11

Your syntax for the chartView option is wrong: it is ui.chartView that you need to set in the ChartRangeFilter's options:

var myIdSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
        'filterColumnIndex': 4,
        'ui': {
            'chartView': { 'columns': [4, 1] }
        }
    }
});

As an aside, setting both the filterColumnIndex and filterColumnLabel options doesn't accomplish anything (filterColumnIndex overrides filterColumnLabel). Also, LineCharts do not have a chartView option, so you can remove that from the chart.

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

1 Answers