<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card ">
<div class="card-header">
<h3>Line Series</h3>
</div>
<div class="card-block">
<div id="chart1"></div>
</div>
</div>
</div>
</div>
</div>
<!-- you need to include the shieldui css and js assets in order for the charts to work -->
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light-bootstrap/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
</div>
</div>
jQuery(function ($) {
var data1 = [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67];
var data2 = [3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7];
var data3 = [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57];
var data4 = [13, 19, 112, 114, 212, 332, 435, 132, 67, 45, 55, 7];
$("#chart1").shieldChart({
exportOptions: {
image: false,
print: false
},
axisY: {
title: {
text: "Break-Down for selected quarter"
}
},
dataSeries: [{
seriesType: "line",
data: data1
}]
});
$("#chart2").shieldChart({
exportOptions: {
image: false,
print: false
},
axisY: {
title: {
text: "Break-Down for selected quarter"
}
},
dataSeries: [{
seriesType: "polarbar",
data: data2
}]
});
$("#chart3").shieldChart({
exportOptions: {
image: false,
print: false
},
axisY: {
title: {
text: "Break-Down for selected quarter"
}
},
dataSeries: [{
seriesType: "area",
data: data3
}]
});
$("#chart4").shieldChart({
exportOptions: {
image: false,
print: false
},
axisY: {
title: {
text: "Break-Down for selected quarter"
}
},
dataSeries: [{
seriesType: "stepline",
data: data4
}]
});
});
