Simple wrapper for the Chart.js library
A line chart is a way of plotting data points on a line.
Often, it is used to show trend data, and the comparison of two data sets.
<div data-ng-controller="LineCtrl as line">
<canvas data-sys-chart-line
data-dataset="line.data"
width="400"
height="240"></canvas>
</div>(function () {
'use strict';
function LineCtrl ( ) {
this.data = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
data: [40, 10, 60, 70, 20, 20]
},
{
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
data: [30, 70, 40, 90, 60, 70]
}
]
};
}
})();<div data-ng-controller="LineCtrl as line">
<canvas data-sys-chart-line
data-dataset="line.data"
data-options="line.options"
width="400"
height="240"></canvas>
</div>(function () {
'use strict';
function LineCtrl ( ) {
// Same as basic but also...
this.options = {
scaleShowGridLines: false,
pointDot: false,
bezierCurve: false
};
}
})();A bar chart is a way of showing data as bars.
It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
<div data-ng-controller="BarCtrl as bar">
<canvas data-sys-chart-bar
data-dataset="bar.data"
width="400"
height="240"></canvas>
</div>(function () {
'use strict';
function BarCtrl ( ) {
this.data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.4)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.4)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
}
})();<div data-ng-controller="BarCtrl as bar">
<canvas data-sys-chart-bar
data-dataset="bar.data"
data-options="bar.options"
width="400"
height="240"></canvas>
</div>(function () {
'use strict';
function BarCtrl ( ) {
// Same as basic but also...
this.options = {
scaleShowGridLines: false,
barShowStroke : false,
barDatasetSpacing : 0
};
}
})();A radar chart is a way of showing multiple data points and the variation between them.
They are often useful for comparing the points of two or more different data sets.
<div data-ng-controller="RadarCtrl as radar">
<canvas data-sys-chart-radar
data-dataset="radar.data"
width="600"
height="240"></canvas>
</div>(function () {
'use strict';
function RadarCtrl ( ) {
this.data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
}
})();<div data-ng-controller="RadarCtrl as radar">
<canvas data-sys-chart-radar
data-dataset="radar.data"
data-options="radar.options"
width="600"
height="240"></canvas>
</div>(function () {
'use strict';
function RadarCtrl ( ) {
// Same as basic but also...
this.options = {
pointDot : false,
datasetStroke : false,
pointLabelFontSize : 12
};
}
})();Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
<div data-ng-controller="PolarCtrl as polar">
<canvas data-sys-chart-polar
data-dataset="polar.data"></canvas>
</div>(function () {
'use strict';
function PolarCtrl ( ) {
this.data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
}
})();<div data-ng-controller="PolarCtrl as polar">
<canvas data-sys-chart-polar
data-dataset="polar.data"
data-options="polar.options"></canvas>
</div>(function () {
'use strict';
function PolarCtrl ( ) {
// Same as basic but also...
this.options = {
segmentShowStroke : false,
animationSteps : 20,
animationEasing : "linear",
animateScale : true
};
}
})();Pie charts are probably the most commonly used chart there is. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
<div data-ng-controller="PieCtrl as pie">
<canvas data-sys-chart-pie
data-dataset="pie.data"
width="600"
height="240"></canvas>
</div>(function () {
'use strict';
function PieCtrl ( ) {
this.data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
}
})();<div data-ng-controller="PieCtrl as pie">
<canvas data-sys-chart-pie
data-dataset="pie.data"
data-options="pie.options"
width="600"
height="240"></canvas>
</div>(function () {
'use strict';
function PieCtrl ( ) {
// Same as basic but also...
this.options = {
segmentShowStroke : false,
animationSteps : 40,
animationEasing : "linear"
};
}
})();Doughnut charts behave just like pie charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
<div data-ng-controller="DoughnutCtrl as doughnut">
<canvas data-sys-chart-doughnut
data-dataset="doughnut.data"
width="600"
height="240"></canvas>
</div>(function () {
'use strict';
function DoughnutCtrl ( ) {
this.data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
}
})();<div data-ng-controller="DoughnutCtrl as doughnut">
<canvas data-sys-chart-doughnut
data-dataset="doughnut.data"
data-options="doughnut.options"
width="600"
height="240"></canvas>
</div>(function () {
'use strict';
function DoughnutCtrl ( ) {
// Same as basic but also...
this.options = {
segmentShowStroke : false,
animationSteps : 40,
animationEasing : "linear"
};
}
})();