| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2013, 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 import 'dart:html'; | |
| 6 import 'dart:async'; | |
| 7 import 'dart:js'; | |
| 8 | |
| 9 class Gauge { | |
| 10 var jsOptions; | |
| 11 var jsTable; | |
| 12 var jsChart; | |
| 13 | |
| 14 // Access to the value of the gauge. | |
| 15 num _value; | |
| 16 get value => _value; | |
| 17 set value(num x) { | |
| 18 _value = x; | |
| 19 draw(); | |
| 20 } | |
| 21 | |
| 22 Gauge(Element element, String title, this._value, Map options) { | |
| 23 final data = [['Label', 'Value'], [title, value]]; | |
| 24 final vis = context["google"]["visualization"]; | |
| 25 jsTable = vis.callMethod('arrayToDataTable', [new JsObject.jsify(data)]); | |
| 26 jsChart = new JsObject(vis["Gauge"], [element]); | |
| 27 jsOptions = new JsObject.jsify(options); | |
| 28 draw(); | |
| 29 } | |
| 30 | |
| 31 void draw() { | |
| 32 jsTable.callMethod('setValue', [0, 1, value]); | |
| 33 jsChart.callMethod('draw', [jsTable, jsOptions]); | |
| 34 } | |
| 35 | |
| 36 static Future load() { | |
| 37 Completer c = new Completer(); | |
| 38 context["google"].callMethod('load', | |
| 39 ['visualization', '1', new JsObject.jsify({ | |
| 40 'packages': ['gauge'], | |
| 41 'callback': new JsFunction.withThis(c.complete) | |
| 42 })]); | |
| 43 return c.future; | |
| 44 } | |
| 45 } | |
| 46 | |
| 47 // Bindings to html elements. | |
| 48 final DivElement visualization = querySelector('#gauge'); | |
| 49 final InputElement slider = querySelector("#slider"); | |
| 50 | |
| 51 void main() { | |
| 52 // Setup the gauge. | |
| 53 Gauge.load().then((_) { | |
| 54 int sliderValue() => int.parse(slider.value); | |
| 55 // Create a Guage after the library has been loaded. | |
| 56 Gauge gauge = new Gauge(visualization, "Slider", sliderValue(), | |
| 57 { 'min': 0, 'max': 280, | |
| 58 'yellowFrom': 200, 'yellowTo': 250, | |
| 59 'redFrom': 250, 'redTo': 280, | |
| 60 'minorTicks': 5}); | |
| 61 // Connect slider value to gauge. | |
| 62 slider.onChange.listen((_) => gauge.value = sliderValue()); | |
| 63 }); | |
| 64 } | |
| OLD | NEW |