Better at displaying data visually than tables
Import script
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="utf-8">
<title>Chart.js demo</title>
<script src='chart.min.js'></script>
</head>
<body>
</body>
</html>
Line Chart add to html body
<canvas id="buyers" width="600" height="400"></canvas>
add foot to body element
<script>
var buyers = document.getElementById('buyers').getcontext('2d');
new Chart(buyers).Line(buyerData);
</script>
create data
var buyerData = {
labels : ["Jan", "Feb", "March"],
datasets L [
{
fillColor : "rgba(123,432,523,0.2)",
strokeColor : "#ACC26D"
pointColor : "#fff",
pointStrokeColor : "#9dB86D"
data : [203, 156,99]
}
]
}
Create Data
var pieData =[
{
value : 20,
color : "#878BB6"
},
{
value : 40,
color : "#4ACAB4"
}
];
pie options
var pieOptions = {
segmentShowStroke : false,
animateScale: true
}
Bar Chart
Create Data
var barData = {
labels: ["Jan", "Feb", "etc"]
datasets : [
{
fillColor : "#32AD4324",
strokeColor : "#",
data L [ 345, 234, etc]
},
{
fillColor : "#32AD4324",
strokeColor : "#",
data L [ 345, 234, etc]
}
]
}
Canvas Element 300pxx150px default
(0,0)
.### rectangles
draw and fill fillRect(x, y, width, height)
beginPath()
creates a new pathclosePath()
adds straight line to path, start of current sub-pathstroke()
Draws shape by stroking outlinefill()
draws solid shape by filling paths content areamoveTo(x, y)
moves the pen to specified coordinateslineTo(x, y)
draws line from current position to specified positionarc(x, y, radius, startAngle, endAngle, anticlockwise)
draws an arc centered at (x, y)
arcTo(x1, y1, x2, y2, radius)
draws an arc with given control points and radius connected to previous pointBezier and quadratic curves
quadraticCurveTo(cp1x, cp1y, x, y)
quadratic bezier curve from current pen position to end point specifiedbezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
draws curve from current pen position to end point specifiedrect(x, y, width, height)
draws rectangle, top left corner specifiedPath2d()
constructor returns newly instantiated Path2d ObjectgetLineDash()
setLineDash(segments)
lineDashOffset = value
createLinearGradient(x1, y1, x2, y2)
88createRadialGradient(x1, y1, r1, c2, y2, r2)
createPattern(image, type)
fillText(text, x, y, [, maxWidth])
strokeText(text, x, y [, maxWidth])
measureText()