Chart.js/samples/bar.html

<!doctype html>
<html>

<head>
    <title>Bar Chart</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../Chart.js"></script>
</head>

<body>
    <div style="width: 50%">
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>
    <button id="randomizeData">Randomize Data</button>
    <script>
    var randomScalingFactor = function() {
        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    };
    var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
    };

    var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: "rgba(220,220,220,0.5)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }, {
            label: 'Dataset 2',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }, {
            label: 'Dataset 3',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }]

    };
    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            data: barChartData,
            options: {
                responsive: true,
            }
        });
    };

    $('#randomizeData').click(function() {
        $.each(barChartData.datasets, function(i, dataset) {
            dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
            dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];

        });
        window.myBar.update();
    });
    </script>
</body>

</html>
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`<!doctype html>`
			`<html>`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`<head>`
			`<title>Bar Chart</title>`
Playground and big changes 2015-05-20 09:03:45 +02:00			`<script src="../node_modules/jquery/dist/jquery.min.js"></script>`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`<script src="../Chart.js"></script>`
			`</head>`

			`<body>`
Bar chart converted to new scale system. Added bar chart multi axis sample. 2015-05-24 00:26:34 +02:00			`<div style="width: 50%">`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`<canvas id="canvas" height="450" width="600"></canvas>`
			`</div>`
			`<button id="randomizeData">Randomize Data</button>`
			`<script>`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`var randomScalingFactor = function() {`
Playground and big changes 2015-05-20 09:03:45 +02:00			`return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`};`
			`var randomColorFactor = function() {`
Playground and big changes 2015-05-20 09:03:45 +02:00			`return Math.round(Math.random() * 255);`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`};`

			`var barChartData = {`
			`labels: ["January", "February", "March", "April", "May", "June", "July"],`
			`datasets: [{`
Rough Tooltips for 'single' hoverMode 2015-05-12 20:55:48 +02:00			`label: 'Dataset 1',`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`backgroundColor: "rgba(220,220,220,0.5)",`
			`data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]`
			`}, {`
Rough Tooltips for 'single' hoverMode 2015-05-12 20:55:48 +02:00			`label: 'Dataset 2',`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`backgroundColor: "rgba(151,187,205,0.5)",`
			`data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]`
Playground and big changes 2015-05-20 09:03:45 +02:00			`}, {`
			`label: 'Dataset 3',`
			`backgroundColor: "rgba(151,187,205,0.5)",`
			`data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`}]`

Playground and big changes 2015-05-20 09:03:45 +02:00			`};`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`window.onload = function() {`
			`var ctx = document.getElementById("canvas").getContext("2d");`
No hardcoded chart type methods 2015-06-15 03:15:10 +02:00			`window.myBar = new Chart(ctx, {`
Bar Chart Stacked nestedConfig 2015-06-03 00:48:39 +02:00			`data: barChartData,`
Merge remote-tracking branch 'upstream/v2.0-dev' into feature/v2.0dev-xy Conflicts: src/Chart.Core.js Fixed the sample files & chart type initialize methods so that this.data does not get set to undefined. 2015-05-20 15:03:22 +02:00			`options: {`
			`responsive: true,`
			`}`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`});`
Playground and big changes 2015-05-20 09:03:45 +02:00			`};`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00
			`$('#randomizeData').click(function() {`
Playground and big changes 2015-05-20 09:03:45 +02:00			`$.each(barChartData.datasets, function(i, dataset) {`
			`dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';`
			`dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00
Playground and big changes 2015-05-20 09:03:45 +02:00			`});`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`window.myBar.update();`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00			`});`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`</script>`
			`</body>`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`</html>`