public/assets/Chart.js-2-1-3/samples/line-stacked-area.html

   1 <!doctype html>
   2 <html>
   3
   4 <head>
   5   <title>Line Chart</title>
   6   <script src="../dist/Chart.bundle.js"></script>
   7   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   8   <style>
   9     canvas {
  10         -moz-user-select: none;
  11         -webkit-user-select: none;
  12         -ms-user-select: none;
  13     }
  14   </style>
  15 </head>
  16
  17 <body>
  18   <div style="width:75%;">
  19     <canvas id="canvas"></canvas>
  20   </div>
  21   <br>
  22   <br>
  23   <button id="randomizeData">Randomize Data</button>
  24   <button id="addDataset">Add Dataset</button>
  25   <button id="removeDataset">Remove Dataset</button>
  26   <button id="addData">Add Data</button>
  27   <button id="removeData">Remove Data</button>
  28   <script>
  29     var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  30
  31     var randomScalingFactor = function() {
  32       return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
  33     };
  34     var randomColorFactor = function() {
  35       return Math.round(Math.random() * 255);
  36     };
  37     var randomColor = function(opacity) {
  38       return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '1') + ')';
  39     };
  40
  41     var config = {
  42       type: 'line',
  43       data: {
  44         labels: ["January", "February", "March", "April", "May", "June", "July"],
  45         datasets: [{
  46           label: "My First dataset",
  47           data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  48         }, {
  49           label: "My Second dataset",
  50           data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  51         }, {
  52           label: "My Third dataset",
  53           data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  54         }, {
  55           label: "My Third dataset",
  56           data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  57         }]
  58       },
  59       options: {
  60         responsive: true,
  61         title:{
  62           display:true,
  63           text:"Chart.js Line Chart - Stacked Area"
  64         },
  65         tooltips: {
  66           mode: 'label',
  67         },
  68         hover: {
  69           mode: 'label'
  70         },
  71         scales: {
  72           xAxes: [{
  73             scaleLabel: {
  74               display: true,
  75               labelString: 'Month'
  76             }
  77           }],
  78           yAxes: [{
  79             stacked: true,
  80             scaleLabel: {
  81               display: true,
  82               labelString: 'Value'
  83             }
  84           }]
  85         }
  86       }
  87     };
  88
  89     $.each(config.data.datasets, function(i, dataset) {
  90       var color = randomColor(1);
  91       dataset.borderColor = color;
  92       dataset.backgroundColor = color;
  93       dataset.pointBorderColor = color;
  94       dataset.pointBackgroundColor = color;
  95       dataset.pointBorderWidth = 1;
  96     });
  97
  98     window.onload = function() {
  99       var ctx = document.getElementById("canvas").getContext("2d");
 100       window.myLine = new Chart(ctx, config);
 101     };
 102
 103     $('#randomizeData').click(function() {
 104       $.each(config.data.datasets, function(i, dataset) {
 105         dataset.data = dataset.data.map(function() {
 106           return randomScalingFactor();
 107         });
 108
 109       });
 110
 111       window.myLine.update();
 112     });
 113
 114     $('#addDataset').click(function() {
 115       var newDataset = {
 116         label: 'Dataset ' + config.data.datasets.length,
 117         borderColor: randomColor(0.4),
 118         backgroundColor: randomColor(0.5),
 119         pointBorderColor: randomColor(0.7),
 120         pointBackgroundColor: randomColor(0.5),
 121         pointBorderWidth: 1,
 122         data: [],
 123       };
 124
 125       for (var index = 0; index < config.data.labels.length; ++index) {
 126         newDataset.data.push(randomScalingFactor());
 127       }
 128
 129       config.data.datasets.push(newDataset);
 130       window.myLine.update();
 131     });
 132
 133     $('#addData').click(function() {
 134       if (config.data.datasets.length > 0) {
 135         var month = MONTHS[config.data.labels.length % MONTHS.length];
 136         config.data.labels.push(month);
 137
 138         $.each(config.data.datasets, function(i, dataset) {
 139           dataset.data.push(randomScalingFactor());
 140         });
 141
 142         window.myLine.update();
 143       }
 144     });
 145
 146     $('#removeDataset').click(function() {
 147       config.data.datasets.splice(0, 1);
 148       window.myLine.update();
 149     });
 150
 151     $('#removeData').click(function() {
 152       config.data.labels.splice(-1, 1); // remove the label first
 153
 154       config.data.datasets.forEach(function(dataset, datasetIndex) {
 155         dataset.data.pop();
 156       });
 157
 158       window.myLine.update();
 159     });
 160   </script>
 161 </body>
 162
 163 </html>