text: $(function () {
  
      'use strict';
  
      /* ChartJS
       * -------
       * Here we will create a few charts using ChartJS
       */
  
      // -----------------------
      // - MONTHLY SALES CHART -
      // -----------------------
  
      // Get context with jQuery - using jQuery's .get() method.
      var salesChartCanvas = $('#salesChart').get(0).getContext('2d');
      // This will get the first returned node in the jQuery collection.
      var salesChart = new Chart(salesChartCanvas);
  
      var salesChartData = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December'],
          datasets: [
              {
                  label: 'Feature Phone',
                  fillColor: 'rgba(14,188,48,0.9)',
                  strokeColor: 'rgba(15,188,46,0.8)',
                  pointColor: '#0eba35',
                  pointStrokeColor: 'rgb(12,188,43)',
                  pointHighlightFill: '#ff232f',
                  pointHighlightStroke: 'rgb(16,188,51)',
                  data                : [28, 48, 40, 19, 86, 27, 90,28, 48, 40, 19, 86]
              },
              {
                  label: 'Smart Phone',
                  fillColor: 'rgba(20,128,220,0.5)',
                  strokeColor: 'rgba(35,255,13,0.4)',
                  pointColor: 'rgba(210, 214, 222,1)',
                  pointStrokeColor: '#0b1cff',
                  pointHighlightFill: '#fff',
                  pointHighlightStroke: 'rgb(20,128,220)',
                  data                : [65, 59, 80, 81, 56, 55, 40,65, 59, 80, 81, 56]
              }
          ]
      };
  
  
  
      var salesChartOptions = {
          // Boolean - If we should show the scale at all
          showScale: true,
          // Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: false,
          // String - Colour of the grid lines
          scaleGridLineColor: 'rgba(0,0,0,.05)',
          // Number - Width of the grid lines
          scaleGridLineWidth: 1,
          // Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          // Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          // Boolean - Whether the line is curved between points
          bezierCurve: true,
          // Number - Tension of the bezier curve between points
          bezierCurveTension: 0.3,
          // Boolean - Whether to show a dot for each point
          pointDot: false,
          // Number - Radius of each point dot in pixels
          pointDotRadius: 4,
          // Number - Pixel width of point dot stroke
          pointDotStrokeWidth: 1,
          // Number - amount extra to add to the radius to cater for hit detection outside the drawn point
          pointHitDetectionRadius: 20,
          // Boolean - Whether to show a stroke for datasets
          datasetStroke: true,
          // Number - Pixel width of dataset stroke
          datasetStrokeWidth: 2,
          // Boolean - Whether to fill the dataset with a color
          datasetFill: true,
          // String - A legend template
          legendTemplate: '<ul class=\'<%=name.toLowerCase()%>-legend\'><% for (var i=0; i<datasets.length; i++){%><li><span style=\'background-color:<%=datasets[i].lineColor%>\'></span><%=datasets[i].label%></li><%}%></ul>',
          // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
          maintainAspectRatio: true,
          // Boolean - whether to make the chart responsive to window resizing
          responsive: true
      };
  
      // Create the line chart
      salesChart.Line(salesChartData, salesChartOptions);
  
      $('.sparkbar').each(function () {
          var $this = $(this);
          $this.sparkline('html', {
              type: 'bar',
              height: $this.data('height') ? $this.data('height') : '30',
              barColor: $this.data('color')
          });
      });
  
      // -----------------
      // - SPARKLINE PIE -
      // -----------------
      $('.sparkpie').each(function () {
          var $this = $(this);
          $this.sparkline('html', {
              type: 'pie',
              height: $this.data('height') ? $this.data('height') : '90',
              sliceColors: $this.data('color')
          });
      });
  
      // ------------------
      // - SPARKLINE LINE -
      // ------------------
      $('.sparkline').each(function () {
          var $this = $(this);
          $this.sparkline('html', {
              type: 'line',
              height: $this.data('height') ? $this.data('height') : '90',
              width: '100%',
              lineColor: $this.data('linecolor'),
              fillColor: $this.data('fillcolor'),
              spotColor: $this.data('spotcolor')
          });
      });
  });
  