<!-- google Chart JS-->
<script src="../assets/js/chart/google/google-chart-loader.js"></script>
<script src="../assets/js/chart/google/google-chart.js"></script>

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.load('current', {'packages':['line']});
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
  if ($("#bar-chart2").length > 0) {
    var a = google.visualization.arrayToDataTable([
      ["Element", "Density", {
        role: "style"
    }],
    ["Copper", 10, "#a927f9"],
    ["Silver", 12, "#f8d62b"],
    ["Gold", 14, "#f73164"],
    ["Platinum", 16, "color: #7366ff"]
]),
d = new google.visualization.DataView(a);
d.setColumns([0, 1, {
  calc: "stringify",
  sourceColumn: 1,
  type: "string",
  role: "annotation"
}, 2]);
var b = {
  title: "Density of Precious Metals, in g/cm^3",
  width:'100%',
  height: 150,
  bar: {
    groupWidth: "95%"
  },
  legend: {
    position: "none"
  }
},
c = new google.visualization.BarChart(document.getElementById("bar-chart2"));
c.draw(d, b)
}
}

<!--Sparkline Chart JS-->
<script src="../assets/js/chart/sparkline/sparkline.js"></script>
<script src="../assets/js/chart/sparkline/sparkline-script.js"></script>

(function($) {
  "use strict";
  var sparkline_chart = {
    init: function() {
      setTimeout(function(){
      $("#simple-line-chart-sparkline").sparkline([5, 10, 20, 14, 17, 21, 20, 10, 4, 13,0, 10, 30, 40, 10, 15, 20], {
          type: 'line',
          width: '100%',
          height: '150',
          tooltipClassname: 'chart-sparkline',
          lineColor: '#7366ff',
          fillColor: 'transparent',
          highlightLineColor: '#7366ff',
          highlightSpotColor: '#7366ff',
          targetColor: '#7366ff',
          performanceColor: '#7366ff',
          boxFillColor: '#7366ff',
          medianColor: '#7366ff',
          minSpotColor: '#7366ff'
      });
    })
  }
};
  sparkline_chart.init()
})(jQuery);

<!-- flot Chart JS-->
<script src="../assets/js/chart/flot-chart/excanvas.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.time.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.symbol.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.categories.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.stack.js"></script>
<script src="../assets/js/chart/flot-chart/flot-script.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.pie.js"></script>
<script src="../assets/js/chart/flot-chart/jquery.flot.symbol.js"></script>

<!--Peity Chart JS-->
<script src="../assets/js/chart/peity-chart/peity.jquery.js"></script>
<script src="../assets/js/chart/peity-chart/peity-custom.js"></script>

$(".bar-colours-3").peity("bar", {
 fill: function(_, i, all) {
   var g = parseInt((i / all.length) * 145)
   return "rgb(145, " + g + ", 252)"
 },
 width: '100',
 height: '82'
})

<!-- Morris Chart JS-->
<script src="../assets/js/chart/morris-chart/raphael.js"></script>
<script src="../assets/js/chart/morris-chart/morris.js"></script>
<script src="../assets/js/chart/morris-chart/prettify.min.js"></script>
<script src="../assets/js/chart/morris-chart/morris-script.js"></script>

(function($) {
 "use strict";
 var morris_chart = {
     init: function() {
         $(function() {
             for (var c = [], d = 0; d <= 360; d += 10) c.push({
                 x: d,
                 y: 1.5 + 1.5 * Math.sin(Math.PI * d / 180).toFixed(4)
             });
             window.m = Morris.Line({
                 element: 'decimal-morris-chart',
                 data: c,
                 xkey: "x",
                 ykeys: ["y"],
                 labels: ["sin(x)"],
                 parseTime: !1,
                 lineColors: ['#7366ff'],
                 hoverCallback: function(a, b, c, d) {
                     return c.replace("sin(x)", "1.5 + 1.5 sin(" + d.x + ")")
                 },
                 xLabelMargin: 10,
                 integerYLabels: !0
             })
         }) 
     }
 };
 morris_chart.init()
})(jQuery);

<!-- Chart JS-->
<script src="../assets/js/chart/chartjs/Chart.min.js"></script>
<script src="../assets/js/chart/chartjs/chart.custom.js"></script>

