Combine your data into a single DataTable, with one column for your dates
and two for your data series. Then in the ChartWrappers, use the "view"
parameter to restrict the columns of data used by each. See an example
based on your code here: http://jsfiddle.net/asgallant/F9Xu5/
On Friday, January 24, 2014 4:04:01 PM UTC-5, steven winner wrote:
>
> I am trying to setup a dashboard that will have multiple LineCharts that
> will represent different data, but will have the same X axis of Date
> objects. What I would like to do, is control all these different LineCharts
> with one ControlWrapper ChartRangeFilter, but I don’t see how you can tie
> the ControlWrapper to graphs with different data, since you pass the
> DataTable object that represents the LineChart’s data, to the draw() method
> of the dashboard, and not to the actual “dataTable” property of the
> ChartWrapper that represents each LineChart.
>
> Is there a way to have a ControlWrapper interact with different LineCharts
> with different data sets, but still having the X axis (date range) in
> common?
>
> Here is what I have so far, but can’t figure out how to get the second
> graph to be controlled by the ChartRangeFilter…
>
> <!doctype html><html lang="en"><head>
> <meta charset="utf-8">
> <script type="text/javascript">
>
> // data is in form of [year-dayOfYear, value]
> // so ["2014-8", 1094] is January 8th, 2014 and has a value of 1094
>
> var chart1_test_data = [
> // ["Date", "registrations"],
> ["2014-8",1094],
> ["2014-9",86251],
> ["2014-10",76579],
> ["2014-11",75670],
> ["2014-12",68921],
> ["2014-13",60597],
> ["2014-14",65470],
> ["2014-15",65873],
> ["2014-16",71606],
> ["2014-17",83908],
> ["2014-18",68889],
> ["2014-19",72622],
> ["2014-20",66980],
> ["2014-21",60075],
> ["2014-22",73745]
> ];
>
> var chart2_test_data = [
> // ["Date", "registrations"],
> ["2014-8",2094],
> ["2014-9",36251],
> ["2014-10",66579],
> ["2014-11",35670],
> ["2014-12",18921],
> ["2014-13",50597],
> ["2014-14",45470],
> ["2014-15",35873],
> ["2014-16",41606],
> ["2014-17",23908],
> ["2014-18",58889],
> ["2014-19",42622],
> ["2014-20",36980],
> ["2014-21",20075],
> ["2014-22",63745]
> ];
> </script>
>
> <script type="text/javascript" src="//www.google.com/jsapi"></script>
> <script type="text/javascript">
> google.load('visualization', '1', { packages : ['corechart',
> 'controls'] } );
> google.setOnLoadCallback(drawDashboard);
>
> function drawDashboard() {
>
> // need to massage chart1_test_data coming from php, so we can
> have a Date obj, instead of string date
> var chart1_data = new google.visualization.DataTable();
> chart1_data.addColumn('date', 'Date');
> chart1_data.addColumn('number', 'registrations');
>
> for (var i = 0; i < chart1_test_data.length; i++) {
> var tmpArray = chart1_test_data[i][0].split("-");
>
> var date = new Date(parseInt(tmpArray[0]), 0); // initialize
> a date in `year-01-01`
> var dateData = new Date(date.setDate(parseInt(tmpArray[1])));
> // add the number of days
> chart1_data.addRow([ dateData,
> parseInt(chart1_test_data[i][1]) ]);
> }
>
> // need to massage chart2_test_data coming from php, so we can
> have a Date obj, instead of string date
> var chart2_data = new google.visualization.DataTable();
> chart2_data.addColumn('date', 'Date');
> chart2_data.addColumn('number', 'registrations');
>
> for (var i = 0; i < chart2_test_data.length; i++) {
> var tmpArray = chart2_test_data[i][0].split("-");
>
> var date = new Date(parseInt(tmpArray[0]), 0); // initialize
> a date in `year-01-01`
> var dateData = new Date(date.setDate(parseInt(tmpArray[1])));
> // add the number of days
> chart2_data.addRow([ dateData,
> parseInt(chart2_test_data[i][1]) ]);
> }
>
> // Create a dashboard.
> var myDashboard = new
> google.visualization.Dashboard(document.getElementById('dashboard_div'));
>
> // Create a date range slider
> var myDateSlider = new google.visualization.ControlWrapper({
> 'controlType': 'ChartRangeFilter',
> 'containerId': 'control_div',
> 'options': {
> // Filter by the date axis.
> 'filterColumnLabel': 'Date',
> 'ui': {
> 'chartOptions': {
> 'height' : 60,
> },
> }
> },
> 'state': {
> 'range': {
> 'start': new Date(2014, 0, 10),
> 'end' : new Date(2014, 0, 20)
> }
> }
> });
>
> // Line chart 1 that is hooked up to ChartRangeFilter control
> var lineChart1 = new google.visualization.ChartWrapper({
> 'chartType' : 'LineChart',
> 'containerId' : 'line_chart1',
> // 'dataTable' : chart1_data // this doesn't go here
> when using the dashboard apparently
> });
>
> // Line chart 2 that I would like to also hook up to
> ChartRangeFilter control
> var lineChart2 = new google.visualization.ChartWrapper({
> 'chartType' : 'LineChart',
> 'containerId' : 'line_chart2',
> 'dataTable' : chart2_data // only putting this here so
> the chart has data
>
> });
>
> // Bind lineChart1 to the dashboard, and to the controls
> myDashboard.bind(myDateSlider, lineChart1 ).draw(chart1_data);
>
> // just drawing second chart so it shows up
> lineChart2.draw();
> */* would really like to be able to set the dataTable property for each graph
> and do something like this:
>
> myDashboard.bind( myDateSlider, lineChart1 );
> myDashboard.bind( myDateSlider, lineChart2 );
> myDashboard.draw();
>
> */*
>
> }
> </script></head>
> <body>
>
> <div id="dashboard_div">
> <div id="control_div"></div>
> <div id="line_chart1"></div>
> <div id="line_chart2"></div>
> </div>
> </body></html>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
