Charts implemented as aspects that meant to be attached to <svg> elements
<svg.chart.pie value="..." />
Attribute value formats:
3/8 - a "/" delimiter is assumed to mean "three out of five" and only the first two values will be drawn;3,6,8,9 - all of the values are included in the chart and the total is the sum of all valuesScript: elChart.value = [num1,num2,num3,...]; - array of values
Samples:
<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" />
<svg.chart.donut value="..." />
Attribute value formats:
3/8 - a "/" delimiter is assumed to mean "three out of five" and only the first two values will be drawn;3,6,8,9 - all of the values are included in the chart and the total is the sum of all valuesScript: elChart.value = [num1,num2,num3,...]; - array of values
Samples:
<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" />
<svg.chart.line value="..." />
Attribute value format: list of comma separated values.
Script: elChart.value = [num1,num2,num3,...]; - array of values
Samples:
<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" />
<svg.chart.bar value="..." />
Attribute value format: list of comma separated values.
Script: elChart.value = [num1,num2,num3,...]; - array of values
Samples:
<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" />
To update chart by new values simply assign new array to the value in script
Sample:
$(#updating).timer(1s, function() {
var random = rand(10);
var values = this.value;
values.shift();
values.push(random);
this.value = values;
return true;
});
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: