Your IP : 18.188.0.20
<!DOCTYPE html>
<html>
<head>
<!-- Meta data -->
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Zanex – Bootstrap5 Admin & Dashboard Template">
<meta name="author" content="Spruko Technologies Private Limited">
<meta name="keywords" content="admin template,admin dashboard,bootstrap 5 admin template,html template,html admin template,admin,bootstrap 5 html template,html dashboard,dashboard,crm,admin pane,admin dashboard template,html responsive template,crm admin template,dashboard template.">
<!-- Title -->
<title>Zanex – Bootstrap5 Admin & Dashboard Template</title>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="assets/plugins/iconfonts/icons.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/main.css" rel="stylesheet">
<!---Internal Prism css-->
<link href="assets/plugins/prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism-treeview.css" rel="stylesheet">
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
</head>
<body class="theme-blush">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-blush">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- Sidebarover lay -->
<div class="sidebar-overlay" data-toggle="sidebar"></div>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="admin-image"> <img src="assets/images/logo-3.png" alt="" > </div>
<!-- Menu -->
<div class="menu main-sidebar">
<ul class="list" id="documenter_nav">
<li class="nav-item"><a class="nav-link" href="index.html"><i class="fe fe-airplay sidemenu-icon"></i><span class="sidemenu-label">Introduction</span></a></li>
<li class="nav-item"><a class="nav-link" href="folder-structure.html"><i class="fe fe-folder sidemenu-icon"></i><span class="sidemenu-label">Folder structure</span></a></li>
<li class="nav-item"><a class="nav-link" href="layouts.html"><i class="fe fe-layout sidemenu-icon"></i><span class="sidemenu-label">Layouts</span></a></li>
<li class="nav-item"><a class="nav-link" href="faqs.html"><i class="fe fe-help-circle sidemenu-icon"></i><span class="sidemenu-label text-primary fw-bold mr-5">Faqs </span><i class="fa fa-star float-right sidemenu-icon-2 text-warning"></i></a></li>
<li class="nav-item"><a class="nav-link" href="switcher.html"><i class="fe fe-grid sidemenu-icon"></i><span class="sidemenu-label">Switcher</span></a></li>
<li class="nav-item"><a class="nav-link" href="gulp.html"><i class="fe fe-settings sidemenu-icon"></i><span class="sidemenu-label">Gulp</span></a></li>
<li class="nav-item"><a class="nav-link" href="html-structure.html"><i class="fe fe-codepen sidemenu-icon"></i><span class="sidemenu-label">html-structure</span></a></li>
<li class="nav-item"><a class="nav-link" href="apps.html"><i class="fe fe-briefcase sidemenu-icon"></i><span class="sidemenu-label">Apps</span></a></li>
<li class="nav-item"><a class="nav-link" href="elements.html"><i class="fe fe-aperture sidemenu-icon"></i><span class="sidemenu-label">Elements</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-elements.html"><i class="fe fe-file-text sidemenu-icon"></i><span class="sidemenu-label">Form-elements</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-advanced.html"><i class="fe fe-cpu sidemenu-icon"></i><span class="sidemenu-label">Form-advanced</span></a></li>
<li class="nav-item"><a class="nav-link" href="treeview.html"><i class="fe fe-lock sidemenu-icon"></i><span class="sidemenu-label">Treeview</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-wizard.html"><i class="fe fe-hard-drive sidemenu-icon"></i><span class="sidemenu-label">Form-wizard</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-editor.html"><i class="fe fe-edit sidemenu-icon"></i><span class="sidemenu-label">Form-editor</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-validation.html"><i class="fe fe-file-plus sidemenu-icon"></i><span class="sidemenu-label">Form-validation</span></a></li>
<li class="nav-item"><a class="nav-link" href="maps.html"><i class="fe fe-map-pin sidemenu-icon"></i><span class="sidemenu-label">Maps</span></a></li>
<li class="nav-item"><a class="nav-link" href="charts.html"><i class="fe fe-pie-chart sidemenu-icon"></i><span class="sidemenu-label">Charts</span></a></li>
<li class="nav-item"><a class="nav-link" href="tables.html"><i class="fe fe-database sidemenu-icon"></i><span class="sidemenu-label">Tables</span></a></li>
<li class="nav-item"><a class="nav-link" href="icons.html"><i class="fe fe-anchor sidemenu-icon"></i><span class="sidemenu-label">Icons</span></a></li>
<li class="nav-item"><a class="nav-link" href="others.html"><i class="fe fe-link sidemenu-icon"></i><span class="sidemenu-label">Others</span></a></li>
<li class="nav-item"><a class="nav-link" href="plugins.html"><i class="fe fe-droplet sidemenu-icon"></i><span class="sidemenu-label">Plugins</span></a></li>
<li class="nav-item"><a class="nav-link" href="theme.html"><i class="fe fe-layers sidemenu-icon"></i><span class="sidemenu-label">Theme Style</span></a></li>
</ul>
</div>
<!-- #Menu -->
</aside>
<!-- #END# Left Sidebar -->
</section>
<section class="content home">
<div class="container-fluid">
<div class="block-header mt-3 ml-3">
<h1>Zanex – Bootstrap 5 Admin & Dashboard HTML Template</h1>
</div>
<div class="">
<div class="alert alert-primary-transparent">
<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Note:-</strong>
<hr class="message-inner-separator">
<p>Please refer <b class="text-primary fs-6">Faq's </b>page in documentation itself for queries like customization like color ,rtl ,dark style..etc.</p>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12 col-lg-12 col-xl-9">
<div class="card" id="Morrischart">
<div class="body">
<div class="">
<h5 class="mb-2 mt-2">Morris Chart</h5>
<p class="mt-2">The following HTML,JS, CSS you should have in your page to implement a Morris Charts..</p>
</div>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#morris" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#morris1" class="nav-link" data-toggle="tab">SCSS</a></li>
<li class="nav-item"><a href="#morris2" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="morris">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div id="morrisBar5" class="chartsh"></div>
</script>
</code>
</pre>
</figure>
</div>
<div class="tab-pane" id="morris1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<script type="html-Zanex/script">
<!-- MORRIS CHART SCSS -->
assets/scss/plugins/_morris.scss
</script>
</code>
</pre>
</figure>
</div>
<div class="tab-pane" id="morris2">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- MORRIS-CHART JS -->
<script src="../assets/plugins/morris/raphael-min.js"></script>
<script src="../assets/plugins/morris/morris.js"></script>
<script src="../assets/js/morris.js"></script>
</code>
</pre>
</figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>morris.js</b>(assets/js/morris.js). Every chart has unique I'ds, Based on <b>id's or Classes</b> you can Search the charts in <b>morris.js</b> file</p>
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre title="jQuery" class="javascript m-0" data-codetype ="JQueryku"><code class="language-javascript">
new Morris.Bar({
element: 'morrisBar5',
data: day_data,
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN'],
barColors: ['#6259ca', '#05c3fb'],
xLabelAngle: 0,
resize: true
});
</code>
</pre>
</figure>
</div>
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
</div>
</div>
</div>
<table class="table table-bordered bg-primary-transparent mt-4">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Plugin Link</strong></td>
<td><a href="http://morrisjs.github.io/morris.js/" target="_blank">http://morrisjs.github.io/morris.js/</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="Flotchart">
<div class="body">
<div class="">
<h5 class="mb-2 mt-2">Flot Chart</h5>
<p class="mt-2">The following HTML,JS, CSS you should have in your page to implement a Flot Charts..</p>
</div>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#flotchart" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#flotchart3" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="flotchart">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div id="placeholder2" class="chartsh"></div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="flotchart3">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- FLOT JS -- >
<script src="../assets/plugins/flot/jquery.flot.js"></script>
<script src="../assets/plugins/flot/jquery.flot.fillbetween.js"></script>
<script src="../assets/plugins/flot/jquery.flot.pie.js"></script>
<script src="../assets/js/flot.js"></script>
</code>
</pre>
</figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>flot.js</b>(assets/js/flot.js). Every chart has unique I'ds, Based on <b>id's or Classes</b> you can Search the charts in <b>flot.js</b> file</p>
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre title="jQuery" class="javascript m-0" data-codetype ="JQueryku"><code class="language-javascript">
/*---- placeholder2----*/
$(function() {
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot("#placeholder2", [{
data: sin,
label: "data1"
}, {
data: cos,
label: "data2"
}], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
borderColor: "rgba(119, 119, 142, 0.1)",
verticalLines: false,
horizontalLines: false
},
colors: ['#6259ca', '#05c3fb'],
yaxis: {
min: -1.2,
max: 1.2,
tickLength: 0
},
xaxis: {
tickLength: 0
}
});
});
</code>
</pre>
</figure>
</div>
</div>
</div>
</div>
<table class="table table-bordered bg-primary-transparent mt-4">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Plugin Link</strong></td>
<td><a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="Chartjs">
<div class="body">
<div class="">
<h5 class="mb-2 mt-2">ChartJs</h5>
<p class="mt-2">The following HTML,JS, CSS you should have in your page to implement a ChartJs Charts..</p>
</div>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#chartjs1" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#chartjs2" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="chartjs1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div class="chart-container">
<canvas id="chartLine" class="h-275"></canvas>
</div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="chartjs2">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- CHARTJS JS -->
<script src="../assets/plugins/chart/Chart.bundle.js"></script>
<script src="../assets/js/chart.js"></script>
</code>
</pre>
</figure>
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre title="jQuery" class="javascript m-0" data-codetype ="JQueryku"><code class="language-javascript">
/*LIne-Chart */
var ctx = document.getElementById("chartLine").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sun", "Mon", "Tus", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
label: 'Profits',
data: [100, 420, 210, 420, 210, 320, 350],
borderWidth: 2,
backgroundColor: 'transparent',
borderColor: '#6259ca',
borderWidth: 3,
pointBackgroundColor: '#ffffff',
pointRadius: 2
}, {
label: 'Expenses',
data: [450, 200, 350, 250, 480, 200, 400],
borderWidth: 2,
backgroundColor: 'transparent',
borderColor: '#05c3fb',
borderWidth: 3,
pointBackgroundColor: '#ffffff',
pointRadius: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
fontColor: "#9ba6b5",
},
display: true,
gridLines: {
color: 'rgba(119, 119, 142, 0.2)'
}
}],
yAxes: [{
ticks: {
fontColor: "#9ba6b5",
},
display: true,
gridLines: {
color: 'rgba(119, 119, 142, 0.2)'
},
scaleLabel: {
display: false,
labelString: 'Thousands',
fontColor: 'rgba(119, 119, 142, 0.2)'
}
}]
},
legend: {
labels: {
fontColor: "#9ba6b5"
},
},
}
});
</code>
</pre>
</figure>
</div>
</div>
</div>
</div>
<table class="table table-bordered bg-primary-transparent mt-4">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Plugin Link</strong></td>
<td><a href="http://www.chartjs.org/" target="_blank">http://www.chartjs.org/</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="C3chart">
<div class="body">
<div class="">
<h5 class="mb-2 mt-2">C3 Charts </h5>
<p class="mt-2">The following HTML,JS, CSS you should have in your page to implement a C3 Charts..</p>
</div>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#C3chart1" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#C3chart2" class="nav-link" data-toggle="tab">SCSS</a></li>
<li class="nav-item"><a href="#C3chart3" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="C3chart1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div id="chart-combination" class="chartsh"></div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="C3chart2">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<!-- C3 CHARTS SCSS-->
<link href="assets/scss/plugins/_c3-chart.scss
</script>
</code>
</pre>
</figure>
</div>
<div class="tab-pane" id="C3chart3">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- C3 CHART JS -->
<script src="../assets/plugins/charts-c3/d3.v5.min.js"></script>
<script src="../assets/plugins/charts-c3/c3-chart.js"></script>
<!-- INDEX JS -->
<script src="../assets/js/charts.js"></script>
<script src="../assets/js/index.js"></script>
</code>
</pre>
</figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>charts.js</b>(assets/js/charts.js). Every chart has unique I'ds, Based on <b>id's or Classes</b> you can Search the charts in <b>charts.js</b> file</p>
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre title="jQuery" class="javascript m-0" data-codetype ="JQueryku"><code class="language-javascript">
/*chart-combination*/
var chart = c3.generate({
bindto: '#chart-combination', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 100, 130, 150, 240, 130, 220],
['data2', 250, 200, 220, 400, 250, 350],
['data3', 100, 130, 150, 240, 130, 220]
],
type: 'bar', // default type of chart
types: {
'data1': "line",
'data2': "spline",
},
groups: [
['data3']
],
colors: {
data1: '#09ad95',
data2: '#d43f8d',
data3: '#0774f8'
},
color: function (color, d) {
// d will be 'id' when called for legends
return d.id && d.id === 'data3' ? d3.rgb(98, 89, 202): color;
//return d.id && d.id === 'data3' ? d3.rgb(98, 89, 202) :color;
//return d.id && d.id === 'data3' ? d3.rgb(98, 89, 202).darker(d.value / 120) : color;
},
names: {
// name of each serie
'data1': 'Marketing',
'data2': 'Development',
'data3': 'Sales'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['2007-20082008', '2009-2010', '2011-2012', '2013-2014', '2015-2016', '2017-2018']
},
},
bar: {
width: 50
},
legend: {
show: false, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
</code>
</pre>
</figure>
</div>
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
</div>
</div>
</div>
<table class="table table-bordered bg-primary-transparent mt-4">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>PluginLink</strong></td>
<td><a href="https://c3js.org/examples.html" target="_blank">https://c3js.org/examples.html</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="echart">
<div class="body">
<div class="">
<h5 class="mb-2 mt-2">Echart</h5>
<p class="mt-2">The following HTML,JS, CSS you should have in your page to implement a Echart Charts..</p>
</div>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#echart1" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#echart2" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="echart1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div id="echart1" class="chartsh"></div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="echart2">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- ECHART JS -->
<script src="../assets/js/echarts.js"></script>
<script src="../assets/plugins/echarts/echarts.js"></script>
</code>
</pre>
</figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>echarts.js</b>(assets/js/echarts.js). Every chart has unique I'ds, Based on <b>id's or Classes</b> you can Search the charts in <b>echarts.js</b> file</p>
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre title="jQuery" class="javascript m-0" data-codetype ="JQueryku"><code class="language-javascript">
/*-----echart1-----*/
var chartdata = [{
name: 'sales',
type: 'bar',
data: [10, 15, 9, 18, 10, 15]
}, {
name: 'profit',
type: 'line',
smooth: true,
data: [8, 5, 25, 10, 10]
}, {
name: 'growth',
type: 'bar',
data: [10, 14, 10, 15, 9, 25]
}];
var chart = document.getElementById('echart1');
var barChart = echarts.init(chart);
var option = {
grid: {
top: '6',
right: '0',
bottom: '17',
left: '25',
},
xAxis: {
data: ['2014', '2015', '2016', '2017', '2018'],
axisLine: {
lineStyle: {
color: 'rgba(119, 119, 142, 0.2)'
}
},
axisLabel: {
fontSize: 10,
color: '#77778e'
}
},
tooltip: {
show: true,
showContent: true,
alwaysShowContent: true,
triggerOn: 'mousemove',
trigger: 'axis',
axisPointer: {
label: {
show: false,
}
}
},
yAxis: {
splitLine: {
lineStyle: {
color: 'rgba(119, 119, 142, 0.2)'
}
},
axisLine: {
lineStyle: {
color: 'rgba(119, 119, 142, 0.2)'
}
},
axisLabel: {
fontSize: 10,
color: '#77778e'
}
},
series: chartdata,
color: ['#6259ca', '#09ad95', '#eb6f33', ]
};
barChart.setOption(option);
</code>
</pre>
</figure>
</div>
</div>
</div>
</div>
<table class="table table-bordered bg-primary-transparent mt-4">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Plugin Link</strong></td>
<td><a href="https://echarts.apache.org/examples/en/index.html" target="_blank">https://echarts.apache.org/examples/en/index.html</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-12 d-none d-xl-block custom-leftnav">
<div class="main-content-left-components">
<div class="card custom-card">
<div class="card-body component-item">
<div class="collapse navbar-collapse justify-content-end" id="main-menu">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#Morrischart">Morris Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Flotchart">FlotChart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Chartjs">Chartjs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#C3chart">C3 Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#echart">Echart</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer opened -->
<div class="main-footer ht-40">
<div class="pd-t-0-f ht-100p">
<span>Copyright © <span id="year"></span> <a href="javascript:void(0)">Zanex</a>. Designed with <span class="fa fa-heart text-danger"></span> by <a href="javascript:void(0)"> Spruko </a> All rights reserved.</span>
</div>
</div>
<!-- Footer closed -->
</section>
<div class="color-bg">
<div class="sidebar__toggle" data-toggle="sidebar">
<a class="open-toggle" href="javascript:void(0);"><i class="fe fe-menu"></i></a>
</div>
<ul class="nav navbar-nav">
<li class="nav-item mr-8"><a class="btn btn-primary btn-header " href="https://themeforest.net/item/zanex-bootstrap-5-admin-dashboard-template/32984858" target="_blank"><i class="icon-help2"></i> Buy Now</a></li>
<li class="nav-item mr-8"><a class="btn btn-secondary btn-header " href="https://1.envato.market/MGEaN" target="_blank"><i class="icon-bag3"></i> Portfolio</a></li>
<li class="nav-item"><a class="btn btn-danger text-white mr-3 btn-header" href="https://spruko.com/licenses.html" target="_blank"><i class="icon-bag3"></i> Licenses</a></li>
</ul>
</div>
<!-- Jquery Core Js -->
<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/morphingsearchscripts.bundle.js"></script> <!-- morphing search Js -->
<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/mainscripts.bundle.js"></script><!-- Custom Js -->
<script src="assets/bundles/morphingscripts.bundle.js"></script><!-- morphing search page js -->
<!-- Internal Prism js-->
<script src="assets/plugins/prism/prism.js"></script>
<!-- Treeview js-->
<script src="assets/plugins/treeview-prism/prism.js"></script>
<script src="assets/plugins/treeview-prism/prism-treeview.js"></script>
<!-- Perfectscroll js-->
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/p-scroll.js"></script>
<!-- Custom js-->
<script src="assets/js/custom.js"></script>
<script src="assets/js/menuspy.min.js.js"></script>
<script>
var elm = document.querySelector('#main-menu');
var ms = new MenuSpy(elm);
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document) {
return;
}
/**
* Class name for <pre> which is activating the plugin
* @type {String}
*/
var PLUGIN_CLASS = 'line-numbers';
/**
* Resizes line numbers spans according to height of line of code
* @param {Element} element <pre> element
*/
var _resizeElement = function (element) {
var codeStyles = getStyles(element);
var whiteSpace = codeStyles['white-space'];
if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
var codeElement = element.querySelector('code');
var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
var lineNumberSizer = element.querySelector('.line-numbers-sizer');
var codeLines = element.textContent.split('\n');
if (!lineNumberSizer) {
lineNumberSizer = document.createElement('span');
lineNumberSizer.className = 'line-numbers-sizer';
codeElement.appendChild(lineNumberSizer);
}
lineNumberSizer.style.display = 'block';
codeLines.forEach(function (line, lineNumber) {
lineNumberSizer.textContent = line || '\n';
var lineSize = lineNumberSizer.getBoundingClientRect().height;
lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
});
lineNumberSizer.textContent = '';
lineNumberSizer.style.display = 'none';
}
};
/**
* Returns style declarations for the element
* @param {Element} element
*/
var getStyles = function (element) {
if (!element) {
return null;
}
return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
};
window.addEventListener('resize', function () {
Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
});
Prism.hooks.add('complete', function (env) {
if (!env.code) {
return;
}
// works only for <code> wrapped inside <pre> (not inline)
var pre = env.element.parentNode;
// Original regex check for class, leaving it here
// for its redundancy check
var clsReg = /\s*\bline-numbers\b\s*/;
// New regex check for opt-out class
var clsRegB = /\s*\bno-line-numbers\b\s*/;
if (env.element.querySelector(".line-numbers-rows")) {
// Abort if line numbers already exists
return;
}
// Added to facilitate opting out
if (clsRegB.test(pre.className)) {
// Respect the opt-out
return;
}
if (clsReg.test(env.element.className)) {
// Remove the class "line-numbers" from the <code>
env.element.className = env.element.className.replace(clsReg, ' ');
}
if (!clsReg.test(pre.className)) {
// Add the class "line-numbers" to the <pre>
pre.className += ' line-numbers';
}
var match = env.code.match(/\n(?!$)/g);
var linesNum = match ? match.length + 1 : 1;
var lineNumbersWrapper;
var lines = new Array(linesNum + 1);
lines = lines.join('<span></span>');
lineNumbersWrapper = document.createElement('span');
lineNumbersWrapper.setAttribute('aria-hidden', 'true');
lineNumbersWrapper.className = 'line-numbers-rows';
lineNumbersWrapper.innerHTML = lines;
if (pre.hasAttribute('data-start')) {
pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
}
env.element.appendChild(lineNumbersWrapper);
_resizeElement(pre);
});
}());
</script>
</body>
</html>