Widget:WJG Sandbox chart: Difference between revisions

Jump to navigation Jump to search
Newer edit →
VisualWikitext
Created page with "<includeonly> <script src="http://www.wikidoc.org/includes/raty/jquery.timer.js"></script> <script type="text/javascript" src="http://www.wikidoc.org/includes/raty/jquery.raty..."
 
No edit summary
Line 1: Line 1:
<includeonly>
<includeonly>
<script src="http://www.wikidoc.org/includes/raty/jquery.timer.js"></script>
<script type="text/javascript" src="http://www.wikidoc.org/includes/raty/jquery.raty.js"></script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/u/1874620/Chart.js"></script>
<script type="text/javascript" src="http://wikidoc.org/extensions/WGTextHighlight/jquery.textHighlighter.js"></script>




<div id="exam">pewp</div>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <!-- import plugin script -->
        <script src='Chart.min.js'></script>
    </head>
    <body>
        <!-- line chart canvas element -->
        <canvas id="buyers" width="600" height="400"></canvas>
        <!-- pie chart canvas element -->
        <canvas id="countries" width="600" height="400"></canvas>
        <!-- bar chart canvas element -->
        <canvas id="income" width="600" height="400"></canvas>
        <script>
            // line chart data
            var buyerData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                {
                    fillColor : "rgba(172,194,132,0.4)",
                    strokeColor : "#ACC26D",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [203,156,99,251,305,247]
                }
            ]
            }
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            new Chart(buyers).Line(buyerData);
            // pie chart data
            var pieData = [
                {
                    value: 20,
                    color:"#878BB6"
                },
                {
                    value : 40,
                    color : "#4ACAB4"
                },
                {
                    value : 10,
                    color : "#FF8153"
                },
                {
                    value : 30,
                    color : "#FFEA88"
                }
            ];
            // pie chart options
            var pieOptions = {
                segmentShowStroke : false,
                animateScale : true
            }
            // get pie chart canvas
            var countries= document.getElementById("countries").getContext("2d");
            // draw pie chart
            new Chart(countries).Pie(pieData, pieOptions);
            // bar chart data
            var barData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                    {
                        fillColor : "#48A497",
                        strokeColor : "#48A4D1",
                        data : [456,479,324,569,702,600]
                    },
                    {
                        fillColor : "rgba(73,188,170,0.4)",
                        strokeColor : "rgba(72,174,209,0.4)",
                        data : [364,504,605,400,345,320]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);
        </script>
    </body>
</html>
</includeonly>
</includeonly>

Revision as of 20:39, 16 May 2014

Retrieved from "https://www.wikidoc.org/index.php?title=Widget:WJG_Sandbox_chart&oldid=971581"