×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

line_chart.php

0
0
 
0
Language: PHP
Posted by: Amit Sarker
Added: May 21, 2018 10:19 AM
Views: 3095
Tags: no tags
  1. <link rel="stylesheet" type="text/css" href="<?= base_url('assets/admin/vendors/Chart.js/samples/style.css') ?>">
  2. <script src="<?= base_url('assets/admin/vendors/Chart.js/samples/Chart.bundle.js') ?>" type="text/javascript"></script>
  3. <script src="<?= base_url('assets/admin/vendors/Chart.js/samples/utils.js') ?>" type="text/javascript"></script>
  4. <script src="<?= base_url('assets/admin/vendors/Chart.js/samples/charts/area/analyser.js') ?>"></script>
  5.  
  6. <div class="wrapper col-12"><canvas id="chart-0"></canvas></div>
  7. <script type="text/javascript">
  8.     var presets = window.chartColors;
  9.     var utils = Samples.utils;
  10.     var inputs = {
  11.         min: -20,
  12.         max: 100,
  13.         count: 8,
  14.         decimals: 2,
  15.         continuity: 1
  16.     };
  17.  
  18.     function generateData(config) {
  19.        return [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3];
  20.     }
  21.  
  22.     function generateLabels(config) {
  23.         return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  24.     }
  25.  
  26.     var options = {
  27.         maintainAspectRatio: false,
  28.         spanGaps: false,
  29.         elements: {
  30.             line: {
  31.                 tension: 0.000001
  32.             }
  33.         },
  34.         plugins: {
  35.             filler: {
  36.                 propagate: false
  37.             }
  38.         },
  39.         scales: {
  40.             xAxes: [{
  41.                     ticks: {
  42.                         autoSkip: false,
  43.                         maxRotation: 0
  44.                     }
  45.                 }]
  46.         }
  47.     };
  48.     $(function () {
  49.         [false, 'origin', 'start', 'end'].forEach(function (boundary, index) {
  50.  
  51.             // reset the random seed to generate the same data for all charts
  52.             utils.srand(8);
  53.  
  54.             new Chart('chart-' + index, {
  55.                 type: 'line',
  56.                 data: {
  57.                     labels: generateLabels(),
  58.                     datasets: [{
  59.                             backgroundColor: utils.transparentize(presets.blue),
  60.                             borderColor: presets.blue,
  61.                             data: generateData(),
  62.                             label: 'Dataset',
  63.                             fill: boundary
  64.                         }]
  65.                 },
  66.                 options: Chart.helpers.merge(options, {
  67.                     title: {
  68.                         text: '', //'fill: ' + boundary,
  69.                         display: true
  70.                     }
  71.                 })
  72.             });
  73.         });
  74.     });
  75. </script>

Write a comment

To post comments, please log in or register.