Thank you so much, asgallant! I'll be looking through it to understand what
you did. Thank you for the explanations as you went along.
On Monday, March 24, 2014 3:49:23 PM UTC-4, asgallant wrote:
>
> 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.
