This might be a bit complex to explain if you're new to javascript, so
please forgive me if I confuse you. If you need clarification on any
points, please feel free to ask.
First, in order to use the ChartRangeFilter, your data needs to be in a
continuous form. Your chart uses date strings, which is a good starting
place - we just need to convert those into Date objects. The Visualization
API's DataView will handle this conversion for us nicely:
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'date',
label: data.getColumnLabel(0),
calc: function (dt, row) {
// convert date strings to dates
var dateString = dt.getValue(row, 0);
var dateArray = dateString.split('-');
var year = dateArray[2];
var month = dateArray[0] - 1; // convert to javascript's 0-indexed
months
var day = dateArray[1];
return {v: new Date(year, month, day), f: dateString};
}
}, 1, 2]);
Then you need to convert the LineChart object into a ChartWrapper object:
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
options: {
width: 900, // make sure this is the same as the control's
ui.chartOptions.width option
height: 540,
legend: {
position: 'right'
},
focusTarget: 'category',
chartArea: {
width: '70%', // make sure this is the same as the control's
ui.chartOptions.chartArea.width option
height: '80%'
},
hAxis: {
format: 'MM-dd-yyyy' // mimic the date string format
}
}
});
There are some extra options listed in there that I hope will become clear
in a moment. The next step is to create a ControlWrapper that holds the
ChartRangeFilter:
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
width: 900, // make sure this is the same as the chart's
width option
height: 50,
chartArea: {
width: '70%' // make sure this is the same as the
chart's chartArea.width option
},
hAxis: {
format: 'MM-dd-yyyy' // mimic the date string format
}
}
}
}
});
You need to set the "width" and "chartArea.width" of the chart and the
control to the same values in order to keep the chart and control aligned
(you can ignore this advice if you don't want them aligned, but most users
do).
Also set in both the chart and control is "hAxis.format" option, which
formats the dates for display on the horizontal axis. I set this option to
mimic the strings from your spreadsheet, but you can change the format to
appear otherwise if you want.
The final step in javascript is to create the Dashboard object that ties
the control, chart, and data together:
var dashboard = new
google.visualization.Dashboard(document.querySelector('#dashboard'));
dashboard.bind([control], [chart]);
// draw the dashboard with the view so the charts will use the Date objects
instead of the strings
dashboard.draw(view);
You also need an appropriate structure in HTML to hold these:
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
See it all put together here: http://jsfiddle.net/asgallant/BsF7Z/3/
On Monday, March 24, 2014 2:56:39 PM UTC-4, [email protected] wrote:
>
> I'm new to Google Visulization and to JS, so forgive me for any errors.
>
> I created a line chart using an existing data source in Google Drive. I
> would like to show the same chart but include the
> ChartRangeFilter<https://google-developers.appspot.com/chart/interactive/docs/gallery/controls#chartrangefilter>.
>
> Can anyone help me with this?
>
> I have my existing chart here: http://jsfiddle.net/mwinek/BsF7Z/
>
> Thank you!
>
--
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/d/optout.
