chartnew.js
Version:
Simple HTML5 Charts using the canvas element
122 lines (105 loc) • 4.1 kB
HTML
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../other_modules/bootstrap.min.css">
<script src="../other_modules/jquery.min.js"></script>
<script src="../other_modules/bootstrap.min.js"></script>
<script src='../ChartNew.js'></script>
<script src='../Add-ins/bootstrap_ChartNew.js'></script>
<script>
tag_animation_only_at_first_display=false;
var linedata_Premium_Profile = {
labels: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50"],
datasets : [
{
title: "All Products",
fillColor : "#5DA5DA", strokeColor : "#5DA5DA",
pointColor : "#5DA5DA",
pointStrokeColor : "#5DA5DA",
data : [27,44,107,41,21,21,35,17,5,7,6,1,1,0,0,0,2,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,1,3,0,0,2,1,0,0,0,0,0,0,0,0,0,0,0],
},
]
};
var linedata_Discount_Profile = {
labels: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50"],
datasets : [
{
title: "All Products",
fillColor : "#5DA5DA",
strokeColor : "#5DA5DA",
pointColor : "#5DA5DA",
pointStrokeColor : "#5DA5DA",
data : [11,7,2,0,9,11,5,2,21,148,6,2,5,1,7,6,3,8,8,19,13,14,6,12,21,8,13,14,12,19,24,8,13,24,27,11,9,19,16,9,5,0,7,2,2,6,1,0,3,4],
}
]
};
var barChartOptions1 = {
responsive: true,
animation : true,
maintainAspectRatio: true,
legend: true,
datasetFill: false,
showXLabels : 5,
firstLabelToShow : -3,
xAxisLabel: "Discount (%)",
yAxisLabel: "Frequency",
yAxisMinimumInterval: 1,
rotateLabels: 0,
barValueSpacing: 2,
xAxisLabelSpaceBefore: 0,
xAxisSpaceAfter: 0,
graphSpaceAfter: 0
};
var barChartOptions2 = {
responsive: true,
animation : true,
maintainAspectRatio: true,
legend: true,
datasetFill: false,
showXLabels : 5,
firstLabelToShow : -3,
xAxisLabel: "Premium (%)",
yAxisLabel: "Frequency",
yAxisMinimumInterval: 1,
rotateLabels: 0,
barValueSpacing: 2,
xAxisLabelSpaceBefore: 0,
xAxisSpaceAfter: 0,
graphSpaceAfter: 0
};
</script>
</head>
<body>
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Discount_Profile">Discount Profile</a></li>
<li><a data-toggle="tab" href="#Premium_Profile">Premium Profile</a></li>
<li><a data-toggle="tab" href="#Last_Profile">Last Profile</a></li>
</ul>
<div class="tab-content">
<div id="Discount_Profile" class="tab-pane fade in active">
<h3>Discount_Profile</h3>
<script>
setCanvas("Bar",linedata_Discount_Profile,barChartOptions2,150,800);
setCanvas("HorizontalBar",linedata_Premium_Profile,barChartOptions1);
</script>
</div>
<div id="Premium_Profile" class="tab-pane fade">
<h3>Premium Profile</h3>
<script>
setCanvas("Line",linedata_Premium_Profile,barChartOptions1);
setCanvas("HorizontalBar",linedata_Discount_Profile,barChartOptions2);
</script>
</div>
<div id="Last_Profile" class="tab-pane fade">
<h3>Last Profile - no chart here</h3>
</div>
</div>
<script>
setRefreshCanvas();
</script>
</body>
</html>