Top

Popular Search:

- Starter kit
- Element
- components
- forms
- tables

#### Charts

#### Google charts Offical link Preview link

    <!-- Html code for display google chart -->
    <div id="bar-chart2"></div>

##### To use google chart you have to add the following script files

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

custom script added in google.chart.js file for this chart display and your html code `id should be match` with your custom script js

##### custom google-chart.js file

    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 charts Offical link Preview link

    <!-- Html code for display sparkline chart -->
    <div id="simple-line-chart-sparkline"></div>

##### To use sparkline chart you have to add the following script files

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

Custom script added in sparkline-script.js file for this chart display and your html code `id should be match` with your custom script js

##### custom sparkline-script.js file

    (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 charts Offical link Preview link

##### To use flot chart you have to add the following script files

    <!-- 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 charts Offical link Preview link

0,-3,-6,-4,-5,-4,-7,-3,-5,-2

    <!-- Html code for display peity chart -->
    <span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

##### To use peity chart you have to add the following script files

    <!--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>

Custom script added in peity-custom.js file for this chart display and your html code `class should be match` with your custom script js

##### custom peity-custom.js file

    $(".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 charts Offical link Preview link

    <!-- Html code for display morris chart -->
    <div class="flot-chart-container">
      <div class="flot-chart-placeholder" id="decimal-morris-chart"></div>
      <p id="choices"></p>
    </div>

##### To use morris chart you have to add the following script files

    <!-- 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>

Custom script added in morris-script.js file for this chart display and your html code `id should be match` with your custom script js

##### custom morris-script.js file

    (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);

#### Chartjs charts Offical link Preview link

    <!-- Html code for display chartjs chart -->
    <canvas id="myRadarGraph"></canvas>

##### To use chartjs chart you have to add the following script files

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

Custom script added in chart.custom.js file for this chart display and your html code `id should be match` with your custom script js

##### custom chart.custom.js file

    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);

#### Chartist charts Offical link Preview link

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

##### To use chartist chart you have to add the following script files

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

##### To use chartist chart you have to add the following style file

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

Custom script added in chartist-custom.js file for this chart display and your html code `class should be match` with your custom script js

##### custom chartist-custom.js file

    (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 charts Offical link Preview link

    <!-- Html code for display Knob chart -->
    <div class="knob-block text-center">
      <input class="knob" data-width="200" data-thickness=".1" data-angleoffset="90" data-fgcolor="#7366ff" data-linecap="round" value="35">
    </div>

##### To use knob chart you have to add the following script files

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

Custom script added in knob-chart.js file for this chart display and your html code `class should be match` with your custom script js

##### custom knob-chart.js file

    (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);

#### Apex charts Offical link Preview link

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

##### To use apex chart you have to add the following script files

    <!-- 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>

Custom script added in chart-custom.js file for this chart display and your html code `id should be match` with your custom script js

##### custom chart-custom.js file

    // 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();

#### Echarts Offical link Preview link

    <!-- Html code for display echart chart -->
    <div id="echart-pierich" class="apache-container"></div>

##### To use echart you have to add the following style and script files

    <!-- Echart css -->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/echart.css">
    <!-- Echart JS-->
    <script src="../assets/js/chart/echart/esl.js"></script>
    <script src="../assets/js/chart/echart/config.js"></script>
    <script src="../assets/js/chart/echart/pie-chart/facePrint.js"></script>
    <script src="../assets/js/chart/echart/pie-chart/testHelper.js"></script>
    <script src="../assets/js/chart/echart/pie-chart/custom-transition-texture.js"></script>
    <script src="../assets/js/chart/echart/data/symbols.js"></script>
    <script src="../assets/js/chart/echart/custom.js"></script>

##### To use echart you have to add the following style file

    <!-- Echarts -->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/echart.css">

Custom script added in chartist-custom.js file for this chart display and your html code `id should be match` with your custom script js

##### custom custom.js file

    var dom = document.getElementById("echart-pierich");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
       tooltip: {
           trigger: 'item',
           formatter: '{a}
    {b} : {c} ({d}%)'
       },

       visualMap: {
           show: false,
           min: 80,
           max: 600,
           inRange: {
               colorLightness: [0, 1]
           }
       },
       series: [
           {
               name: 'access source',
               type: 'pie',
               radius: '55%',
               center: ['50%', '50%'],
               data: [
                   {value: 335, name: 'direct interview'},
                   {value: 310, name: 'email marketing'},
                   {value: 274, name: 'affiliate advertising'},
                   {value: 235, name: 'video ad'},
                   {value: 400, name: 'search engine'}
               ].sort(function (a, b) { return a.value - b.value; }),
               roseType: 'radius',
               label: {
                   color: 'rgba(0,0,0 0.3)'
               },
               labelLine: {
                   lineStyle: {
                       color: 'rgba(0,0,0 0.3)'
                   },
                   smooth: 0.2,
                   length: 10,
                   length2: 20
               },
               selectedMode: "single",
               emphasis: {
               itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: "rgba(0, 0, 0, 0.5)",
                 },
               },

               animationType: 'scale',
               animationEasing: 'elasticOut',
               animationDelay: function (idx) {
                   return Math.random() * 200;
               }
           }
       ]
    };
    if (option && typeof option === "object") {
       myChart.setOption(option, true);
    }