text: type = ['', 'info', 'success', 'warning', 'danger'];
  
  theme = {
    initPickColor: function() {
      $('.pick-class-label').click(function() {
        var new_class = $(this).attr('new-class');
        var old_class = $('#display-buttons').attr('data-class');
        var display_div = $('#display-buttons');
        if (display_div.length) {
          var display_buttons = display_div.find('.btn');
          display_buttons.removeClass(old_class);
          display_buttons.addClass(new_class);
          display_div.attr('data-class', new_class);
        }
      });
    },
  
    checkFullPageBackgroundImage: function() {
      $page = $('.full-page');
      image_src = $page.data('image');
  
      if (image_src !== undefined) {
        image_container = '<div class="full-page-background" style="background-image: url(' + image_src + ') "/>';
        $page.append(image_container);
      }
    },
  
    initFullCalendar: function() {
      $calendar = $('#fullCalendar');
  
      today = new Date();
      y = today.getFullYear();
      m = today.getMonth();
      d = today.getDate();
  
      $calendar.fullCalendar({
        viewRender: function(view, element) {
          // We make sure that we activate the perfect scrollbar when the view isn't on Month
          if (view.name != 'month') {
            $(element).find('.fc-scroller').perfectScrollbar();
          }
        },
        header: {
          left: 'title',
          center: 'month,agendaWeek,agendaDay',
          right: 'prev,next,today'
        },
        defaultDate: today,
        selectable: true,
        selectHelper: true,
        views: {
          month: { // name of view
            titleFormat: 'MMMM YYYY'
            // other view-specific options here
          },
          week: {
            titleFormat: " MMMM D YYYY"
          },
          day: {
            titleFormat: 'D MMM, YYYY'
          }
        },
  
        select: function(start, end) {
  
          // on select we show the Sweet Alert modal with an input
          swal({
            title: 'Create an Event',
            html: '<div class="form-group">' +
              '<input class="form-control" placeholder="Event Title" id="input-field">' +
  
              '</div>',
            showCancelButton: true,
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: false
          }).then(function(result) {
  
            var eventData;
            event_title = $('#input-field').val();
  
            if (event_title) {
              eventData = {
                title: event_title,
                start: start,
                end: end
              };
              $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
            }
  
            $calendar.fullCalendar('unselect');
  
          });
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
  
  
        // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
        events: [{
            title: 'All Day Event',
            start: new Date(y, m, 1),
            className: 'event-default'
          },
          {
            title: 'Meeting',
            start: new Date(y, m, d - 1, 10, 30),
            allDay: false,
            className: 'event-green'
          },
          {
            title: 'Lunch',
            start: new Date(y, m, d + 7, 12, 0),
            end: new Date(y, m, d + 7, 14, 0),
            allDay: false,
            className: 'event-red'
          },
          {
            title: 'BD-pro Launch',
            start: new Date(y, m, d - 2, 12, 0),
            allDay: true,
            className: 'event-azure'
          },
          {
            title: 'Birthday Party',
            start: new Date(y, m, d + 1, 19, 0),
            end: new Date(y, m, d + 1, 22, 30),
            allDay: false,
            className: 'event-azure'
          },
          {
            title: 'Click for Creative Tim',
            start: new Date(y, m, 21),
            end: new Date(y, m, 22),
            url: 'http://www.creative-tim.com/',
            className: 'event-orange'
          },
          {
            title: 'Click for Google',
            start: new Date(y, m, 21),
            end: new Date(y, m, 22),
            url: 'http://www.creative-tim.com/',
            className: 'event-orange'
          }
        ]
      });
    },
  
    initDocChart: function() {
      chartColor = "#FFFFFF";
  
      // General configuration for the charts with Line gradientStroke
      gradientChartOptionsConfiguration = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.0)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 50,
              suggestedMax: 110,
              padding: 20,
              fontColor: "#9a9a9a"
            }
          }],
  
          xAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(220,53,69,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9a9a9a"
            }
          }]
        }
      };
  
      var ctx = document.getElementById("lineChartExample").getContext("2d");
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  
      gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
      gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
      gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
  
      var data = {
        labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        datasets: [{
          label: "Data",
          fill: true,
          backgroundColor: gradientStroke,
          borderColor: '#ff643f',
          borderWidth: 2,
          borderDash: [],
          borderDashOffset: 0.0,
          pointBackgroundColor: '#ff643f',
          pointBorderColor: 'rgba(255,255,255,0)',
          pointHoverBackgroundColor: '#ff643f',
          pointBorderWidth: 20,
          pointHoverRadius: 4,
          pointHoverBorderWidth: 15,
          pointRadius: 4,
          data: [60, 110, 70, 100, 75, 90, 80, 100, 70, 80, 120, 80],
        }]
      };
  
      var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: gradientChartOptionsConfiguration
      });
    },
  
    initChartPageCharts: function() {
  
      gradientChartOptionsConfigurationPurple = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(186,84,245,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }],
  
          xAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(186,84,245,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }]
        }
      };
  
  
      gradientChartOptionsConfigurationBlue = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.0)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }],
  
          xAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }]
        }
      };
  
      gradientBarChartConfiguration = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            gridLines: {
              drawBorder: false,
              color: 'rgba(253,93,147,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }],
  
          xAxes: [{
            gridLines: {
              drawBorder: false,
              color: 'rgba(253,93,147,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }]
        }
      };
  
      gradientBarChartConfigurationWithGrid = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            gridLines: {
              drawBorder: false,
              color: 'rgba(253,93,147,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }],
  
          xAxes: [{
            gridLines: {
              drawBorder: false,
              color: 'rgba(253,93,147,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }]
        }
      };
  
  
  
      var ctx = document.getElementById("chartSimpleWithGradient").getContext("2d");
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  
      gradientStroke.addColorStop(1, 'rgba(72,72,176,0.4)');
      gradientStroke.addColorStop(0.8, 'rgba(72,72,176,0.2)');
      gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
  
  
  
      var myChart = new Chart(ctx, {
        type: 'line',
        responsive: true,
        data: {
          labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
          datasets: [{
            label: "Data",
            fill: true,
            backgroundColor: gradientStroke,
            borderColor: '#ba54f5',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: '#be55ed',
            pointBorderColor: 'rgba(255,255,255,0)',
            pointHoverBackgroundColor: '#be55ed',
            //pointHoverBorderColor:'rgba(35,46,55,1)',
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: [80, 100, 70, 80, 120, 80],
          }]
        },
        options: gradientChartOptionsConfigurationPurple
      });
  
      var ctx = document.getElementById("chartWithNumbersAndGrid").getContext("2d");
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  
      gradientStroke.addColorStop(1, 'rgba(0,135,191,0.2)');
      gradientStroke.addColorStop(0.8, 'rgba(0,135,191,0.1)');
      gradientStroke.addColorStop(0, 'rgba(0,84,119,0)'); //blue colors
  
  
      var myChart = new Chart(ctx, {
        type: 'line',
        responsive: true,
        data: {
          labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
          datasets: [{
            label: "Data",
            fill: true,
            backgroundColor: gradientStroke,
            borderColor: '#2380f7',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: '#2380f7',
            pointBorderColor: 'rgba(255,255,255,0)',
            pointHoverBackgroundColor: '#2380f7',
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            pointRadius: 4,
            data: [80, 100, 70, 80, 120, 80],
          }]
        },
        options: gradientChartOptionsConfigurationBlue
      });
  
      var ctx = document.getElementById("BarChart").getContext("2d");
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  
      gradientStroke.addColorStop(1, 'rgba(253,93,147,0.8)');
      gradientStroke.addColorStop(0, 'rgba(253,93,147,0)'); //blue colors
  
  
      var myChart = new Chart(ctx, {
        type: 'bar',
        responsive: true,
        data: {
          labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
          datasets: [{
            label: "Data",
            fill: true,
            backgroundColor: gradientStroke,
            hoverBackgroundColor: gradientStroke,
            borderColor: '#ff5991',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            data: [80, 100, 70, 80, 120, 80],
          }]
        },
        options: gradientBarChartConfigurationWithGrid
      });
  
  
      var ctx = document.getElementById("MultipleBarsChart").getContext("2d");
  
  
      var myChart = new Chart(ctx, {
        type: 'bar',
        responsive: true,
        data: {
          labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
          datasets: [{
              label: "Data",
              fill: true,
              backgroundColor: '#ff8a76',
              hoverBackgroundColor: ' #ff8a76',
              borderColor: '#ff8a76',
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              data: [80, 100, 70, 80, 120, 80],
            },
            {
              label: "Data",
              fill: true,
              backgroundColor: '#2782f0',
              hoverBackgroundColor: ' #2782f0',
              borderColor: '#2782f0',
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              data: [60, 110, 90, 70, 90, 100],
            }
          ]
        },
        options: gradientBarChartConfiguration
      });
  
  
      var ctx = document.getElementById("PieChart").getContext("2d");
  
  
      var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: [1, 2],
          datasets: [{
            label: "Emails",
            pointRadius: 0,
            pointHoverRadius: 0,
            backgroundColor: ['#00c09d', '#e2e2e2'],
            borderWidth: 0,
            data: [60, 40]
          }]
        },
        options: {
          cutoutPercentage: 70,
          legend: {
  
            display: false
          },
  
          tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            bodySpacing: 4,
            xPadding: 12,
            mode: "nearest",
            intersect: 0,
            position: "nearest"
          },
  
          scales: {
            yAxes: [{
              display: 0,
              ticks: {
                display: false
              },
              gridLines: {
                drawBorder: false,
                zeroLineColor: "transparent",
                color: 'rgba(255,255,255,0.05)'
              }
  
            }],
  
            xAxes: [{
              display: 0,
              barPercentage: 1.6,
              gridLines: {
                drawBorder: false,
                color: 'rgba(255,255,255,0.1)',
                zeroLineColor: "transparent"
              },
              ticks: {
                display: false,
              }
            }]
          },
        }
      });
  
      var ctx = document.getElementById("PieChartGradient").getContext("2d");
  
  
      var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: [1, 2, 3],
          datasets: [{
            label: "Emails",
            pointRadius: 0,
            pointHoverRadius: 0,
            backgroundColor: ['#ff8779', '#2a84e9', '#e2e2e2'],
            borderWidth: 0,
            data: [60, 40, 20]
          }]
        },
        options: {
          cutoutPercentage: 70,
          legend: {
  
            display: false
          },
  
          tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            bodySpacing: 4,
            xPadding: 12,
            mode: "nearest",
            intersect: 0,
            position: "nearest"
          },
  
          scales: {
            yAxes: [{
              display: 0,
              ticks: {
                display: false
              },
              gridLines: {
                drawBorder: false,
                zeroLineColor: "transparent",
                color: 'rgba(255,255,255,0.05)'
              }
  
            }],
  
            xAxes: [{
              display: 0,
              barPercentage: 1.6,
              gridLines: {
                drawBorder: false,
                color: 'rgba(255,255,255,0.1)',
                zeroLineColor: "transparent"
              },
              ticks: {
                display: false,
              }
            }]
          },
        }
      });
    },
  
    initDashboardPageCharts: function() {
      gradientChartOptionsConfigurationWithTooltipBlue = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.0)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#2380f7"
            }
          }],
  
          xAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#2380f7"
            }
          }]
        }
      };
  
      gradientChartOptionsConfigurationWithTooltipPurple = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label : function(tooltipItem, data) {
              let label = data.datasets[tooltipItem.datasetIndex].label[0];
              let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
              let label1 = data.datasets[tooltipItem.datasetIndex].label[1];
              let value1 = data.datasets[tooltipItem.datasetIndex].data1[tooltipItem.index];
              if (value1 == '') {
                value1 = 0;
              }
              return [label + ':' + value, label1 + ':' + value1];
            }
          },
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.0)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#9a9a9a"
            }
          }],
  
          xAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(225,78,202,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9a9a9a"
            }
          }]
        }
      };
  
      gradientChartOptionsConfigurationWithTooltipOrange = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.0)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 50,
              suggestedMax: 110,
              padding: 20,
              fontColor: "#ff8a76"
            }
          }],
  
          xAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(220,53,69,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#ff8a76"
            }
          }]
        }
      };
  
      gradientChartOptionsConfigurationWithTooltipGreen = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.0)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 50,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }],
  
          xAxes: [{
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: 'rgba(0,242,195,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }]
        }
      };
  
  
      gradientBarChartConfiguration = {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
  
        tooltips: {
          backgroundColor: '#f5f5f5',
          titleFontColor: '#333',
          bodyFontColor: '#666',
          bodySpacing: 4,
          xPadding: 12,
          mode: "nearest",
          intersect: 0,
          position: "nearest"
        },
        responsive: true,
        scales: {
          yAxes: [{
  
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 120,
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }],
  
          xAxes: [{
  
            gridLines: {
              drawBorder: false,
              color: 'rgba(29,140,248,0.1)',
              zeroLineColor: "transparent",
            },
            ticks: {
              padding: 20,
              fontColor: "#9e9e9e"
            }
          }]
        }
      };
  
      var ctx = document.getElementById("chartLinePurple").getContext("2d");
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  
      gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
      gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
      gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
  
      var data = {
        labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        datasets: [{
          label: "Data",
          fill: true,
          backgroundColor: gradientStroke,
          borderColor: '#d048b6',
          borderWidth: 2,
          borderDash: [],
          borderDashOffset: 0.0,
          pointBackgroundColor: '#d048b6',
          pointBorderColor: 'rgba(255,255,255,0)',
          pointHoverBackgroundColor: '#d048b6',
          pointBorderWidth: 20,
          pointHoverRadius: 4,
          pointHoverBorderWidth: 15,
          pointRadius: 4,
          data: [80, 100, 70, 80, 120, 80],
        }]
      };
  
      var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: gradientChartOptionsConfigurationWithTooltipPurple
      });
  
  
      var ctxGreen = document.getElementById("chartLineGreen").getContext("2d");
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  
      gradientStroke.addColorStop(1, 'rgba(66,134,121,0.15)');
      gradientStroke.addColorStop(0.4, 'rgba(66,134,121,0.0)'); //green colors
      gradientStroke.addColorStop(0, 'rgba(66,134,121,0)'); //green colors
  
      var data = {
        labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV'],
        datasets: [{
          label: "My First dataset",
          fill: true,
          backgroundColor: gradientStroke,
          borderColor: '#00d6b4',
          borderWidth: 2,
          borderDash: [],
          borderDashOffset: 0.0,
          pointBackgroundColor: '#00d6b4',
          pointBorderColor: 'rgba(255,255,255,0)',
          pointHoverBackgroundColor: '#00d6b4',
          pointBorderWidth: 20,
          pointHoverRadius: 4,
          pointHoverBorderWidth: 15,
          pointRadius: 4,
          data: [90, 27, 60, 12, 80],
        }]
      };
  
      var myChart = new Chart(ctxGreen, {
        type: 'line',
        data: data,
        options: gradientChartOptionsConfigurationWithTooltipGreen
  
      });
  
  
      var months = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
  
  
      var data_k = $('#0').attr('data-k');
      var datatt_v = $('#0').attr('datatt-v');
      var dataod_v = $('#0').attr('dataod-v');
      data_k = $.parseJSON(data_k);
      datatt_v = $.parseJSON(datatt_v);
      dataod_v = $.parseJSON(dataod_v);
      var ctx = document.getElementById("chartBig1").getContext('2d');
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
      gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
      gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
      gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
      var config = {
        type: 'line',
        data: {
          labels: data_k,
          datasets: [{
            label: ['Amount','Ordder'],
            labelColor: ['ff643f','#d048b6'],
            fill: true,
            backgroundColor: gradientStroke,
            borderColor: '#ff643f',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: '#ff643f',
            pointBorderColor: 'rgba(255,255,255,0)',
            pointHoverBackgroundColor: '#ff643f',
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: datatt_v,
            data1: dataod_v,
          }]
        },
        options: gradientChartOptionsConfigurationWithTooltipPurple
      };
      var myChartData = new Chart(ctx, config);
      $("#0").click(function() {
        $('.ttl-chart').html('In 12 Months');
        var data = myChartData.config.data;
        data.datasets[0].data = datatt_v;
        data.datasets[0].data1 = dataod_v;
        data.labels = data_k;
        myChartData.update();
      });
  
      $("#1").click(function() {
        $('.ttl-chart').html('In 30 days');
        var data_k = $(this).attr('data-k');
        var datatt_v = $(this).attr('datatt-v');
        var dataod_v = $(this).attr('dataod-v');
        data_k = $.parseJSON(data_k);
        datatt_v = $.parseJSON(datatt_v);
        dataod_v = $.parseJSON(dataod_v);
  
        var data = myChartData.config.data;
        data.datasets[0].data = datatt_v;
        data.datasets[0].data1 = dataod_v;
        data.labels = data_k;
        myChartData.update();
      });
  
      $("#2").click(function() {
        $('.ttl-chart').html('In 1 week');
        var data_k = $(this).attr('data-k');
        var datatt_v = $(this).attr('datatt-v');
        var dataod_v = $(this).attr('dataod-v');
        data_k = $.parseJSON(data_k);
        datatt_v = $.parseJSON(datatt_v);
        dataod_v = $.parseJSON(dataod_v);
  
        var data = myChartData.config.data;
        data.datasets[0].data = datatt_v;
        data.datasets[0].data1 = dataod_v;
        data.labels = data_k;
        myChartData.update();
      });
  
      
  
  
      var ctx = document.getElementById("CountryChart").getContext("2d");
  
      var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  
      gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
      gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
      gradientStroke.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors
  
  
      var myChart = new Chart(ctx, {
        type: 'bar',
        responsive: true,
        legend: {
          display: false
        },
        data: {
          labels: ['USA', 'GER', 'AUS', 'UK', 'RO', 'BR'],
          datasets: [{
            label: "Countries",
            fill: true,
            backgroundColor: gradientStroke,
            hoverBackgroundColor: gradientStroke,
            borderColor: '#1f8ef1',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            data: [53, 20, 10, 80, 100, 45],
          }]
        },
        options: gradientBarChartConfiguration
      });
  
    },
  
  
    showSwal: function(type,data) {
      if (type == 'basic') {
        swal.fire({
          title: "Here's a message!",
          buttonsStyling: false,
          confirmButtonClass: "btn btn-success"
        }).catch(swal.noop);
  
      } else if (type == 'my-custom') {
        console.log(data);
        var permission = '';
        data = $.each(data, function(index, val) {
          permission += '<span class="badge badge-danger ml-1">'+val.name+'</span>';
        });
        swal.fire({
          html:permission,
          showConfirmButton: false,
        });
  
      }else if (type == 'warning-message-and-confirmation') {
        swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          type: 'warning',
          showCancelButton: true,
          confirmButtonClass: 'btn btn-success',
          cancelButtonClass: 'btn btn-danger',
          confirmButtonText: 'Yes, delete it!',
          buttonsStyling: false
        }).then(function() {
          swal.fire({
            title: 'Deleted!',
            text: 'Your file has been deleted.',
            type: 'success',
            confirmButtonClass: "btn btn-success",
            buttonsStyling: false
          });
        }).catch(swal.noop);
      } else if (type == 'warning-message-and-cancel') {
        swal.fire({
          title: 'Are you sure?',
          text: 'You will not be able to recover this imaginary file!',
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Yes, delete it!',
          cancelButtonText: 'No, keep it',
          confirmButtonClass: "btn btn-success",
          cancelButtonClass: "btn btn-danger",
          buttonsStyling: false
        }).then(function() {
          swal.fire({
            title: 'Deleted!',
            text: 'Your imaginary file has been deleted.',
            type: 'success',
            confirmButtonClass: "btn btn-success",
            buttonsStyling: false
          }).catch();
        }, function(dismiss) {
          // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
          if (dismiss === 'cancel') {
            swal.fire({
              title: 'Cancelled',
              text: 'Your imaginary file is safe :)',
              type: 'error',
              confirmButtonClass: "btn btn-info",
              buttonsStyling: false
            }).catch();
          }
        }).catch();
  
      } else if (type == 'custom-html') {
        swal.fire({
          title: 'HTML example',
          buttonsStyling: false,
          confirmButtonClass: "btn btn-success",
          html: 'You can use <b>bold text</b>, ' +
            '<a href="http://github.com">links</a> ' +
            'and other HTML tags'
        }).catch(swal.noop);
  
      } else if (type == 'auto-close') {
        swal.fire({
          title: "Auto close alert!",
          text: "I will close in 2 seconds.",
          timer: 2000,
          showConfirmButton: false
        }).catch(swal.noop);
      } else if (type == 'input-field') {
        swal.fire({
          title: 'Input something',
          html: '<div class="form-group">' +
            '<input id="input-field" type="text" class="form-control" />' +
            '</div>',
          showCancelButton: true,
          confirmButtonClass: 'btn btn-success',
          cancelButtonClass: 'btn btn-danger',
          buttonsStyling: false
        }).then(function(result) {
          swal.fire({
            type: 'success',
            html: 'You entered: <strong>' +
              $('#input-field').val() +
              '</strong>',
            confirmButtonClass: 'btn btn-success',
            buttonsStyling: false
  
          }).catch(swal.noop);
        }).catch(swal.noop);
      }
    },
  
    initNowUiWizard: function() {
      // Code for the Validator
      var $validator = $('.card-wizard form').validate({
        rules: {
          firstname: {
            required: true,
            minlength: 3
          },
          lastname: {
            required: true,
            minlength: 3
          },
          email: {
            required: true,
            minlength: 3,
          },
          number: {
            required: true,
            minlength: 3,
          }
  
        },
        highlight: function(element) {
          $(element).closest('.input-group').removeClass('has-success').addClass('has-danger');
        },
        success: function(element) {
          $(element).closest('.input-group').removeClass('has-danger').addClass('has-success');
        }
      });
  
      // Wizard Initialization
      $('.card-wizard').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'nextSelector': '.btn-next',
        'previousSelector': '.btn-previous',
  
        onNext: function(tab, navigation, index) {
          var $valid = $('.card-wizard form').valid();
          if (!$valid) {
            $validator.focusInvalid();
            return false;
          }
        },
  
        onInit: function(tab, navigation, index) {
          //check number of tabs and fill the entire row
          var $total = navigation.find('li').length;
          $width = 100 / $total;
  
          navigation.find('li').css('width', $width + '%');
  
        },
  
        onTabClick: function(tab, navigation, index) {
          var $valid = $('.card-wizard form').valid();
  
          if (!$valid) {
            return false;
          } else {
            return true;
          }
        },
  
        onTabShow: function(tab, navigation, index) {
          var $total = navigation.find('li').length;
          var $current = index + 1;
  
          var $wizard = navigation.closest('.card-wizard');
  
          // If it's the last tab then hide the last button and show the finish instead
          if ($current >= $total) {
            $($wizard).find('.btn-next').hide();
            $($wizard).find('.btn-finish').show();
          } else {
            $($wizard).find('.btn-next').show();
            $($wizard).find('.btn-finish').hide();
          }
  
          //update progress
          var move_distance = 100 / $total;
          move_distance = move_distance * (index) + move_distance / 2;
  
          $wizard.find($('.progress-bar')).css({
            width: move_distance + '%'
          });
          //e.relatedTarget // previous tab
  
          $wizard.find($('.card-wizard .nav-pills li .nav-link.active')).addClass('checked');
  
        }
      });
  
  
      // Prepare the preview for profile picture
      $("#wizard-picture").change(function() {
        readURL(this);
      });
  
      $('[data-toggle="wizard-radio"]').click(function() {
        wizard = $(this).closest('.card-wizard');
        wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
        $(this).addClass('active');
        $(wizard).find('[type="radio"]').removeAttr('checked');
        $(this).find('[type="radio"]').attr('checked', 'true');
      });
  
      $('[data-toggle="wizard-checkbox"]').click(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).find('[type="checkbox"]').removeAttr('checked');
        } else {
          $(this).addClass('active');
          $(this).find('[type="checkbox"]').attr('checked', 'true');
        }
      });
  
      $('.set-full-height').css('height', 'auto');
  
      //Function to show image before upload
  
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
  
          reader.onload = function(e) {
            $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
          }
          reader.readAsDataURL(input.files[0]);
        }
      }
  
    },
  
    initSliders: function(min,max,elm) {
      var slider2 = document.getElementById(elm);
      var input0 = document.getElementById('price_min');
      var input1 = document.getElementById('price_max');
      var inputs = [input0, input1];
      var inputsend = document.getElementById('price_min_max');
  
      noUiSlider.create(slider2, {
        start: [min, max],
        connect: true,
        range: {
          min: min,
          max: max
        },
        tooltips: true,
        format: wNumb({
            prefix: '$',
            decimals: 3,
            thousand: '.',
        })
      });
  
      slider2.noUiSlider.on('update', function (values, handle) {
          inputs[handle].value = values[handle];
      });
  
      slider2.noUiSlider.on('change', function (values, handle,unencoded) {
          var min = parseInt(unencoded[0]);
          var max = parseInt(unencoded[1]);
          inputsend.value = min+'-'+max;
      });
      // Listen to keydown events on the input field.
      inputs.forEach(function (input, handle) {
  
          input.addEventListener('change', function () {
              slider2.noUiSlider.setHandle(handle, this.value);
              var unencoded = slider2.noUiSlider.get('unencoded');
              var min = parseInt(unencoded[0]);
              var max = parseInt(unencoded[1]);
              inputsend.value = min+'-'+max;
          });
  
  
          input.addEventListener('keyup', function (e) {
  
              var values = slider2.noUiSlider.get();
              var value = Number(values[handle]);
  
              // [[handle0_down, handle0_up], [handle1_down, handle1_up]]
              var steps = slider2.noUiSlider.steps();
  
              // [down, up]
              var step = steps[handle];
  
              var position;
  
              // 13 is enter,
              // 38 is key up,
              // 40 is key down.
              switch (e.which) {
  
                  case 13:
                      slider2.noUiSlider.setHandle(handle, this.value);
                      break;
  
                  case 38:
  
                      // Get step to go increase slider value (up)
                      position = step[1];
  
                      // false = no step is set
                      if (position === false) {
                          position = 1;
                      }
  
                      // null = edge of slider
                      if (position !== null) {
                          slider2.noUiSlider.setHandle(handle, value + position);
                      }
  
                      break;
  
                  case 40:
  
                      position = step[0];
  
                      if (position === false) {
                          position = 1;
                      }
  
                      if (position !== null) {
                          slider2.noUiSlider.setHandle(handle, value - position);
                      }
  
                      break;
              }
          });
      });
    },
  
    initVectorMap: function() {
      var x = $('#worldMap').attr('data');
      x = $.parseJSON(x);
      var mapOrder = {};
      var mapName = {};
      var mapAmount = {};
      x.forEach(function (key, i) {
        mapOrder[key.name] = key.order;
        mapName[key.name] = key.name;
        mapAmount[key.name] = key.amount;
      });
      $('#worldMap').vectorMap({
        map: 'world_mill_en',
        backgroundColor: "transparent",
        zoomOnScroll: true,
        regionStyle: {
          initial: {
            fill: '#e4e4e4',
            "fill-opacity": 0.9,
            stroke: 'none',
            "stroke-width": 0,
            "stroke-opacity": 0
          }
        },
        series: {
          regions: [{
            values: mapOrder,
            scale: ["#e14eca", "#2bffc6"],
            normalizeFunction: 'polynomial'
          }]
        },
        onRegionTipShow: function(e, el, code){
          if(mapOrder[code]){
            el.html(mapName[code]+'</br> Amount: '+mapAmount[code]+'</br> Order: '+mapOrder[code]);
          }else{
            el.html(mapName[code]);
          }
        }
      });
    },
  
    initGoogleMaps: function() {
      var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
      var mapOptions = {
        zoom: 13,
        center: myLatlng,
        scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
        styles: [{
            "elementType": "geometry",
            "stylers": [{
              "color": "#1d2c4d"
            }]
          },
          {
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#8ec3b9"
            }]
          },
          {
            "elementType": "labels.text.stroke",
            "stylers": [{
              "color": "#1a3646"
            }]
          },
          {
            "featureType": "administrative.country",
            "elementType": "geometry.stroke",
            "stylers": [{
              "color": "#4b6878"
            }]
          },
          {
            "featureType": "administrative.land_parcel",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#64779e"
            }]
          },
          {
            "featureType": "administrative.province",
            "elementType": "geometry.stroke",
            "stylers": [{
              "color": "#4b6878"
            }]
          },
          {
            "featureType": "landscape.man_made",
            "elementType": "geometry.stroke",
            "stylers": [{
              "color": "#334e87"
            }]
          },
          {
            "featureType": "landscape.natural",
            "elementType": "geometry",
            "stylers": [{
              "color": "#023e58"
            }]
          },
          {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [{
              "color": "#283d6a"
            }]
          },
          {
            "featureType": "poi",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#6f9ba5"
            }]
          },
          {
            "featureType": "poi",
            "elementType": "labels.text.stroke",
            "stylers": [{
              "color": "#1d2c4d"
            }]
          },
          {
            "featureType": "poi.park",
            "elementType": "geometry.fill",
            "stylers": [{
              "color": "#023e58"
            }]
          },
          {
            "featureType": "poi.park",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#3C7680"
            }]
          },
          {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": [{
              "color": "#304a7d"
            }]
          },
          {
            "featureType": "road",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#98a5be"
            }]
          },
          {
            "featureType": "road",
            "elementType": "labels.text.stroke",
            "stylers": [{
              "color": "#1d2c4d"
            }]
          },
          {
            "featureType": "road.highway",
            "elementType": "geometry",
            "stylers": [{
              "color": "#2c6675"
            }]
          },
          {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [{
              "color": "#9d2a80"
            }]
          },
          {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [{
              "color": "#9d2a80"
            }]
          },
          {
            "featureType": "road.highway",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#b0d5ce"
            }]
          },
          {
            "featureType": "road.highway",
            "elementType": "labels.text.stroke",
            "stylers": [{
              "color": "#023e58"
            }]
          },
          {
            "featureType": "transit",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#98a5be"
            }]
          },
          {
            "featureType": "transit",
            "elementType": "labels.text.stroke",
            "stylers": [{
              "color": "#1d2c4d"
            }]
          },
          {
            "featureType": "transit.line",
            "elementType": "geometry.fill",
            "stylers": [{
              "color": "#283d6a"
            }]
          },
          {
            "featureType": "transit.station",
            "elementType": "geometry",
            "stylers": [{
              "color": "#3a4762"
            }]
          },
          {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [{
              "color": "#0e1626"
            }]
          },
          {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#4e6d70"
            }]
          }
        ]
      };
  
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
      var marker = new google.maps.Marker({
        position: myLatlng,
        title: "Hello World!"
      });
  
      // To add the marker to the map, call setMap();
      marker.setMap(map);
    },
  
    initSmallGoogleMaps: function() {
  
      // Regular Map
      var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
      var mapOptions = {
        zoom: 8,
        center: myLatlng,
        scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
      }
  
      var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);
  
      var marker = new google.maps.Marker({
        position: myLatlng,
        title: "Regular Map!"
      });
  
      marker.setMap(map);
  
  
      // Custom Skin & Settings Map
      var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
      var mapOptions = {
        zoom: 13,
        center: myLatlng,
        scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
        disableDefaultUI: true, // a way to quickly hide all controls
        zoomControl: true,
        styles: [{
          "featureType": "water",
          "stylers": [{
            "saturation": 43
          }, {
            "lightness": -11
          }, {
            "hue": "#0088ff"
          }]
        }, {
          "featureType": "road",
          "elementType": "geometry.fill",
          "stylers": [{
            "hue": "#ff0000"
          }, {
            "saturation": -100
          }, {
            "lightness": 99
          }]
        }, {
          "featureType": "road",
          "elementType": "geometry.stroke",
          "stylers": [{
            "color": "#808080"
          }, {
            "lightness": 54
          }]
        }, {
          "featureType": "landscape.man_made",
          "elementType": "geometry.fill",
          "stylers": [{
            "color": "#ece2d9"
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "geometry.fill",
          "stylers": [{
            "color": "#ccdca1"
          }]
        }, {
          "featureType": "road",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#767676"
          }]
        }, {
          "featureType": "road",
          "elementType": "labels.text.stroke",
          "stylers": [{
            "color": "#ffffff"
          }]
        }, {
          "featureType": "poi",
          "stylers": [{
            "visibility": "off"
          }]
        }, {
          "featureType": "landscape.natural",
          "elementType": "geometry.fill",
          "stylers": [{
            "visibility": "on"
          }, {
            "color": "#b8cb93"
          }]
        }, {
          "featureType": "poi.park",
          "stylers": [{
            "visibility": "on"
          }]
        }, {
          "featureType": "poi.sports_complex",
          "stylers": [{
            "visibility": "on"
          }]
        }, {
          "featureType": "poi.medical",
          "stylers": [{
            "visibility": "on"
          }]
        }, {
          "featureType": "poi.business",
          "stylers": [{
            "visibility": "simplified"
          }]
        }]
  
      }
  
      var map = new google.maps.Map(document.getElementById("customSkinMap"), mapOptions);
  
      var marker = new google.maps.Marker({
        position: myLatlng,
        title: "Custom Skin & Settings Map!"
      });
  
      marker.setMap(map);
  
  
  
      // Satellite Map
      var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
      var mapOptions = {
        zoom: 3,
        scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
  
      }
  
      var map = new google.maps.Map(document.getElementById("satelliteMap"), mapOptions);
  
      var marker = new google.maps.Marker({
        position: myLatlng,
        title: "Satellite Map!"
      });
  
      marker.setMap(map);
  
  
    },
  
    showNotification: function(from, align,message,state) {
      var types = state;
      if(typeof state === 'number'){
        types = type[state];
      }
      $.notify({
        icon: "tim-icons icon-bell-55",
        message: message
  
      }, {
        type: types,
        timer: 8000,
        placement: {
          from: from,
          align: align
        }
      });
    }
  
  };