| OLD | NEW |
| (Empty) | |
| 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. |
| 4 |
| 5 // A JS Interop sample accessing the Google Charts API. The sample is based on |
| 6 // the Bubble Chart example here: |
| 7 // https://developers.google.com/chart/interactive/docs/gallery/bubblechart |
| 8 |
| 9 import 'dart:html'; |
| 10 import 'package:js/js.dart' as js; |
| 11 |
| 12 void drawVisualization() { |
| 13 var gviz = js.context.google.visualization; |
| 14 |
| 15 // Create and populate the data table. |
| 16 var listData = [ |
| 17 ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], |
| 18 ['CAN', 80.66, 1.67, 'North America', 33739900], |
| 19 ['DEU', 79.84, 1.36, 'Europe', 81902307], |
| 20 ['DNK', 78.6, 1.84, 'Europe', 5523095], |
| 21 ['EGY', 72.73, 2.78, 'Middle East', 79716203], |
| 22 ['GBR', 80.05, 2, 'Europe', 61801570], |
| 23 ['IRN', 72.49, 1.7, 'Middle East', 73137148], |
| 24 ['IRQ', 68.09, 4.77, 'Middle East', 31090763], |
| 25 ['ISR', 81.55, 2.96, 'Middle East', 7485600], |
| 26 ['RUS', 68.6, 1.54, 'Europe', 141850000], |
| 27 ['USA', 78.09, 2.05, 'North America', 307007000] |
| 28 ]; |
| 29 |
| 30 var arrayData = js.array(listData); |
| 31 |
| 32 var tableData = gviz.arrayToDataTable(arrayData); |
| 33 |
| 34 var options = js.map({ |
| 35 'title': 'Correlation between life expectancy, ' |
| 36 'fertility rate and population of some world countries (2010)', |
| 37 'hAxis': {'title': 'Life Expectancy'}, |
| 38 'vAxis': {'title': 'Fertility Rate'}, |
| 39 'bubble': {'textStyle': {'fontSize': 11}} |
| 40 }); |
| 41 |
| 42 // Create and draw the visualization. |
| 43 var chart = new js.Proxy(gviz.BubbleChart, querySelector('#visualization')); |
| 44 chart.draw(tableData, options); |
| 45 } |
| 46 |
| 47 main() { |
| 48 js.context.google.load('visualization', '1', js.map( |
| 49 { |
| 50 'packages': ['corechart'], |
| 51 'callback': drawVisualization, |
| 52 })); |
| 53 } |
| OLD | NEW |