I frequently see questions come up here in regards to problems with the AnnotatedTimeline charts, which are difficult or effectively impossible to solve in ATL charts but are easily solvable using a Dashboard<https://developers.google.com/chart/interactive/docs/gallery/controls#dashboardobject>with a LineChart<https://developers.google.com/chart/interactive/docs/gallery/linechart>and a ChartRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>. I recognize that migrating may not be an easy task for some API users, so in aide of users who wish to make the migration, I am developing a tool which attempts to simplify the process to the greatest extent possible. In its most basic form, the tool requires very little changes to code based on an existing AnnotatedTimeline:
1) load the "controls" package instead of the "annotatedtimeline" package 2) change "google.visualization.AnnotatedTimeline" to "asgallant.LineChartAsAnnotatedTimeline" 3) when calling the chart's draw method, pass "true" as a 3rd parameter, to tell the tool to convert from ATL options to LineChart options The tool also offers more comprehensive options which allow for customization of the chart and control for more advanced users (they accept the same options as ComboCharts and ChartRangeFilters, respectively). The attached "example.html" file offers more details on how to use the tool. Events do not currently bubble up to the migration tool, but you can register for events by using one of the #getChart, #getChartWrapper, #getControl, or #getControlWrapper methods, depending on the nature of your event handler. This is currently in beta stage, I don't recommend you use this tool for any production charts, but I would appreciate any feedback on bugs and suggestions for improvement. -- 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?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
Method 1 - conversion from AnnotatedTimeline
/* all options given in the same style as for an ATL chart
* required steps:
* 1) load the "controls" package instead of the "annotatedtimeline" package
* 2) replace "google.visualization.AnnotatedTimeline" with "asgallant.LineChartAsAnnotatedTimeline"
* 3) specify "true" as the 3rd parameter to tell the visualization to convert from ATL options to LineChart options
* 4) all done!
* note that not all ATL options are supported, and those that are may not behave in exactly the same way
* unsupported options are ignored
*/
var chart1 = new asgallant.LineChartAsAnnotatedTimeline(document.getElementById('chart_div1'));
chart1.draw(data, {
colors: ['blue', 'red'],
dateFormat: 'MMM d',
fill: 40,
max: 100000,
min: 0,
scaleColumns: [0, 1],
thickness: 2,
zoomEndTime: new Date(2008, 1 ,5),
zoomStartTime: new Date(2008, 1 ,2)
}, true);
Method 2 - treat like a LineChart
// treat this exactly the same way you would a LineChart
// all of the same options are supported
var chart2 = new asgallant.LineChartAsAnnotatedTimeline(document.getElementById('chart_div2'));
chart2.draw(data, {
height: 300,
width: 500,
chartArea: {
height: '85%'
}
});
Method 3 - use custom options format for maximum flexibility
// use the custom options format, which allows the user to specify options for both the chart and control in one object
var chart3 = new asgallant.LineChartAsAnnotatedTimeline(document.getElementById('chart_div3'));
chart3.draw(data, {
// specify options for the chart in the "chart" parameter
chart: {
height: 300,
width: 500,
chartArea: {
height: '85%',
width: '75%'
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
areaOpacity: 0.6
},
1: {
targetAxisIndex: 1,
color: 'black'
}
}
},
// specify options for the range filter in the "control" parameter
control: {
filterColumnIndex: 0,
ui: {
chartOptions: {
chartArea: {
width: '75%'
},
colors: ['black'],
height: 40
},
chartView: {
columns: [0, 4]
}
},
state: {
range: {
end: new Date(2008, 1 ,4)
}
}
}
});
AnnotatedTimeline migration tool by Andrew Gallant is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
asgallant.LineChartAsAnnotatedTimeline[0.4b].js
Description: JavaScript source
