A library to make it easy to use Google's visualization api
This package was matched against the version released on April 30, 2015 (Version 42).
You can use the api almost as you would do in the javascript version.
-
Include
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>in theheadsection of your HTML code. -
Use the
loadmethod of the Chart you want to use to load the required package(s) asynchronously. Afterwards you can go ahead and write your code.
LineChart.load().then((_) { var chart = new LineChart(...); var data = new DataTable(...); chart.draw(data); }); ```
- When using the API itself you can use
Chart.load()to only load the API without any packages.
- All Charts are implemented, included the corecharts and all other charts.
- Material charts (Line, Bar/Column, Scatter)
- Query API
- Formatters
- Static methods like
arrayToDataTable,drawChartanddrawToolbar - Events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Pie Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<script type="application/dart" src="piechart.dart"></script>
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
<script src="packages/browser/dart.js"></script>
</body>
</html>
import 'dart:html';
import 'package:google_charts/google_charts.dart';
void main() {
PieChart.load().then((_) {
var data = arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {'title': 'My Daily Activities'};
var chart = new PieChart(document.getElementById('piechart'));
chart.draw(data, options);
});
}
Following Events are supported by the different chart types:
| Name | select | ready | animationfinish | click | error | onmouseover | onmouseout | regionClick | collapse | rangechange | page | sort | rollup |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| AnnotationChart | x | x | x | ||||||||||
| AreaChart* | x | x | x | x | x | x | x | ||||||
| BarChart* | x | x | x | x | x | x | x | ||||||
| BubbleChart* | x | x | x | x | x | x | x | ||||||
| Calendar | x | x | x | x | x | ||||||||
| CandleStickChart* | x | x | x | x | x | x | x | ||||||
| ColumnChart* | x | x | x | x | x | x | x | ||||||
| ComboChart* | x | x | x | x | x | x | x | ||||||
| Gauge | |||||||||||||
| GeoChart | x | x | x | x | |||||||||
| Histogram* | x | x | x | x | x | x | x | ||||||
| LineChart* | x | x | x | x | x | x | x | ||||||
| Map | x | x | |||||||||||
| OrgChart | x | x | x | x | x | ||||||||
| PieChart* | x | x | x | x | x | x | |||||||
| Sankey | x | x | x | x | x | ||||||||
| ScatterChart* | x | x | x | x | x | x | x | ||||||
| AreaChart* | x | x | x | x | x | x | x | ||||||
| Table | x | x | x | x | |||||||||
| Timeline | x | x | x | x | x | ||||||||
| TreeMap | x | x | x | x | x | ||||||||
| WordTree | x | x |
*) core chart