Micro charts

Charts implemented as aspects that meant to be attached to <svg> elements

Pie charts

<svg.chart.pie value="..." />

Attribute value formats:

  1. 3/8 - a "/" delimiter is assumed to mean "three out of five" and only the first two values will be drawn;
  2. 3,6,8,9 - all of the values are included in the chart and the total is the sum of all values

Script: elChart.value = [num1,num2,num3,...]; - array of values

Samples:

Markup:
      <svg.chart.pie value="0/8" />
      <svg.chart.pie value="1/8" />
      <svg.chart.pie value="3/8" />
      <svg.chart.pie value="5/8" />
      <svg.chart.pie value="7/8" />
      <svg.chart.pie value="8/8" />

Donut charts

<svg.chart.donut value="..." />

Attribute value formats:

  1. 3/8 - a "/" delimiter is assumed to mean "three out of five" and only the first two values will be drawn;
  2. 3,6,8,9 - all of the values are included in the chart and the total is the sum of all values

Script: elChart.value = [num1,num2,num3,...]; - array of values

Samples:

Markup:
      <svg.chart.donut value="0/8" />
      <svg.chart.donut value="1/8" />
      <svg.chart.donut value="3/8" />
      <svg.chart.donut value="5/8" />
      <svg.chart.donut value="7/8" />
      <svg.chart.donut value="8/8" />

Line charts

<svg.chart.line value="..." />

Attribute value format: list of comma separated values.

Script: elChart.value = [num1,num2,num3,...]; - array of values

Samples:

Markup:
      <svg.chart.line value="5,3,9,6,5,9,7,3,5,2" />
      <svg.chart.line value="5,3,2,-1,-3,-2,2,3,5,2" />
      <svg.chart.line value="0,-3,-6,-4,-5,-4,-7,-3,-5,-2" />

Bar charts

<svg.chart.bar value="..." />

Attribute value format: list of comma separated values.

Script: elChart.value = [num1,num2,num3,...]; - array of values

Samples:

Markup:
      <svg.chart.bar value="5,3,9,6,5,9,7,3,5,2" />
      <svg.chart.bar value="5,3,2,-1,-3,-2,2,3,5,2" />
      <svg.chart.bar value="0,-3,-6,-4,-5,-4,-7,-3,-5,-2" />

Updating charts in runtime

To update chart by new values simply assign new array to the value in script

Sample:

This code updates the chart once per second:
  $(#updating).timer(1s, function() {
    var random = rand(10);
    var values = this.value;
    values.shift();
    values.push(random);
    this.value = values;
    return true;
  });

Custom Chart styling

Charts can be styled through by aspect parameters, for exemple last chart below:

  svg.chart.custom4 { 
    aspect: MicroChart.Line( fill: gold, stroke: red, stroke-width:3px )
            url(micro-chart.tis);
    size:200dip 64dip;
  }

Samples: