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: