text: //== Class definition
  var Dashboard = function() {
  
      //== Sparkline Chart helper function
      var _initSparklineChart = function(src, data, color, border) {
          if (src.length == 0) {
              return;
          }
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                  datasets: [{
                      label: "",
                      borderColor: color,
                      borderWidth: border,
  
                      pointHoverRadius: 4,
                      pointHoverBorderWidth: 12,
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                      fill: false,
                      data: data,
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      enabled: false,
                      intersect: false,
                      mode: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false,
                      labels: {
                          usePointStyle: false
                      }
                  },
                  responsive: true,
                  maintainAspectRatio: true,
                  hover: {
                      mode: 'index'
                  },
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
  
                  elements: {
                      point: {
                          radius: 4,
                          borderWidth: 12
                      },
                  },
  
                  layout: {
                      padding: {
                          left: 0,
                          right: 10,
                          top: 5,
                          bottom: 0
                      }
                  }
              }
          };
  
          return new Chart(src, config);
      }
  
      //== Daily Sales chart.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var dailySales = function() {
          var chartData = {
              labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9", "Label 10", "Label 11", "Label 12", "Label 13", "Label 14", "Label 15", "Label 16"],
              datasets: [{
                  //label: 'Dataset 1',
                  backgroundColor: mUtil.getColor('success'),
                  data: [
                      15, 20, 25, 30, 25, 20, 15, 20, 25, 30, 25, 20, 15, 10, 15, 20
                  ]
              }, {
                  //label: 'Dataset 2',
                  backgroundColor: '#f3f3fb',
                  data: [
                      15, 20, 25, 30, 25, 20, 15, 20, 25, 30, 25, 20, 15, 10, 15, 20
                  ]
              }]
          };
  
          var chartContainer = $('#m_chart_daily_sales');
  
          if (chartContainer.length == 0) {
              return;
          }
  
          var chart = new Chart(chartContainer, {
              type: 'bar',
              data: chartData,
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      intersect: false,
                      mode: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  barRadius: 4,
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          stacked: true
                      }],
                      yAxes: [{
                          display: false,
                          stacked: true,
                          gridLines: false
                      }]
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 0,
                          bottom: 0
                      }
                  }
              }
          });
      }
  
      //== Profit Share Chart.
      //** Based on Chartist plugin - https://gionkunz.github.io/chartist-js/index.html
      var profitShare = function() {
          if ($('#m_chart_profit_share').length == 0) {
              return;
          }
  
          var chart = new Chartist.Pie('#m_chart_profit_share', {
              series: [{
                      value: 32,
                      className: 'custom',
                      meta: {
                          color: mUtil.getColor('brand')
                      }
                  },
                  {
                      value: 32,
                      className: 'custom',
                      meta: {
                          color: mUtil.getColor('accent')
                      }
                  },
                  {
                      value: 36,
                      className: 'custom',
                      meta: {
                          color: mUtil.getColor('warning')
                      }
                  }
              ],
              labels: [1, 2, 3]
          }, {
              donut: true,
              donutWidth: 17,
              showLabel: false
          });
  
          chart.on('draw', function(data) {
              if (data.type === 'slice') {
                  // Get the total path length in order to use for dash array animation
                  var pathLength = data.element._node.getTotalLength();
  
                  // Set a dasharray that matches the path length as prerequisite to animate dashoffset
                  data.element.attr({
                      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
                  });
  
                  // Create animation definition while also assigning an ID to the animation for later sync usage
                  var animationDefinition = {
                      'stroke-dashoffset': {
                          id: 'anim' + data.index,
                          dur: 1000,
                          from: -pathLength + 'px',
                          to: '0px',
                          easing: Chartist.Svg.Easing.easeOutQuint,
                          // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
                          fill: 'freeze',
                          'stroke': data.meta.color
                      }
                  };
  
                  // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
                  if (data.index !== 0) {
                      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
                  }
  
                  // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
  
                  data.element.attr({
                      'stroke-dashoffset': -pathLength + 'px',
                      'stroke': data.meta.color
                  });
  
                  // We can't use guided mode as the animations need to rely on setting begin manually
                  // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
                  data.element.animate(animationDefinition, false);
              }
          });
  
          // For the sake of the example we update the chart every time it's created with a delay of 8 seconds
          chart.on('created', function() {
              if (window.__anim21278907124) {
                  clearTimeout(window.__anim21278907124);
                  window.__anim21278907124 = null;
              }
              window.__anim21278907124 = setTimeout(chart.update.bind(chart), 15000);
          });
      }
  
      //== Sales Stats.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var salesStats = function() {
          if ($('#m_chart_sales_stats').length == 0) {
              return;
          }
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December",
                      "January", "February", "March", "April"
                  ],
                  datasets: [{
                      label: "Sales Stats",
                      borderColor: mUtil.getColor('brand'),
                      borderWidth: 2,
                      pointBackgroundColor: mUtil.getColor('brand'),
  
                      backgroundColor: mUtil.getColor('accent'),
  
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color(mUtil.getColor('danger')).alpha(0.2).rgbString(),
                      data: [
                          10, 20, 16,
                          18, 12, 40,
                          35, 30, 33,
                          34, 45, 40,
                          60, 55, 70,
                          65, 75, 62
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      intersect: false,
                      mode: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false,
                      labels: {
                          usePointStyle: false
                      }
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  hover: {
                      mode: 'index'
                  },
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          }
                      }]
                  },
  
                  elements: {
                      point: {
                          radius: 3,
                          borderWidth: 0,
  
                          hoverRadius: 8,
                          hoverBorderWidth: 2
                      }
                  }
              }
          };
  
          var chart = new Chart($('#m_chart_sales_stats'), config);
      }
  
      //== Sales By mUtillication Stats.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var salesBymUtils = function() {
          // Init chart instances
          _initSparklineChart($('#m_chart_sales_by_apps_1_1'), [10, 20, -5, 8, -20, -2, -4, 15, 5, 8], mUtil.getColor('accent'), 2);
          _initSparklineChart($('#m_chart_sales_by_apps_1_2'), [2, 16, 0, 12, 22, 5, -10, 5, 15, 2], mUtil.getColor('danger'), 2);
          _initSparklineChart($('#m_chart_sales_by_apps_1_3'), [15, 5, -10, 5, 16, 22, 6, -6, -12, 5], mUtil.getColor('success'), 2);
          _initSparklineChart($('#m_chart_sales_by_apps_1_4'), [8, 18, -12, 12, 22, -2, -14, 16, 18, 2], mUtil.getColor('warning'), 2);
  
          _initSparklineChart($('#m_chart_sales_by_apps_2_1'), [10, 20, -5, 8, -20, -2, -4, 15, 5, 8], mUtil.getColor('danger'), 2);
          _initSparklineChart($('#m_chart_sales_by_apps_2_2'), [2, 16, 0, 12, 22, 5, -10, 5, 15, 2], mUtil.getColor('metal'), 2);
          _initSparklineChart($('#m_chart_sales_by_apps_2_3'), [15, 5, -10, 5, 16, 22, 6, -6, -12, 5], mUtil.getColor('brand'), 2);
          _initSparklineChart($('#m_chart_sales_by_apps_2_4'), [8, 18, -12, 12, 22, -2, -14, 16, 18, 2], mUtil.getColor('info'), 2);
      }
  
      //== Latest Updates.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var latestUpdates = function() {
          if ($('#m_chart_latest_updates').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_latest_updates").getContext("2d");
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                  datasets: [{
                      label: "Sales Stats",
                      backgroundColor: mUtil.getColor('danger'), // Put the gradient here as a fill color
                      borderColor: mUtil.getColor('danger'),
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('accent'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
  
                      //fill: 'start',
                      data: [
                          10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      intersect: false,
                      mode: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  hover: {
                      mode: 'index'
                  },
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.0000001
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Trends Stats.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var trendsStats = function() {
          if ($('#m_chart_trends_stats').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_trends_stats").getContext("2d");
  
          var gradient = ctx.createLinearGradient(0, 0, 0, 240);
          gradient.addColorStop(0, Chart.helpers.color('#00c5dc').alpha(0.7).rgbString());
          gradient.addColorStop(1, Chart.helpers.color('#f2feff').alpha(0).rgbString());
  
          var config = {
              type: 'line',
              data: {
                  labels: [
                      "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                      "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                      "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                      "January", "February", "March", "April"
                  ],
                  datasets: [{
                      label: "Sales Stats",
                      backgroundColor: gradient, // Put the gradient here as a fill color
                      borderColor: '#0dc8de',
  
                      pointBackgroundColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.2).rgbString(),
  
                      //fill: 'start',
                      data: [
                          20, 10, 18, 15, 26, 18, 15, 22, 16, 12,
                          12, 13, 10, 18, 14, 24, 16, 12, 19, 21,
                          16, 14, 21, 21, 13, 15, 22, 24, 21, 11,
                          14, 19, 21, 17
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      intersect: false,
                      mode: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  hover: {
                      mode: 'index'
                  },
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.19
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 5,
                          bottom: 0
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Trends Stats 2.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var trendsStats2 = function() {
          if ($('#m_chart_trends_stats_2').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_trends_stats_2").getContext("2d");
  
          var config = {
              type: 'line',
              data: {
                  labels: [
                      "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                      "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                      "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                      "January", "February", "March", "April"
                  ],
                  datasets: [{
                      label: "Sales Stats",
                      backgroundColor: '#d2f5f9', // Put the gradient here as a fill color
                      borderColor: mUtil.getColor('brand'),
  
                      pointBackgroundColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.2).rgbString(),
  
                      //fill: 'start',
                      data: [
                          20, 10, 18, 15, 32, 18, 15, 22, 8, 6,
                          12, 13, 10, 18, 14, 24, 16, 12, 19, 21,
                          16, 14, 24, 21, 13, 15, 27, 29, 21, 11,
                          14, 19, 21, 17
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      intersect: false,
                      mode: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  hover: {
                      mode: 'index'
                  },
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.19
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 5,
                          bottom: 0
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Trends Stats.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var latestTrendsMap = function() {
          if ($('#m_chart_latest_trends_map').length == 0) {
              return;
          }
  
          try {
              var map = new GMaps({
                  div: '#m_chart_latest_trends_map',
                  lat: -12.043333,
                  lng: -77.028333
              });
          } catch (e) {
              console.log(e);
          }
      }
  
      //== Revenue Change.
      //** Based on Morris plugin - http://morrisjs.github.io/morris.js/
      var revenueChange = function() {
          if ($('#m_chart_revenue_change').length == 0) {
              return;
          }
  
          Morris.Donut({
              element: 'm_chart_revenue_change',
              data: [{
                      label: "New York",
                      value: 10
                  },
                  {
                      label: "London",
                      value: 7
                  },
                  {
                      label: "Paris",
                      value: 20
                  }
              ],
              colors: [
                  mUtil.getColor('accent'),
                  mUtil.getColor('danger'),
                  mUtil.getColor('brand')
              ],
          });
      }
  
      //== Support Tickets Chart.
      //** Based on Morris plugin - http://morrisjs.github.io/morris.js/
      var supportTickets = function() {
          if ($('#m_chart_support_tickets').length == 0) {
              return;
          }
  
          Morris.Donut({
              element: 'm_chart_support_tickets',
              data: [{
                      label: "Margins",
                      value: 20
                  },
                  {
                      label: "Profit",
                      value: 70
                  },
                  {
                      label: "Lost",
                      value: 10
                  }
              ],
              labelColor: '#a7a7c2',
              colors: [
                  mUtil.getColor('accent'),
                  mUtil.getColor('brand'),
                  mUtil.getColor('danger')
              ]
              //formatter: function (x) { return x + "%"}
          });
      }
  
      //== Support Tickets Chart.
      //** Based on Morris plugin - http://morrisjs.github.io/morris.js/
      var supportTickets2 = function() {
          if ($('#m_chart_support_tickets2').length == 0) {
              return;
          }
  
          var chart = new Chartist.Pie('#m_chart_support_tickets2', {
              series: [{
                      value: 32,
                      className: 'custom',
                      meta: {
                          color: mUtil.getColor('brand')
                      }
                  },
                  {
                      value: 32,
                      className: 'custom',
                      meta: {
                          color: mUtil.getColor('accent')
                      }
                  },
                  {
                      value: 36,
                      className: 'custom',
                      meta: {
                          color: mUtil.getColor('warning')
                      }
                  }
              ],
              labels: [1, 2, 3]
          }, {
              donut: true,
              donutWidth: 17,
              showLabel: false
          });
  
          chart.on('draw', function(data) {
              if (data.type === 'slice') {
                  // Get the total path length in order to use for dash array animation
                  var pathLength = data.element._node.getTotalLength();
  
                  // Set a dasharray that matches the path length as prerequisite to animate dashoffset
                  data.element.attr({
                      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
                  });
  
                  // Create animation definition while also assigning an ID to the animation for later sync usage
                  var animationDefinition = {
                      'stroke-dashoffset': {
                          id: 'anim' + data.index,
                          dur: 1000,
                          from: -pathLength + 'px',
                          to: '0px',
                          easing: Chartist.Svg.Easing.easeOutQuint,
                          // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
                          fill: 'freeze',
                          'stroke': data.meta.color
                      }
                  };
  
                  // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
                  if (data.index !== 0) {
                      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
                  }
  
                  // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
  
                  data.element.attr({
                      'stroke-dashoffset': -pathLength + 'px',
                      'stroke': data.meta.color
                  });
  
                  // We can't use guided mode as the animations need to rely on setting begin manually
                  // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
                  data.element.animate(animationDefinition, false);
              }
          });
      }
  
      //== Activities Charts.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var activitiesChart = function() {
          if ($('#m_chart_activities').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_activities").getContext("2d");
  
          var gradient = ctx.createLinearGradient(0, 0, 0, 240);
          gradient.addColorStop(0, Chart.helpers.color('#e14c86').alpha(1).rgbString());
          gradient.addColorStop(1, Chart.helpers.color('#e14c86').alpha(0.3).rgbString());
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                  datasets: [{
                      label: "Sales Stats",
                      backgroundColor: gradient,
                      borderColor: '#e13a58',
  
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('light'),
                      pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),
  
                      //fill: 'start',
                      data: [
                          10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      mode: 'nearest',
                      intersect: false,
                      position: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.0000001
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 10,
                          bottom: 0
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Bandwidth Charts 1.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var bandwidthChart1 = function() {
          if ($('#m_chart_bandwidth1').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_bandwidth1").getContext("2d");
  
          var gradient = ctx.createLinearGradient(0, 0, 0, 240);
          gradient.addColorStop(0, Chart.helpers.color('#d1f1ec').alpha(1).rgbString());
          gradient.addColorStop(1, Chart.helpers.color('#d1f1ec').alpha(0.3).rgbString());
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                  datasets: [{
                      label: "Bandwidth Stats",
                      backgroundColor: gradient,
                      borderColor: mUtil.getColor('success'),
  
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
  
                      //fill: 'start',
                      data: [
                          10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      mode: 'nearest',
                      intersect: false,
                      position: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.0000001
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 10,
                          bottom: 0
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Bandwidth Charts 2.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var bandwidthChart2 = function() {
          if ($('#m_chart_bandwidth2').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_bandwidth2").getContext("2d");
  
          var gradient = ctx.createLinearGradient(0, 0, 0, 240);
          gradient.addColorStop(0, Chart.helpers.color('#ffefce').alpha(1).rgbString());
          gradient.addColorStop(1, Chart.helpers.color('#ffefce').alpha(0.3).rgbString());
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                  datasets: [{
                      label: "Bandwidth Stats",
                      backgroundColor: gradient,
                      borderColor: mUtil.getColor('warning'),
  
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
  
                      //fill: 'start',
                      data: [
                          10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      mode: 'nearest',
                      intersect: false,
                      position: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.0000001
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 10,
                          bottom: 0
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Bandwidth Charts 2.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var adWordsStat = function() {
          if ($('#m_chart_adwords_stats').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_adwords_stats").getContext("2d");
  
          var gradient = ctx.createLinearGradient(0, 0, 0, 240);
          gradient.addColorStop(0, Chart.helpers.color('#ffefce').alpha(1).rgbString());
          gradient.addColorStop(1, Chart.helpers.color('#ffefce').alpha(0.3).rgbString());
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                  datasets: [{
                      label: "AdWord Clicks",
                      backgroundColor: mUtil.getColor('brand'),
                      borderColor: mUtil.getColor('brand'),
  
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                      data: [
                          12, 16, 9, 18, 13, 12, 18, 12, 15, 17
                      ]
                  }, {
                      label: "AdWords Views",
  
                      backgroundColor: mUtil.getColor('accent'),
                      borderColor: mUtil.getColor('accent'),
  
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                      data: [
                          10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      mode: 'nearest',
                      intersect: false,
                      position: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          stacked: true,
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.0000001
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 10,
                          bottom: 0
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Bandwidth Charts 2.
      //** Based on Chartjs plugin - http://www.chartjs.org/
      var financeSummary = function() {
          if ($('#m_chart_finance_summary').length == 0) {
              return;
          }
  
          var ctx = document.getElementById("m_chart_finance_summary").getContext("2d");
  
          var config = {
              type: 'line',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                  datasets: [{
                      label: "AdWords Views",
  
                      backgroundColor: mUtil.getColor('accent'),
                      borderColor: mUtil.getColor('accent'),
  
                      pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                      pointHoverBackgroundColor: mUtil.getColor('danger'),
                      pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                      data: [
                          10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                      ]
                  }]
              },
              options: {
                  title: {
                      display: false,
                  },
                  tooltips: {
                      mode: 'nearest',
                      intersect: false,
                      position: 'nearest',
                      xPadding: 10,
                      yPadding: 10,
                      caretPadding: 10
                  },
                  legend: {
                      display: false
                  },
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      xAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Month'
                          }
                      }],
                      yAxes: [{
                          display: false,
                          gridLines: false,
                          scaleLabel: {
                              display: true,
                              labelString: 'Value'
                          },
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  },
                  elements: {
                      line: {
                          tension: 0.0000001
                      },
                      point: {
                          radius: 4,
                          borderWidth: 12
                      }
                  },
                  layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 10,
                          bottom: 0
                      }
                  }
              }
          };
  
          var chart = new Chart(ctx, config);
      }
  
      //== Quick Stat Charts
      var quickStats = function() {
          _initSparklineChart($('#m_chart_quick_stats_1'), [10, 14, 18, 11, 9, 12, 14, 17, 18, 14], mUtil.getColor('brand'), 3);
          _initSparklineChart($('#m_chart_quick_stats_2'), [11, 12, 18, 13, 11, 12, 15, 13, 19, 15], mUtil.getColor('danger'), 3);
          _initSparklineChart($('#m_chart_quick_stats_3'), [12, 12, 18, 11, 15, 12, 13, 16, 11, 18], mUtil.getColor('success'), 3);
          _initSparklineChart($('#m_chart_quick_stats_4'), [11, 9, 13, 18, 13, 15, 14, 13, 18, 15], mUtil.getColor('accent'), 3);
      }
  
      var daterangepickerInit = function() {
          if ($('#m_dashboard_daterangepicker').length == 0) {
              return;
          }
  
          var picker = $('#m_dashboard_daterangepicker');
          var start = moment();
          var end = moment();
  
          function cb(start, end, label) {
              var title = '';
              var range = '';
  
              if ((end - start) < 100) {
                  title = 'Today:';
                  range = start.format('MMM D');
              } else if (label == 'Yesterday') {
                  title = 'Yesterday:';
                  range = start.format('MMM D');
              } else {
                  range = start.format('MMM D') + ' - ' + end.format('MMM D');
              }
  
              picker.find('.m-subheader__daterange-date').html(range);
              picker.find('.m-subheader__daterange-title').html(title);
          }
  
          picker.daterangepicker({
              startDate: start,
              endDate: end,
              opens: 'left',
              ranges: {
                  'Today': [moment(), moment()],
                  'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                  'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                  'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                  'This Month': [moment().startOf('month'), moment().endOf('month')],
                  'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
              }
          }, cb);
  
          cb(start, end, '');
      }
  
      var datatableLatestOrders = function() {
          if ($('#m_datatable_latest_orders').length === 0) {
              return;
          }
  
          var datatable = $('.m_datatable').mDatatable({
              data: {
                  type: 'remote',
                  source: {
                      read: {
                          url: 'inc/api/datatables/demos/default.php'
                      }
                  },
                  pageSize: 20,
                  saveState: {
                      cookie: true,
                      webstorage: true
                  },
                  serverPaging: true,
                  serverFiltering: true,
                  serverSorting: true
              },
  
              layout: {
                  theme: 'default',
                  class: '',
                  scroll: true,
                  height: 380,
                  footer: false
              },
  
              sortable: true,
  
              filterable: false,
  
              pagination: true,
  
              columns: [{
                  field: "RecordID",
                  title: "#",
                  sortable: false,
                  width: 40,
                  selector: {
                      class: 'm-checkbox--solid m-checkbox--brand'
                  },
                  textAlign: 'center'
              }, {
                  field: "OrderID",
                  title: "Order ID",
                  sortable: 'asc',
                  filterable: false,
                  width: 150,
                  template: '{{OrderID}} - {{ShipCountry}}'
              }, {
                  field: "ShipName",
                  title: "Ship Name",
                  width: 150,
                  responsive: {
                      visible: 'lg'
                  }
              }, {
                  field: "ShipDate",
                  title: "Ship Date"
              }, {
                  field: "Status",
                  title: "Status",
                  width: 100,
                  // callback function support for column rendering
                  template: function(row) {
                      var status = {
                          1: {
                              'title': 'Pending',
                              'class': 'm-badge--brand'
                          },
                          2: {
                              'title': 'Delivered',
                              'class': ' m-badge--metal'
                          },
                          3: {
                              'title': 'Canceled',
                              'class': ' m-badge--primary'
                          },
                          4: {
                              'title': 'Success',
                              'class': ' m-badge--success'
                          },
                          5: {
                              'title': 'Info',
                              'class': ' m-badge--info'
                          },
                          6: {
                              'title': 'Danger',
                              'class': ' m-badge--danger'
                          },
                          7: {
                              'title': 'Warning',
                              'class': ' m-badge--warning'
                          }
                      };
                      return '<span class="m-badge ' + status[row.Status].class + ' m-badge--wide">' + status[row.Status].title + '</span>';
                  }
              }, {
                  field: "Type",
                  title: "Type",
                  width: 100,
                  // callback function support for column rendering
                  template: function(row) {
                      var status = {
                          1: {
                              'title': 'Online',
                              'state': 'danger'
                          },
                          2: {
                              'title': 'Retail',
                              'state': 'primary'
                          },
                          3: {
                              'title': 'Direct',
                              'state': 'accent'
                          }
                      };
                      return '<span class="m-badge m-badge--' + status[row.Type].state + ' m-badge--dot"></span>&nbsp;<span class="m--font-bold m--font-' + status[row.Type].state + '">' + status[row.Type].title + '</span>';
                  }
              }, {
                  field: "Actions",
                  width: 110,
                  title: "Actions",
                  sortable: false,
                  overflow: 'visible',
                  template: function(row) {
                      var dropup = (row.getDatatable().getPageSize() - row.getIndex()) <= 4 ? 'dropup' : '';
  
                      return '\
                          <div class="dropdown ' + dropup + '">\
                              <a href="#" class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown">\
                                  <i class="la la-ellipsis-h"></i>\
                              </a>\
                              <div class="dropdown-menu dropdown-menu-right">\
                                  <a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>\
                                  <a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\
                                  <a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\
                              </div>\
                          </div>\
                          <a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Edit details">\
                              <i class="la la-edit"></i>\
                          </a>\
                          <a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Delete">\
                              <i class="la la-trash"></i>\
                          </a>\
                      ';
                  }
              }]
          });
      }
  
      var calendarInit = function() {
          if ($('#m_calendar').length === 0) {
              return;
          }
          
          var todayDate = moment().startOf('day');
          var YM = todayDate.format('YYYY-MM');
          var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
          var TODAY = todayDate.format('YYYY-MM-DD');
          var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
  
          $('#m_calendar').fullCalendar({
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay,listWeek'
              },
              editable: true,
              eventLimit: true, // allow "more" link when too many events
              navLinks: true,
              defaultDate: moment('2017-09-15'),
              events: [
                  {
                      title: 'Meeting',
                      start: moment('2017-08-28'),
                      description: 'Lorem ipsum dolor sit incid idunt ut',
                      className: "m-fc-event--light m-fc-event--solid-warning"
                  },
                  {
                      title: 'Conference',                    
                      description: 'Lorem ipsum dolor incid idunt ut labore',
                      start: moment('2017-08-29T13:30:00'),
                      end: moment('2017-08-29T17:30:00'),
                      className: "m-fc-event--accent"
                  },
                  {
                      title: 'Dinner',
                      start: moment('2017-08-30'),
                      description: 'Lorem ipsum dolor sit tempor incid',
                      className: "m-fc-event--light  m-fc-event--solid-danger"
                  },
                  {
                      title: 'All Day Event',
                      start: moment('2017-09-01'),
                      description: 'Lorem ipsum dolor sit incid idunt ut',
                      className: "m-fc-event--danger m-fc-event--solid-focus"
                  },
                  {
                      title: 'Reporting',                    
                      description: 'Lorem ipsum dolor incid idunt ut labore',
                      start: moment('2017-09-03T13:30:00'),
                      end: moment('2017-09-04T17:30:00'),
                      className: "m-fc-event--accent"
                  },
                  {
                      title: 'Company Trip',
                      start: moment('2017-09-05'),
                      end: moment('2017-09-07'),
                      description: 'Lorem ipsum dolor sit tempor incid',
                      className: "m-fc-event--primary"
                  },
                  {
                      title: 'ICT Expo 2017 - Product Release',
                      start: moment('2017-09-09'),
                      description: 'Lorem ipsum dolor sit tempor inci',
                      className: "m-fc-event--light m-fc-event--solid-primary"
                  },
                  {
                      title: 'Dinner',
                      start: moment('2017-09-12'),
                      description: 'Lorem ipsum dolor sit amet, conse ctetur'
                  },
                  {
                      id: 999,
                      title: 'Repeating Event',
                      start: moment('2017-09-15T16:00:00'),
                      description: 'Lorem ipsum dolor sit ncididunt ut labore',
                      className: "m-fc-event--danger"
                  },
                  {
                      id: 1000,
                      title: 'Repeating Event',
                      description: 'Lorem ipsum dolor sit amet, labore',
                      start: moment('2017-09-18T19:00:00'),
                  },
                  {
                      title: 'Conference',
                      start: moment('2017-09-20T13:00:00'),
                      end: moment('2017-09-21T19:00:00'),
                      description: 'Lorem ipsum dolor eius mod tempor labore',
                      className: "m-fc-event--accent"
                  },
                  {
                      title: 'Meeting',
                      start: moment('2017-09-11'),
                      description: 'Lorem ipsum dolor eiu idunt ut labore'
                  },
                  {
                      title: 'Lunch',
                      start: moment('2017-09-18'),
                      className: "m-fc-event--info m-fc-event--solid-accent",
                      description: 'Lorem ipsum dolor sit amet, ut labore'
                  },
                  {
                      title: 'Meeting',
                      start: moment('2017-09-24'),
                      className: "m-fc-event--warning",
                      description: 'Lorem ipsum conse ctetur adipi scing'
                  },
                  {
                      title: 'Happy Hour',
                      start: moment('2017-09-24'),
                      className: "m-fc-event--light m-fc-event--solid-focus",
                      description: 'Lorem ipsum dolor sit amet, conse ctetur'
                  },
                  {
                      title: 'Dinner',
                      start: moment('2017-09-24'),
                      className: "m-fc-event--solid-focus m-fc-event--light",
                      description: 'Lorem ipsum dolor sit ctetur adipi scing'
                  },
                  {
                      title: 'Birthday Party',
                      start: moment('2017-09-24'),
                      className: "m-fc-event--primary",
                      description: 'Lorem ipsum dolor sit amet, scing'
                  },
                  {
                      title: 'Company Event',
                      start: moment('2017-09-24'),
                      className: "m-fc-event--danger",
                      description: 'Lorem ipsum dolor sit amet, scing'
                  },
                  {
                      title: 'Click for Google',
                      url: 'http://google.com/',
                      start: moment('2017-09-26'),
                      className: "m-fc-event--solid-info m-fc-event--light",
                      description: 'Lorem ipsum dolor sit amet, labore'
                  }
              ],
  
              eventRender: function(event, element) {
                  if (element.hasClass('fc-day-grid-event')) {
                      element.data('content', event.description);
                      element.data('placement', 'top');
                      mApp.initPopover(element);
                  } else if (element.hasClass('fc-time-grid-event')) {
                      element.find('.fc-title').append('<div class="fc-description">' + event.description + '</div>');
                  } else if (element.find('.fc-list-item-title').lenght !== 0) {
                      element.find('.fc-list-item-title').append('<div class="fc-description">' + event.description + '</div>');
                  }
              }
          });
      }
  
      return {
          //== Init demos
          init: function() {
              // init charts
              dailySales();
              profitShare();
              salesStats();
              salesBymUtils();
              latestUpdates();
              trendsStats();
              trendsStats2();
              latestTrendsMap();
              revenueChange();
              supportTickets();
              supportTickets2();
              activitiesChart();
              bandwidthChart1();
              bandwidthChart2();
              adWordsStat();
              financeSummary();
              quickStats();
  
              // init daterangepicker
              daterangepickerInit();
  
              // datatables
              datatableLatestOrders();
  
              // calendar
              calendarInit();
          }
      };
  }();
  
  //== Class initialization on page load
  jQuery(document).ready(function() {
      Dashboard.init();
  });