basic bar charts with dart

dartiagram.dart

/*
My first experiment with dart. Draws a very basic bar chart. 
Needs to be included in an html-file which has a '<canvas id="dartiagram" width="500" height="300" class="center"></canvas>'.
German blogpost about the process: http://www.2-blog.net/2014/07/24/dartiagram-meine-erste-dart-library
*/

import 'dart:html';
var bars_data = [35, 20, 28, 20, 11, 45, 4, 12]; //Datenpunkte; TODO: dynamisch aus HTML holen
int gram_height = 500; //Höhe des Diagramms
int gram_width = gram_height; //Breite des Diagrams
final CanvasRenderingContext2D context =
  (querySelector("#dartiagram") as CanvasElement).context2D; //Canvas.. kommt aus dart:html und bietet diverse Methoden, um ein HTML Canvas mit Zeug zu füllen. 'as' ist ein typecast, was ich noch nicht durchschaue.

void main() { //Hauptfunktion, wo das Programm startet
  dartiagram(bars_data, gram_height, gram_width); //Aufruf der Diagrammmalfunktion mit Liste der Datenpunkte sowie Höhe und Breite
}

void dartiagram(bars_data, gram_height, gram_with) { //Berechne das Diagramm und male es
  context.clearRect(0, 0, gram_height, gram_width); //Malt das Rechteck in das das Diagramm kommt; aus sunflower.dart geklaut
  num bar_start = (gram_width-50) / bars_data.length; //Startpunkt für Säulen
  for (var i = 0; i < bars_data.length; i++) { //für jeden Datenpunkt folgendes machen
      final num bar_height = bars_data[i]/(35/100); //Berechnet Säulenhöhe TODO: höchsten Wert dynamisch ermitteln
      final num bar_width = (gram_width-50) / bars_data.length; //Berechnet Säulenbreite
      drawBar(bar_start, bar_height, bar_width, bars_data[i]); //Mal die einzelnen Säulen
      bar_start += bar_width+10; //Startpunkt für nächste Säule um Säulenbreite+10 versetzen
      } 
}

void drawBar(bar_start, bar_width, bar_height, bar_data) { //Male die einzelnen Balken
  context..beginPath() //Pfad beginnen
         ..lineWidth = 2 //Strichbreite 2
         ..fillStyle = 'black' //Ausfüllfarbe Schwarz; TODO Farbe dynamisieren
         ..strokeStyle = 'black' //Strichfarbe ebenfalls TODO dynamisieren
         ..rect(bar_start, 100, -bar_height, -bar_width) //Rechteck mit den übergebenen Werten malen
         ..fill() //ausfüllen
         ..closePath() //Pfad schließen
         ..stroke(); //malen
}