Here are two HTML5-based canvas tags, with javascript-drawn chart libraries: RGraph and Zingchart.
1,rgraph
RGraph is a chart making library that is implemented using the HTML5 canvas tag. The chart generated by this library is interactive, displaying the appropriate information when the mouse clicks or moves out of date, dynamically loading chart or scaling special points.
Home Address: Www.rgraph.net
The currently supported chart types include:
Bar, Pie, donut, Gantt, radar, funnel, bi-polar charts
Line and scatter graphs
LED Display
Meter
Odometer
Progress bar
(1) Simple line diagram
<! DOCTYPE html>
<title>hangge.com</title>
<meta charset= "UTF-8" >
<script src= "./libraries/rgraph.common.core.js" ></script>
<script src= ". /libraries/rgraph.line.js "></script>
<body>
<canvas id= "CVS" width= "height=" >[no canvas
<script>
Window.onload = function ()
{
var line = new Rgraph.line ({
ID: ' CVS ',
Data: [84,76,79,84,86,52,53],
Options: {
Hmargin:5,
Tickmarks: ' Endcircle ',
Labels: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ']
}
}). Draw ()
};
</script>
</body>
(2) 3D bar chart
<! DOCTYPE html>
<title>hangge.com</title>
<meta charset= "UTF-8" >
<script src= "./libraries/rgraph.common.core.js" ></script>
<script src= "./libraries/rgraph.common.key.js" ></script>
<script src= ". /libraries/rgraph.bar.js "></script>
<body>
<canvas id= "CVS" width= "height=" >[no canvas
<script>
Window.onload = function ()
{
var bar = new Rgraph.bar ({
ID: ' CVS ',
Data: [[4,8,3],[5,2,1], [8,4,2],[3,6,1],[5,1,0],[2,5,1],[1,2,2]],
Options: {
Variant: ' 3d ',
variantthreedangle:0.0,
Strokestyle: ' Rgba (0,0,0,0) ',
Colors: [' Gradient (#fbb: Red) ', ' Gradient (#bfb: Green) ', ' Gradient (#bbf: Blue) '],
Guttertop:30,
GUTTERLEFT:45,
GUTTERBOTTOM:80,
Labels: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday '],
Shadowcolor: ' #ccc ',
Shadowoffsetx:3,
Backgroundgridcolor: ' #eee ',
Scalezerostart:true,
Axiscolor: ' #ddd ',
Unitspost: ' km ',
Title: ' Daily Movement statistics ',
Key: [' Hangge ', ' Kevin ', ' Lucy '],
Keyshadow:true,
Keyshadowcolor: ' #ccc ',
keyshadowoffsety:0,
Keyshadowoffsetx:3,
Keyshadowblur:15
}
}). Draw ();
};
</script>
</body>
2,zingchart
Zingchart is also an excellent chart library based on HTML5 Canvas development. Support for mouse interaction and data drilling.
Home Address: www.zingchart.com
(1) A simple line chart
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>hangge.com</title>
<script src= "Http://cdn.zingchart.com/zingchart.min.js" ></script>
<script>
var chartData = {
"Type": "Line",
"Series": [
{"Values": [20,40,25,50,15,45,33,34]},
{"Values": [5,30,21,18,59,50,28,33]},
{"Values": [30,5,18,21,33,41,29,15]}
]
};
Window.onload = function () {
Zingchart.render ({
ID: "Chartdiv",
HEIGHT:300,
WIDTH:500,
Data:chartdata
});
};
</script>
<body>
<div id= "Chartdiv" ></div>
</body>
(2) Simple column chart
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>hangge.com</title>
<script src= "Http://cdn.zingchart.com/zingchart.min.js" ></script>
<script>
var chartData = {
' type ': ' Bar ',
"Series": [
{"Values": [the "]," "," "," "Text": "Hangge"},
{"Values": [A, N, a, A,,,,], "text": "Tom"}
],
"Scale-x": {
"Values": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
},
"title": {
"Text": "Motion Statistics"
},
"Legend": {
}
};
Window.onload = function () {
Zingchart.render ({
ID: "Chartdiv",
HEIGHT:300,
WIDTH:500,
Data:chartdata
});
};
</script>
<body>
<div id= "Chartdiv" ></div>
</body>
Original: http://www.hangge.com/blog/cache/detail_1056.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
