<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Quarterly Sales</h3>
</div>
<div class="panel-body">
<div id="performance1" style="height: 270px;"></div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Quarterly Sales</h3>
</div>
<div class="panel-body">
<div id="performance2" style="height: 270px;"></div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Quarterly Sales</h3>
</div>
<div class="panel-body">
<div id="performance3" style="height: 270px;"></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/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
jQuery(function ($) {
var performance = [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67],
visits = [3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7],
budget = [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57];
$("#performance1").shieldChart({
primaryHeader: {
text: "Quarterly Performance"
},
dataSeries: [{
seriesType: "area",
collectionAlias: "Q Data",
data: performance
}]
});
$("#performance2").shieldChart({
primaryHeader: {
text: "Visitors"
},
axisX: {
categoricalValues: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
dataSeries: [{
seriesType: "bar",
collectionAlias: "Visits",
data: visits
}]
});
$("#performance3").shieldChart({
primaryHeader: {
text: "Budget"
},
dataSeries: [{
seriesType: "line",
collectionAlias: "Budget",
data: budget
}]
});
});
