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: #307EF3"]
]),
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: '#307EF3',
fillColor: 'transparent',
highlightLineColor: '#307EF3',
highlightSpotColor: '#307EF3',
targetColor: '#307EF3',
performanceColor: '#307EF3',
boxFillColor: '#307EF3',
medianColor: '#307EF3',
minSpotColor: '#307EF3'
});
})
}
};
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
<!-- 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: ['#307EF3'], 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: "#307EF3",
pointColor: "#307EF3",
pointStrokeColor: "#307EF3",
pointHighlightFill: "#307EF3" ,
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="#307EF3" 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:[ "#307EF3" ]
}
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);
}