var radarData = {
 labels: ["Ford", "Chevy", "Toyota", "Honda", "Mazda"],
 datasets: [{
     label: "My First dataset",
     fillColor: "rgba(145, 46, 252, 0.4)",
     strokeColor: "#7366ff",
     pointColor: "#7366ff",
     pointStrokeColor: "#7366ff",
     pointHighlightFill: "#7366ff" ,
     pointHighlightStroke: "rgba(145, 46, 252, 0.4)",
     data: [12, 3, 5, 18, 7]
 }]
};
var radarOptions = {
 scaleShowGridLines: true,
 scaleGridLineColor: "rgba(0,0,0,.2)",
 scaleGridLineWidth: 1,
 scaleShowHorizontalLines: true,
 scaleShowVerticalLines: true,
 bezierCurve: true,
 bezierCurveTension: 0.4,
 pointDot: true,
 pointDotRadius: 3,
 pointDotStrokeWidth: 1,
 pointHitDetectionRadius: 20,
 datasetStroke: true,
 datasetStrokeWidth: 2,
 datasetFill: true,
 legendTemplate: "
-legend\"><% for (var i=0; i
\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
<%}%>
"
};
var radarCtx = document.getElementById("myRadarGraph").getContext("2d");
var myRadarChart = new Chart(radarCtx).Radar(radarData, radarOptions);

<!-- Html code for display chart -->
<div class="ct-4 flot-chart-container"></div>

<!-- Chartist -->
<script src="../assets/js/chart/chartist/chartist.js"></script>
<script src="../assets/js/chart/chartist/chartist-custom.js"></script>

<!-- Chartist -->
<link rel="stylesheet" type="text/css" href="../assets/css/chartist.css">

(function($) {
 "use strict";
 new Chartist.Line('.ct-4', {
     labels: [1, 2, 3, 4, 5, 6, 7, 8],
     series: [
     [5, 9, 7, 8, 5, 3, 5, 4]
     ]
 }, {
     low: 0,
     showArea: true
 });
})(jQuery);

<!--Knob Chart JS-->
<script src="../assets/js/chart/knob/knob.min.js"></script>
<script src="../assets/js/chart/knob/knob-chart.js"></script>

(function($) {
 "use strict";
 $(".knob").knob({
     change : function (value) {
         //console.log("change : " + value);
     },
     release : function (value) {
         //console.log(this.$.attr('value'));
         console.log("release : " + value);
     },
     cancel : function () {
         console.log("cancel : ", this);
     },
     /*format : function (value) {
     return value + '%';
     },*/
     draw : function () {
         // "tron" case
         if(this.$.data('skin') == 'tron') {

             this.cursorExt = 0.3;

             var a = this.arc(this.cv)  // Arc
                 , pa                   // Previous arc
                 , r = 1;
 
             this.g.lineWidth = this.lineWidth;
             if (this.o.displayPrevious) {
                 pa = this.arc(this.v);
                 this.g.beginPath();
                 this.g.strokeStyle = this.pColor;
                 this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                 this.g.stroke();
             }
             this.g.beginPath();
             this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
             this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
             this.g.stroke();
             this.g.lineWidth = 2;
             this.g.beginPath();
             this.g.strokeStyle = this.o.fgColor;
             this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
             this.g.stroke();
             return false;
         }
     }
 });
})(jQuery);

<!-- Html code for display apex chart -->
<div id="basic-apex"></div>

<!-- Apex Chart JS-->
<script src="../assets/js/chart/apex-chart/apex-chart.js"></script>
<script src="../assets/js/chart/apex-chart/stock-prices.js"></script>
<script src="../assets/js/chart/apex-chart/chart-custom.js"></script>

// basic area chart
var options = {
   chart: {
       height: 200,
       type: 'area',
       zoom: {
           enabled: false
       },
       toolbar:{
         show: false
       }
   },
   dataLabels: {
       enabled: false
   },
   stroke: {
       curve: 'straight'
   },
   series: [{
       name: "STOCK ABC",
       data: series.monthDataSeries1.prices
   }],
   labels: series.monthDataSeries1.dates,
   xaxis: {
       type: 'datetime',
   },
   yaxis: {
       opposite: true
   },
   legend: {
       horizontalAlign: 'left'
   },
   colors:[ "#7366ff" ]

}

var chart = new ApexCharts(
   document.querySelector("#basic-apex"),
   options
);

chart.render();