vuexy 0.1.0

data/app/assets/javascripts/vuexy/scripts/charts/chart-chartjs.js

@@ -0,0 +1,1495 @@
+/*=========================================================================================
+    File Name: chart-chartjs.js
+    Description: Chartjs Examples
+    ----------------------------------------------------------------------------------------
+    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+    Author: PIXINVENT
+    Author URL: http://www.themeforest.net/user/pixinvent
+==========================================================================================*/
+
+$(window).on('load', function () {
+  'use strict';
+
+  var chartWrapper = $('.chartjs'),
+    flatPicker = $('.flat-picker'),
+    barChartEx = $('.bar-chart-ex'),
+    horizontalBarChartEx = $('.horizontal-bar-chart-ex'),
+    lineChartEx = $('.line-chart-ex'),
+    radarChartEx = $('.radar-chart-ex'),
+    polarAreaChartEx = $('.polar-area-chart-ex'),
+    bubbleChartEx = $('.bubble-chart-ex'),
+    doughnutChartEx = $('.doughnut-chart-ex'),
+    scatterChartEx = $('.scatter-chart-ex'),
+    lineAreaChartEx = $('.line-area-chart-ex');
+
+  // Color Variables
+  var primaryColorShade = '#836AF9',
+    yellowColor = '#ffe800',
+    successColorShade = '#28dac6',
+    warningColorShade = '#ffe802',
+    warningLightColor = '#FDAC34',
+    infoColorShade = '#299AFF',
+    greyColor = '#4F5D70',
+    blueColor = '#2c9aff',
+    blueLightColor = '#84D0FF',
+    greyLightColor = '#EDF1F4',
+    tooltipShadow = 'rgba(0, 0, 0, 0.25)',
+    lineChartPrimary = '#666ee8',
+    lineChartDanger = '#ff4961',
+    labelColor = '#6e6b7b',
+    grid_line_color = 'rgba(200, 200, 200, 0.2)'; // RGBA color helps in dark layout
+
+  // Detect Dark Layout
+  if ($('html').hasClass('dark-layout')) {
+    labelColor = '#b4b7bd';
+  }
+
+  // Wrap charts with div of height according to their data-height
+  if (chartWrapper.length) {
+    chartWrapper.each(function () {
+      $(this).wrap($('<div style="height:' + this.getAttribute('data-height') + 'px"></div>'));
+    });
+  }
+
+  // Init flatpicker
+  if (flatPicker.length) {
+    var date = new Date();
+    flatPicker.each(function () {
+      $(this).flatpickr({
+        mode: 'range',
+        defaultDate: ['2019-05-01', '2019-05-10']
+      });
+    });
+  }
+
+  // Bar Chart
+  // --------------------------------------------------------------------
+  if (barChartEx.length) {
+    var barChartExample = new Chart(barChartEx, {
+      type: 'bar',
+      options: {
+        elements: {
+          rectangle: {
+            borderWidth: 2,
+            borderSkipped: 'bottom'
+          }
+        },
+        responsive: true,
+        maintainAspectRatio: false,
+        responsiveAnimationDuration: 500,
+        legend: {
+          display: false
+        },
+        tooltips: {
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              gridLines: {
+                display: true,
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              },
+              scaleLabel: {
+                display: false
+              },
+              ticks: {
+                fontColor: labelColor
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: true,
+              gridLines: {
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              },
+              ticks: {
+                stepSize: 100,
+                min: 0,
+                max: 400,
+                fontColor: labelColor
+              }
+            }
+          ]
+        }
+      },
+      data: {
+        labels: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12', '16/12', '17/12'],
+        datasets: [
+          {
+            data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190],
+            barThickness: 15,
+            backgroundColor: successColorShade,
+            borderColor: 'transparent'
+          }
+        ]
+      }
+    });
+  }
+
+  //Draw rectangle Bar charts with rounded border
+  Chart.elements.Rectangle.prototype.draw = function () {
+    var ctx = this._chart.ctx;
+    var viewVar = this._view;
+    var left, right, top, bottom, signX, signY, borderSkipped, radius;
+    var borderWidth = viewVar.borderWidth;
+    var cornerRadius = 20;
+    if (!viewVar.horizontal) {
+      left = viewVar.x - viewVar.width / 2;
+      right = viewVar.x + viewVar.width / 2;
+      top = viewVar.y;
+      bottom = viewVar.base;
+      signX = 1;
+      signY = top > bottom ? 1 : -1;
+      borderSkipped = viewVar.borderSkipped || 'bottom';
+    } else {
+      left = viewVar.base;
+      right = viewVar.x;
+      top = viewVar.y - viewVar.height / 2;
+      bottom = viewVar.y + viewVar.height / 2;
+      signX = right > left ? 1 : -1;
+      signY = 1;
+      borderSkipped = viewVar.borderSkipped || 'left';
+    }
+
+    if (borderWidth) {
+      var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
+      borderWidth = borderWidth > barSize ? barSize : borderWidth;
+      var halfStroke = borderWidth / 2;
+      var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
+      var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
+      var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
+      var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
+      if (borderLeft !== borderRight) {
+        top = borderTop;
+        bottom = borderBottom;
+      }
+      if (borderTop !== borderBottom) {
+        left = borderLeft;
+        right = borderRight;
+      }
+    }
+
+    ctx.beginPath();
+    ctx.fillStyle = viewVar.backgroundColor;
+    ctx.strokeStyle = viewVar.borderColor;
+    ctx.lineWidth = borderWidth;
+    var corners = [
+      [left, bottom],
+      [left, top],
+      [right, top],
+      [right, bottom]
+    ];
+
+    var borders = ['bottom', 'left', 'top', 'right'];
+    var startCorner = borders.indexOf(borderSkipped, 0);
+    if (startCorner === -1) {
+      startCorner = 0;
+    }
+
+    function cornerAt(index) {
+      return corners[(startCorner + index) % 4];
+    }
+
+    var corner = cornerAt(0);
+    ctx.moveTo(corner[0], corner[1]);
+
+    for (var i = 1; i < 4; i++) {
+      corner = cornerAt(i);
+      var nextCornerId = i + 1;
+      if (nextCornerId == 4) {
+        nextCornerId = 0;
+      }
+
+      var nextCorner = cornerAt(nextCornerId);
+
+      var width = corners[2][0] - corners[1][0],
+        height = corners[0][1] - corners[1][1],
+        x = corners[1][0],
+        y = corners[1][1];
+
+      var radius = cornerRadius;
+
+      if (radius > height / 2) {
+        radius = height / 2;
+      }
+      if (radius > width / 2) {
+        radius = width / 2;
+      }
+
+      if (!viewVar.horizontal) {
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height);
+        ctx.lineTo(x + radius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+      } else {
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+        ctx.lineTo(x + radius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x, y);
+      }
+    }
+
+    ctx.fill();
+    if (borderWidth) {
+      ctx.stroke();
+    }
+  };
+
+  // Horizontal Bar Chart
+  // --------------------------------------------------------------------
+  if (horizontalBarChartEx.length) {
+    new Chart(horizontalBarChartEx, {
+      type: 'horizontalBar',
+      options: {
+        elements: {
+          rectangle: {
+            borderWidth: 2,
+            borderSkipped: 'right'
+          }
+        },
+        tooltips: {
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        },
+        responsive: true,
+        maintainAspectRatio: false,
+        responsiveAnimationDuration: 500,
+        legend: {
+          display: false
+        },
+        layout: {
+          padding: {
+            bottom: -30,
+            left: -25
+          }
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              gridLines: {
+                zeroLineColor: grid_line_color,
+                borderColor: 'transparent',
+                color: grid_line_color
+              },
+              scaleLabel: {
+                display: true
+              },
+              ticks: {
+                min: 0,
+                fontColor: labelColor
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: true,
+              gridLines: {
+                display: false
+              },
+              scaleLabel: {
+                display: true
+              },
+              ticks: {
+                fontColor: labelColor
+              }
+            }
+          ]
+        }
+      },
+      data: {
+        labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
+        datasets: [
+          {
+            data: [710, 350, 470, 580, 230, 460, 120],
+            barThickness: 15,
+            backgroundColor: window.colors.solid.info,
+            borderColor: 'transparent'
+          }
+        ]
+      }
+    });
+  }
+
+  // Line Chart
+  // --------------------------------------------------------------------
+  if (lineChartEx.length) {
+    var lineExample = new Chart(lineChartEx, {
+      type: 'line',
+      plugins: [
+        // to add spacing between legends and chart
+        {
+          beforeInit: function (chart) {
+            chart.legend.afterFit = function () {
+              this.height += 20;
+            };
+          }
+        }
+      ],
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        backgroundColor: false,
+        hover: {
+          mode: 'label'
+        },
+        tooltips: {
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        },
+        layout: {
+          padding: {
+            top: -15,
+            bottom: -25,
+            left: -15
+          }
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true
+              },
+              gridLines: {
+                display: true,
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              },
+              ticks: {
+                fontColor: labelColor
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true
+              },
+              ticks: {
+                stepSize: 100,
+                min: 0,
+                max: 400,
+                fontColor: labelColor
+              },
+              gridLines: {
+                display: true,
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              }
+            }
+          ]
+        },
+        legend: {
+          position: 'top',
+          align: 'start',
+          labels: {
+            usePointStyle: true,
+            padding: 25,
+            boxWidth: 9
+          }
+        }
+      },
+      data: {
+        labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
+        datasets: [
+          {
+            data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
+            label: 'Europe',
+            borderColor: lineChartDanger,
+            lineTension: 0.5,
+            pointStyle: 'circle',
+            backgroundColor: lineChartDanger,
+            fill: false,
+            pointRadius: 1,
+            pointHoverRadius: 5,
+            pointHoverBorderWidth: 5,
+            pointBorderColor: 'transparent',
+            pointHoverBorderColor: window.colors.solid.white,
+            pointHoverBackgroundColor: lineChartDanger,
+            pointShadowOffsetX: 1,
+            pointShadowOffsetY: 1,
+            pointShadowBlur: 5,
+            pointShadowColor: tooltipShadow
+          },
+          {
+            data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
+            label: 'Asia',
+            borderColor: lineChartPrimary,
+            lineTension: 0.5,
+            pointStyle: 'circle',
+            backgroundColor: lineChartPrimary,
+            fill: false,
+            pointRadius: 1,
+            pointHoverRadius: 5,
+            pointHoverBorderWidth: 5,
+            pointBorderColor: 'transparent',
+            pointHoverBorderColor: window.colors.solid.white,
+            pointHoverBackgroundColor: lineChartPrimary,
+            pointShadowOffsetX: 1,
+            pointShadowOffsetY: 1,
+            pointShadowBlur: 5,
+            pointShadowColor: tooltipShadow
+          },
+          {
+            data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
+            label: 'Africa',
+            borderColor: warningColorShade,
+            lineTension: 0.5,
+            pointStyle: 'circle',
+            backgroundColor: warningColorShade,
+            fill: false,
+            pointRadius: 1,
+            pointHoverRadius: 5,
+            pointHoverBorderWidth: 5,
+            pointBorderColor: 'transparent',
+            pointHoverBorderColor: window.colors.solid.white,
+            pointHoverBackgroundColor: warningColorShade,
+            pointShadowOffsetX: 1,
+            pointShadowOffsetY: 1,
+            pointShadowBlur: 5,
+            pointShadowColor: tooltipShadow
+          }
+        ]
+      }
+    });
+  }
+
+  // Radar Chart
+  // --------------------------------------------------------------------
+  if (radarChartEx.length) {
+    var canvas = document.getElementById('canvas');
+
+    // For radar gradient color
+    var gradientBlue = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
+    gradientBlue.addColorStop(0, 'rgba(155,136,250, 0.9)');
+    gradientBlue.addColorStop(1, 'rgba(155,136,250, 0.8)');
+
+    var gradientRed = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
+    gradientRed.addColorStop(0, 'rgba(255,161,161, 0.9)');
+    gradientRed.addColorStop(1, 'rgba(255,161,161, 0.8)');
+
+    var radarExample = new Chart(radarChartEx, {
+      type: 'radar',
+      plugins: [
+        // to add spacing between legends and chart
+        {
+          beforeInit: function (chart) {
+            chart.legend.afterFit = function () {
+              this.height += 20;
+            };
+          }
+        }
+      ],
+      data: {
+        labels: ['STA', 'STR', 'AGI', 'VIT', 'CHA', 'INT'],
+        datasets: [
+          {
+            label: 'Donté Panlin',
+            data: [25, 59, 90, 81, 60, 82],
+            fill: true,
+            backgroundColor: gradientRed,
+            borderColor: 'transparent',
+            pointBackgroundColor: 'transparent',
+            pointBorderColor: 'transparent'
+          },
+          {
+            label: 'Mireska Sunbreeze',
+            data: [40, 100, 40, 90, 40, 90],
+            fill: true,
+            backgroundColor: gradientBlue,
+            borderColor: 'transparent',
+            pointBackgroundColor: 'transparent',
+            pointBorderColor: 'transparent'
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        responsiveAnimationDuration: 500,
+        legend: {
+          position: 'top',
+          labels: {
+            padding: 25,
+            fontColor: labelColor
+          }
+        },
+        layout: {
+          padding: {
+            top: -20
+          }
+        },
+        tooltips: {
+          enabled: false,
+          custom: function (tooltip) {
+            var tooltipEl = document.getElementById('tooltip');
+            if (tooltip.body) {
+              tooltipEl.style.display = 'block';
+              if (tooltip.body[0].lines && tooltip.body[0].lines[0]) {
+                tooltipEl.innerHTML = tooltip.body[0].lines[0];
+              }
+            } else {
+              setTimeout(function () {
+                tooltipEl.style.display = 'none';
+              }, 500);
+            }
+          }
+        },
+        gridLines: {
+          display: false
+        },
+        scale: {
+          ticks: {
+            maxTicksLimit: 1,
+            display: false,
+            fontColor: labelColor
+          },
+          gridLines: {
+            color: grid_line_color
+          },
+          angleLines: { color: grid_line_color }
+        }
+      }
+    });
+  }
+
+  // Polar Area Chart
+  // --------------------------------------------------------------------
+  if (polarAreaChartEx.length) {
+    var polarExample = new Chart(polarAreaChartEx, {
+      type: 'polarArea',
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        responsiveAnimationDuration: 500,
+        legend: {
+          position: 'right',
+          labels: {
+            usePointStyle: true,
+            padding: 25,
+            boxWidth: 9,
+            fontColor: labelColor
+          }
+        },
+        layout: {
+          padding: {
+            top: -5,
+            bottom: -45
+          }
+        },
+        tooltips: {
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        },
+        scale: {
+          scaleShowLine: true,
+          scaleLineWidth: 1,
+          ticks: {
+            display: false,
+            fontColor: labelColor
+          },
+          reverse: false,
+          gridLines: {
+            display: false
+          }
+        },
+        animation: {
+          animateRotate: false
+        }
+      },
+      data: {
+        labels: ['Africa', 'Asia', 'Europe', 'America', 'Antarctica', 'Australia'],
+        datasets: [
+          {
+            label: 'Population (millions)',
+            backgroundColor: [
+              primaryColorShade,
+              warningColorShade,
+              window.colors.solid.primary,
+              infoColorShade,
+              greyColor,
+              successColorShade
+            ],
+            data: [19, 17.5, 15, 13.5, 11, 9],
+            borderWidth: 0
+          }
+        ]
+      }
+    });
+  }
+
+  // Bubble Chart
+  // --------------------------------------------------------------------
+  if (bubbleChartEx.length) {
+    var bubbleExample = new Chart(bubbleChartEx, {
+      type: 'bubble',
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              gridLines: {
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              },
+              ticks: {
+                stepSize: 10,
+                min: 0,
+                max: 140,
+                fontColor: labelColor
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: true,
+              gridLines: {
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              },
+              ticks: {
+                stepSize: 100,
+                min: 0,
+                max: 400,
+                fontColor: labelColor
+              }
+            }
+          ]
+        },
+        legend: {
+          display: false
+        },
+        tooltips: {
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        }
+      },
+      data: {
+        animation: {
+          duration: 10000
+        },
+        datasets: [
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 20,
+                y: 74,
+                r: 10
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 30,
+                y: 72,
+                r: 5
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 10,
+                y: 110,
+                r: 5
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 40,
+                y: 110,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 20,
+                y: 135,
+                r: 6
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 10,
+                y: 160,
+                r: 12
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 30,
+                y: 165,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 40,
+                y: 200,
+                r: 20
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 90,
+                y: 185,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 50,
+                y: 240,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 60,
+                y: 275,
+                r: 10
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 70,
+                y: 305,
+                r: 5
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 80,
+                y: 325,
+                r: 4
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 50,
+                y: 285,
+                r: 5
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 60,
+                y: 235,
+                r: 5
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 70,
+                y: 275,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 80,
+                y: 290,
+                r: 4
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 90,
+                y: 250,
+                r: 10
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 100,
+                y: 220,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 120,
+                y: 230,
+                r: 4
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 110,
+                y: 320,
+                r: 15
+              }
+            ]
+          },
+          {
+            backgroundColor: warningColorShade,
+            borderColor: warningColorShade,
+            data: [
+              {
+                x: 130,
+                y: 330,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 100,
+                y: 310,
+                r: 5
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 110,
+                y: 240,
+                r: 5
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 120,
+                y: 270,
+                r: 7
+              }
+            ]
+          },
+          {
+            backgroundColor: primaryColorShade,
+            borderColor: primaryColorShade,
+            data: [
+              {
+                x: 130,
+                y: 300,
+                r: 6
+              }
+            ]
+          }
+        ]
+      }
+    });
+  }
+
+  // Doughnut Chart
+  // --------------------------------------------------------------------
+  if (doughnutChartEx.length) {
+    var doughnutExample = new Chart(doughnutChartEx, {
+      type: 'doughnut',
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        responsiveAnimationDuration: 500,
+        cutoutPercentage: 60,
+        legend: { display: false },
+        tooltips: {
+          callbacks: {
+            label: function (tooltipItem, data) {
+              var label = data.datasets[0].labels[tooltipItem.index] || '',
+                value = data.datasets[0].data[tooltipItem.index];
+              var output = ' ' + label + ' : ' + value + ' %';
+              return output;
+            }
+          },
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        }
+      },
+      data: {
+        datasets: [
+          {
+            labels: ['Tablet', 'Mobile', 'Desktop'],
+            data: [10, 10, 80],
+            backgroundColor: [successColorShade, warningLightColor, window.colors.solid.primary],
+            borderWidth: 0,
+            pointStyle: 'rectRounded'
+          }
+        ]
+      }
+    });
+  }
+
+  // Scatter Chart
+  // --------------------------------------------------------------------
+  if (scatterChartEx.length) {
+    var scatterExample = new Chart(scatterChartEx, {
+      type: 'scatter',
+      plugins: [
+        // to add spacing between legends and chart
+        {
+          beforeInit: function (chart) {
+            chart.legend.afterFit = function () {
+              this.height += 20;
+            };
+          }
+        }
+      ],
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        responsiveAnimationDuration: 800,
+        title: {
+          display: false,
+          text: 'Chart.js Scatter Chart'
+        },
+        tooltips: {
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              },
+              ticks: {
+                stepSize: 10,
+                min: 0,
+                max: 140,
+                fontColor: labelColor
+              }
+            }
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                color: grid_line_color,
+                zeroLineColor: grid_line_color
+              },
+              ticks: {
+                stepSize: 100,
+                min: 0,
+                max: 400,
+                fontColor: labelColor
+              }
+            }
+          ]
+        },
+        legend: {
+          position: 'top',
+          align: 'start',
+          labels: {
+            usePointStyle: true,
+            padding: 25,
+            boxWidth: 9
+          }
+        },
+        layout: {
+          padding: {
+            top: -20
+          }
+        }
+      },
+      data: {
+        datasets: [
+          {
+            label: 'iPhone',
+            data: [
+              {
+                x: 72,
+                y: 225
+              },
+              {
+                x: 81,
+                y: 270
+              },
+              {
+                x: 90,
+                y: 230
+              },
+              {
+                x: 103,
+                y: 305
+              },
+              {
+                x: 103,
+                y: 245
+              },
+              {
+                x: 108,
+                y: 275
+              },
+              {
+                x: 110,
+                y: 290
+              },
+              {
+                x: 111,
+                y: 315
+              },
+              {
+                x: 109,
+                y: 350
+              },
+              {
+                x: 116,
+                y: 340
+              },
+              {
+                x: 113,
+                y: 260
+              },
+              {
+                x: 117,
+                y: 275
+              },
+              {
+                x: 117,
+                y: 295
+              },
+              {
+                x: 126,
+                y: 280
+              },
+              {
+                x: 127,
+                y: 340
+              },
+              {
+                x: 133,
+                y: 330
+              }
+            ],
+            backgroundColor: window.colors.solid.primary,
+            borderColor: 'transparent',
+            pointBorderWidth: 2,
+            pointHoverBorderWidth: 2,
+            pointRadius: 5
+          },
+          {
+            label: 'Samsung Note',
+            data: [
+              {
+                x: 13,
+                y: 95
+              },
+              {
+                x: 22,
+                y: 105
+              },
+              {
+                x: 17,
+                y: 115
+              },
+              {
+                x: 19,
+                y: 130
+              },
+              {
+                x: 21,
+                y: 125
+              },
+              {
+                x: 35,
+                y: 125
+              },
+              {
+                x: 13,
+                y: 155
+              },
+              {
+                x: 21,
+                y: 165
+              },
+              {
+                x: 25,
+                y: 155
+              },
+              {
+                x: 18,
+                y: 190
+              },
+              {
+                x: 26,
+                y: 180
+              },
+              {
+                x: 43,
+                y: 180
+              },
+              {
+                x: 53,
+                y: 202
+              },
+              {
+                x: 61,
+                y: 165
+              },
+              {
+                x: 67,
+                y: 225
+              }
+            ],
+            backgroundColor: yellowColor,
+            borderColor: 'transparent',
+            pointRadius: 5
+          },
+          {
+            label: 'OnePlus',
+            data: [
+              {
+                x: 70,
+                y: 195
+              },
+              {
+                x: 72,
+                y: 270
+              },
+              {
+                x: 98,
+                y: 255
+              },
+              {
+                x: 100,
+                y: 215
+              },
+              {
+                x: 87,
+                y: 240
+              },
+              {
+                x: 94,
+                y: 280
+              },
+              {
+                x: 99,
+                y: 300
+              },
+              {
+                x: 102,
+                y: 290
+              },
+              {
+                x: 110,
+                y: 275
+              },
+              {
+                x: 111,
+                y: 250
+              },
+              {
+                x: 94,
+                y: 280
+              },
+              {
+                x: 92,
+                y: 340
+              },
+              {
+                x: 100,
+                y: 335
+              },
+              {
+                x: 108,
+                y: 330
+              }
+            ],
+            backgroundColor: successColorShade,
+            borderColor: 'transparent',
+            pointBorderWidth: 2,
+            pointHoverBorderWidth: 2,
+            pointRadius: 5
+          }
+        ]
+      }
+    });
+  }
+
+  // Line AreaChart
+  // --------------------------------------------------------------------
+  if (lineAreaChartEx.length) {
+    new Chart(lineAreaChartEx, {
+      type: 'line',
+      plugins: [
+        // to add spacing between legends and chart
+        {
+          beforeInit: function (chart) {
+            chart.legend.afterFit = function () {
+              this.height += 20;
+            };
+          }
+        }
+      ],
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          position: 'top',
+          align: 'start',
+          labels: {
+            usePointStyle: true,
+            padding: 25,
+            boxWidth: 9
+          }
+        },
+        layout: {
+          padding: {
+            top: -20,
+            bottom: -20,
+            left: -20
+          }
+        },
+        tooltips: {
+          // Updated default tooltip UI
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          shadowBlur: 8,
+          shadowColor: tooltipShadow,
+          backgroundColor: window.colors.solid.white,
+          titleFontColor: window.colors.solid.black,
+          bodyFontColor: window.colors.solid.black
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              gridLines: {
+                color: 'transparent',
+                zeroLineColor: grid_line_color
+              },
+              scaleLabel: {
+                display: true
+              },
+              ticks: {
+                fontColor: labelColor
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: true,
+              gridLines: {
+                color: 'transparent',
+                zeroLineColor: grid_line_color
+              },
+              ticks: {
+                stepSize: 100,
+                min: 0,
+                max: 400,
+                fontColor: labelColor
+              },
+              scaleLabel: {
+                display: true
+              }
+            }
+          ]
+        }
+      },
+      data: {
+        labels: [
+          '7/12',
+          '8/12',
+          '9/12',
+          '10/12',
+          '11/12',
+          '12/12',
+          '13/12',
+          '14/12',
+          '15/12',
+          '16/12',
+          '17/12',
+          '18/12',
+          '19/12',
+          '20/12',
+          ''
+        ],
+        datasets: [
+          {
+            label: 'Africa',
+            data: [40, 55, 45, 75, 65, 55, 70, 60, 100, 98, 90, 120, 125, 140, 155],
+            lineTension: 0,
+            backgroundColor: blueColor,
+            pointStyle: 'circle',
+            borderColor: 'transparent',
+            pointRadius: 0.5,
+            pointHoverRadius: 5,
+            pointHoverBorderWidth: 5,
+            pointBorderColor: 'transparent',
+            pointHoverBackgroundColor: blueColor,
+            pointHoverBorderColor: window.colors.solid.white
+          },
+          {
+            label: 'Asia',
+            data: [70, 85, 75, 150, 100, 140, 110, 105, 160, 150, 125, 190, 200, 240, 275],
+            lineTension: 0,
+            backgroundColor: blueLightColor,
+            pointStyle: 'circle',
+            borderColor: 'transparent',
+            pointRadius: 0.5,
+            pointHoverRadius: 5,
+            pointHoverBorderWidth: 5,
+            pointBorderColor: 'transparent',
+            pointHoverBackgroundColor: blueLightColor,
+            pointHoverBorderColor: window.colors.solid.white
+          },
+          {
+            label: 'Europe',
+            data: [240, 195, 160, 215, 185, 215, 185, 200, 250, 210, 195, 250, 235, 300, 315],
+            lineTension: 0,
+            backgroundColor: greyLightColor,
+            pointStyle: 'circle',
+            borderColor: 'transparent',
+            pointRadius: 0.5,
+            pointHoverRadius: 5,
+            pointHoverBorderWidth: 5,
+            pointBorderColor: 'transparent',
+            pointHoverBackgroundColor: greyLightColor,
+            pointHoverBorderColor: window.colors.solid.white
+          }
+        ]
+      }
+    });
+  }
+});