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>
    <button id="addDataset">Add Dataset</button>
    <button id="removeDataset">Remove Dataset</button>
    <button id="addData">Add Data</button>
    <button id="removeData">Remove 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 randomColor = function() {
        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
    };

    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, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
            }
        });
    };

    $('#randomizeData').click(function() {
        var zero = Math.random() < 0.2 ? true : false;
        $.each(barChartData.datasets, function(i, dataset) {
            dataset.backgroundColor = randomColor();
            dataset.data = dataset.data.map(function() {
                return zero ? 0.0 : randomScalingFactor();
            });

        });
        window.myBar.update();
    });

    $('#addDataset').click(function() {
        var newDataset = {
            label: 'Dataset ' + barChartData.datasets.length,
            backgroundColor: randomColor(),
            data: []
        };

        for (var index = 0; index < barChartData.labels.length; ++index) {
            newDataset.data.push(randomScalingFactor());
        }

        window.myBar.addDataset(newDataset, 1);
    });

    $('#addData').click(function() {
        if (barChartData.datasets.length > 0) {
            barChartData.labels.push('dataset #' + barChartData.labels.length);

            for (var index = 0; index < barChartData.datasets.length; ++index) {
                window.myBar.addData(randomScalingFactor(), index);
            }
        }
    });

    $('#removeDataset').click(function() {
        window.myBar.removeDataset(0);
    });

    $('#removeData').click(function() {
        barChartData.labels.splice(-1, 1); // remove the label first

        barChartData.datasets.forEach(function(dataset, datasetIndex) {
            window.myBar.removeData(datasetIndex, -1);
        });
    });
    </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>`
Update bar sample to handle adding and removing datasets 2015-06-17 04:05:20 +02:00			`<button id="addDataset">Add Dataset</button>`
			`<button id="removeDataset">Remove Dataset</button>`
Add and remove data for bar charts 2015-06-18 04:03:24 +02:00			`<button id="addData">Add Data</button>`
			`<button id="removeData">Remove Data</button>`
Color Animation, Color Autopilot 2015-05-12 09:13:16 +02:00			`<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			`};`
Update bar sample to handle adding and removing datasets 2015-06-17 04:05:20 +02:00			`var randomColor = function() {`
			`return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';`
			`};`
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, {`
Controller function organization 2015-06-15 03:42:39 +02:00			`type: 'bar',`
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() {`
Add and remove data for bar charts 2015-06-18 04:03:24 +02:00			`var zero = Math.random() < 0.2 ? true : false;`
Playground and big changes 2015-05-20 09:03:45 +02:00			`$.each(barChartData.datasets, function(i, dataset) {`
Update bar sample to handle adding and removing datasets 2015-06-17 04:05:20 +02:00			`dataset.backgroundColor = randomColor();`
Add and remove data for bar charts 2015-06-18 04:03:24 +02:00			`dataset.data = dataset.data.map(function() {`
			`return zero ? 0.0 : 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			`});`
Update bar sample to handle adding and removing datasets 2015-06-17 04:05:20 +02:00
			`$('#addDataset').click(function() {`
			`var newDataset = {`
			`label: 'Dataset ' + barChartData.datasets.length,`
			`backgroundColor: randomColor(),`
Add and remove data for bar charts 2015-06-18 04:03:24 +02:00			`data: []`
Update bar sample to handle adding and removing datasets 2015-06-17 04:05:20 +02:00			`};`

Add and remove data for bar charts 2015-06-18 04:03:24 +02:00			`for (var index = 0; index < barChartData.labels.length; ++index) {`
			`newDataset.data.push(randomScalingFactor());`
			`}`

Update bar sample to handle adding and removing datasets 2015-06-17 04:05:20 +02:00			`window.myBar.addDataset(newDataset, 1);`
			`});`

Add and remove data for bar charts 2015-06-18 04:03:24 +02:00			`$('#addData').click(function() {`
			`if (barChartData.datasets.length > 0) {`
			`barChartData.labels.push('dataset #' + barChartData.labels.length);`

			`for (var index = 0; index < barChartData.datasets.length; ++index) {`
			`window.myBar.addData(randomScalingFactor(), index);`
			`}`
			`}`
			`});`

Update bar sample to handle adding and removing datasets 2015-06-17 04:05:20 +02:00			`$('#removeDataset').click(function() {`
			`window.myBar.removeDataset(0);`
			`});`
Add and remove data for bar charts 2015-06-18 04:03:24 +02:00
			`$('#removeData').click(function() {`
			`barChartData.labels.splice(-1, 1); // remove the label first`

			`barChartData.datasets.forEach(function(dataset, datasetIndex) {`
			`window.myBar.removeData(datasetIndex, -1);`
			`});`
			`});`
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>`