Trouble with Dashboard when adding more than 2 columns

[Steven Brooks]

I am having trouble with my dashboard.  I took this code from a blog I found on building dashboards.  It works fine with a RangeFilter, LineChart, and Table as long as their are only two columns but when three are added it errors out.  The table will show with the three columns and the linechart will show just the two columns I specified, but the rangefilter errors out with "All series on a given axis must be of the same data type×"

Here is the code I currently have:

<script type="text/javascript" src="//www.google.com/jsapi"></script>  

<script type="text/javascript">  

google.load('visualization', '1', { packages : ['controls'] } );  

google.setOnLoadCallback(createTable);  

  

function createTable() {  

  // Create the dataset (DataTable)  

  var myData = new google.visualization.DataTable();  

  myData.addColumn('date', 'Date');  

  myData.addColumn('number', 'Weight');

  myData.addColumn('string', 'Exercise Name');   

  myData.addRows([  

    [new Date(2014, 6, 12), 90, "Squat"],      

    [new Date(2014, 6, 13), 80, "Squat"],      

    [new Date(2014, 6, 14), 100, "Squat"],      

    [new Date(2014, 6, 15), 80, "Squat"],      

    [new Date(2014, 6, 16), 70, "Squat"]

  ]);  

  

  // Create a dashboard.  

  var dash_container = document.getElementById('dashboard_div'),  

    myDashboard = new google.visualization.Dashboard(dash_container);  

  

  // Create a date range slider  

  var myDateSlider = new google.visualization.ControlWrapper({  

    'controlType': 'ChartRangeFilter',  

    'containerId': 'control_div',  

    'options': {  

      'filterColumnLabel': 'Date'  

    }  

  });  

  

  // Table visualization  

  var myTable = new google.visualization.ChartWrapper({  

    'chartType' : 'Table',  

    'containerId' : 'table_div'  

  });  

  

  // Bind myTable to the dashboard, and to the controls  

  // this will make sure our table is update when our date changes  

  myDashboard.bind(myDateSlider, myTable);  

  

  // Line chart visualization  

  var myLine = new google.visualization.ChartWrapper({  

    'chartType' : 'LineChart',  

    'containerId' : 'line_div',

    'view': {'columns': [0, 1]}  

  });  

    

  // Bind myLine to the dashboard, and to the controls  

  // this will make sure our line chart is update when our date changes  

  myDashboard.bind(myDateSlider, myLine );  

  

  myDashboard.draw(myData);  

}  

</script>  

  

<div id="dashboard_div">  

  <div id="control_div"><!-- Controls renders here --></div>  

  <div id="line_div"><!-- Line chart renders here --></div>  

  <div id="table_div"><!-- Table renders here --></div>  

</div>  

Thanks for any help.

[asgallant]

The ChartRangeFilter draws a simplified version of a chart using the data it is presented with; in your case, you are giving it 3 columns, one date (fine), one number (fine), and one string (not fine).  You have to hide the string column from the filter's chart in order to get it to draw successfully.  Use the "ui.chartView.columns" option to set the columns used by the filter's chart:

var myDateSlider = new google.visualization.ControlWrapper({  

    'controlType': 'ChartRangeFilter',  

    'containerId': 'control_div',  

    'options': {  

        'filterColumnLabel': 'Date',
        ui: {
            chartView: {
                columns: [0, 1]
            }
        }

    }
}); 

[Steven Brooks]

Awesome, that worked as usual.  My next goal would be to have a filter for the 'Exercise Name' column.  The walkthrough video for Google Scripts give a search filter with the following code:

var exerciseFilter = Charts.newCategoryFilter()

      .setFilterColumnLabel("Exercise")

      .build();

This is different than the code I currently have.  If I wanted to do a ColumnFilter, would I have to choose the column in a similar way as your answer?  I am assuming it is something along the lines of:

Making a new filter (don't currently know the syntax for that

Setting the filter column to 'Exercise Name'

Binding that filter with the other charts

Thoughts?

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/6r5b1F31S7Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[asgallant]

Creating the CategoryFilter is similar to creating the ChartRangeFilter:

var categoryFilter = new google.visualization.ControlWrapper({  

    controlType: 'CategoryFilter',  

    containerId: 'category_filter_div',  

    options: {  

        filterColumnLabel: 'Exercise Name'

    }
}); 

and you bind the two controls to the chart like this:

myDashboard.bind([myDateSlider, categoryFilter], [myLine]);

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Steven Brooks]

Awesome, works perfect!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Steven Brooks]

Now what I have is a ChartRangeFilter and the LineChart displaying a weird looking line.  Because I have many exercises occurring on a single day, the line shows multiple plots in the form of a vertical line for that date.  Would I be able to do something such as having the chart show something else to start with (such as a users bodyweight) and then have that change as I filter by exercise?  Or could I have the chart start by now showing anything and only when a user chooses to filter by an exercise will the line on the charts show? 

On Tue, Aug 13, 2013 at 6:46 PM, asgallant <drew_g...@abtassoc.com> wrote:

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

You can do pretty much anything you want.  The easy thing to do is to pass a starting state to the CategoryFilter, and set the options such that the user must always have one entry selected:

var categoryFilter = new google.visualization.ControlWrapper({  

    controlType: 'CategoryFilter',  

    containerId: 'category_filter_div',  

    options: {  

        filterColumnLabel: 'Exercise Name',
        ui: {
            allowMultiple: false,
            allowNone: false
        }

    },
    state: {
        selectedValues: ['Squat']
    }
}); 

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.