In this recipe, we use the js
package as an interface from our Dart script to the Google Chart JavaScript API. This gives us many rich and highly customizable ways to graphically represent data in our Dart web apps and, because it is built with HTML5/SVG, it works cross-browser (even for older IE versions) and cross-platform (also for iOS and Android).
Take a look at the project googlechart
:
In the
<body>
tag of the HTML file, place the following:<div id="chart" style="width: 900px; height: 500px;"></div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="application/dart" src="googlechart.dart"></script>
The
<div>
tag with the IDchart
is where the chart will be drawn; the code to do this is contained ingooglechart.dart
.The following is the data we want to represent in a chart:
var listData = [ ['Year', 'Sales', 'Expenses'], ['2004...