12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!doctype html>
- <html>
- <head>
- <title>Doughnut Chart</title>
- <script src="../Chart.js"></script>
- <style>
- body{
- padding: 0;
- margin: 0;
- }
- #canvas-holder{
- width:30%;
- }
- </style>
- </head>
- <body>
- <div id="canvas-holder">
- <canvas id="chart-area" width="500" height="500"/>
- </div>
- <script>
- var doughnutData = [
- {
- 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"
- }
- ];
- window.onload = function(){
- var ctx = document.getElementById("chart-area").getContext("2d");
- window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
- };
- </script>
- </body>
- </html>
|