Home forums Using CanvasJS dynamic multistacked graph Reply To: dynamic multistacked graph

#23097

snehal
Member

<?php
session_start();
if(!isset($_SESSION[‘id’],$_SESSION[‘department’]))
{
header(‘location:index.php?lmsg=true’);
exit;
}
require_once(‘includes/dbconfig.php’);

?>
<?php
$timezone = ‘Asia/Manila’;
date_default_timezone_set($timezone);
$today = date(‘Y-m-d’);
$year = date(‘Y’);
if(isset($_GET[‘year’])){
$year = $_GET[‘year’];
}
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>CMS | Dashboard</title>

<!– Bootstrap core CSS –>
<link href=”assets/css/bootstrap.css” rel=”stylesheet”>
<!–external css–>
<link href=”assets/font-awesome/css/font-awesome.css” rel=”stylesheet” />
<link rel=”stylesheet” type=”text/css” href=”assets/css/zabuto_calendar.css”>
<link rel=”stylesheet” type=”text/css” href=”assets/js/gritter/css/jquery.gritter.css” />
<link rel=”stylesheet” type=”text/css” href=”assets/lineicons/style.css”>

<!– Custom styles for this template –>
<link href=”assets/css/style.css” rel=”stylesheet”>
<link href=”assets/css/style-responsive.css” rel=”stylesheet”>

<script src=”assets/js/chart-master/Chart.js”></script>
<!–[if lt IE 9]>
<script src=”html5shiv.js”></script>
<script src=”respond.min.js”></script>
<![endif]–>

<!–[if lt IE 9]>
<script src=”html5shiv.min.js”></script>
<script src=”respond.min.js”></script>
<![endif]–>

<!– Google Font –>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic”>
<style type=”text/css”>
.mt20{
margin-top:20px;
}
.bold{
font-weight:bold;
}

/* chart style*/
#legend ul {
list-style: none;
}

#legend ul li {
display: inline;
padding-left: 30px;
position: relative;
margin-bottom: 4px;
border-radius: 5px;
padding: 2px 8px 2px 28px;
font-size: 14px;
cursor: default;
-webkit-transition: background-color 200ms ease-in-out;
-moz-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
}

#legend li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 100%;
border-radius: 5px;
}
</style>

</head>

<body>

<section id=”container” >

<?php include(“includes/config.php”);?>
<?php include(“includes/header.php”);?>
<?php include(“includes/sidebar.php”);?>
<section id=”main-content”>
<section class=”wrapper”>

<div class=”row”>
<div class=”col-xs-12″>
<div class=”box”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Monthly Functionally Deviation Report</h3>
<div class=”box-tools pull-right”>

</div>
</div>
<div class=”box-body” style=”width:900px;height:500px”>
<div class=”chart”>
<br>
<div id=”legend” class=”text-center”></div>
<canvas id=”barChart” style=”height:350px”></canvas>
</div>
</div>
</div>
</div>
</div>
</section>
</section>

<!– js placed at the end of the document so the pages load faster –>
<script src=”assets/js/jquery.js”></script>
<script src=”assets/js/jquery-1.8.3.min.js”></script>
<script src=”assets/js/bootstrap.min.js”></script>
<script class=”include” type=”text/javascript” src=”assets/js/jquery.dcjqaccordion.2.7.js”></script>
<script src=”assets/js/jquery.scrollTo.min.js”></script>
<script src=”assets/js/jquery.nicescroll.js” type=”text/javascript”></script>
<script src=”assets/js/jquery.sparkline.js”></script>

<!–common script for all pages–>
<script src=”assets/js/common-scripts.js”></script>

<script type=”text/javascript” src=”assets/js/gritter/js/jquery.gritter.js”></script>
<script type=”text/javascript” src=”assets/js/gritter-conf.js”></script>

<!–script for this page–>
<script src=”assets/js/sparkline-chart.js”></script>
<script src=”assets/js/zabuto_calendar.js”></script>
<?php
$conn = new mysqli(‘localhost’, ‘root’, ”, ‘finalcms’);

if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}

?>
<?php
$Ravalue = array();
$noidentification = array();
$oversize = array();
$outofrange = array();

for( $m = 1; $m <= 12; $m++ ) {
$sql = “SELECT * FROM tblcomplaints WHERE status is null”;
$oquery = $conn->query($sql);
array_push($Ravalue , $oquery->num_rows);

$sql = “SELECT * FROM tblcomplaints WHERE status = ‘closed’ “;
$pquery = $conn->query($sql);
array_push($noidentification, $pquery->num_rows);

$sql = “SELECT * FROM tblcomplaints WHERE status = ‘in process’ “;
$lquery = $conn->query($sql);
array_push($oversize , $lquery->num_rows);

$sql = “SELECT distinct(customerName) FROM tblcomplaints “;
$squery = $conn->query($sql);

}

$months = json_encode($squery);

$Ravalue= json_encode($Ravalue);
$noidentification= json_encode($noidentification);
$oversize= json_encode($oversize);
$outofrange= json_encode($outofrange);
?>
<!– End Chart Data –>
<script>
$(function(){
var barChartCanvas = $(‘#barChart’).get(0).getContext(‘2d’)
var barChart = new Chart(barChartCanvas)
var barChartData = {
labels : [
<?php
$query=mysql_query(“select distinct(customerName) from tblcomplaints”)or die(mysql_error());
while($row=mysql_fetch_array($query))
{
?>
<?php
echo “‘”.$row[‘customerName’].”‘”.’,’;?>
<?php }; ?>
],

datasets: [
{
label : ‘Not processed’,
fillColor : ‘rgba(210, 214, 222, 1)’,
strokeColor : ‘rgba(210, 214, 222, 1)’,
pointColor : ‘rgba(210, 214, 222, 1)’,
pointStrokeColor : ‘#c1c7d1’,
pointHighlightFill : ‘#fff’,
pointHighlightStroke: ‘rgba(220,220,220,1)’,
data : <?php echo $Ravalue; ?>
},
{
label : ‘Closed’,
fillColor : ‘rgba(60,141,188,0.9)’,
strokeColor : ‘rgba(60,141,188,0.8)’,
pointColor : ‘#3b8bba’,
pointStrokeColor : ‘rgba(60,141,188,1)’,
pointHighlightFill : ‘#fff’,
pointHighlightStroke: ‘rgba(60,141,188,1)’,
data : <?php echo $noidentification; ?>
},
{
label : ‘In Process’,
fillColor : ‘rgba(205,64,64,0.5)’,
strokeColor : ‘rgba(205,64,64,0.5)’,
pointColor : ‘pink’,
pointStrokeColor : ‘rgba(205,64,64,0.5)’,
pointHighlightFill : ‘Blue’,
pointHighlightStroke: ‘rgba(205,64,64,0.5)’,
data : <?php echo $oversize; ?>
}

]
}
barChartData.datasets[1].fillColor = ‘#00a65a’
barChartData.datasets[1].strokeColor = ‘#00a65a’
barChartData.datasets[1].pointColor = ‘#00a65a’
var barChartOptions = {
//Boolean – Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,
//Boolean – Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String – Colour of the grid lines
scaleGridLineColor : ‘rgba(0,0,0,.05)’,
//Number – Width of the grid lines
scaleGridLineWidth : 1,
//Boolean – Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean – Whether to show vertical lines (except Y axis)
scaleShowVerticalLines : true,
//Boolean – If there is a stroke on each bar
barShowStroke : true,
//Number – Pixel width of the bar stroke
barStrokeWidth : 1,
//Number – Spacing between each of the X value sets
barValueSpacing : 1,
//Number – Spacing between data sets within X values
barDatasetSpacing : 1,
//String – A legend template
legendTemplate : ‘<ul class=”<%=name.toLowerCase()%>-legend”><% for (var i=0; i<datasets.length; i++){%><li><span style=”background-color:<%=datasets[i].fillColor%>”></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>’,
//Boolean – whether to make the chart responsive
responsive : true,
maintainAspectRatio : true
}

barChartOptions.datasetFill = false
var myChart = barChart.Bar(barChartData, barChartOptions)
document.getElementById(‘legend’).innerHTML = myChart.generateLegend();
});
</script>
<script>
$(function(){
$(‘#select_year’).change(function(){
window.location.href = ‘categorygraph.php?year=’+$(this).val();
});
});
</script>
<script>
$.widget.bridge(‘uibutton’, $.ui.button);
</script>
<script src=”Chart.js”></script>
<script>
$(function () {
$(‘#example1’).DataTable({
responsive: true
})
$(‘#example2’).DataTable({
‘paging’ : true,
‘lengthChange’: false,
‘searching’ : false,
‘ordering’ : true,
‘info’ : true,
‘autoWidth’ : false
})
})
</script>
<script>
$(function(){
/** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$(‘ul.sidebar-menu a’).filter(function() {
return this.href == url;
}).parent().addClass(‘active’);

// for treeview
$(‘ul.treeview-menu a’).filter(function() {
return this.href == url;
}).parentsUntil(“.sidebar-menu > .treeview-menu”).addClass(‘active’);

});
</script>
<script>
$(function(){
//Date picker
$(‘#datepicker_add’).datepicker({
autoclose: true,
format: ‘yyyy-mm-dd’
})
$(‘#datepicker_edit’).datepicker({
autoclose: true,
format: ‘yyyy-mm-dd’
})

//Timepicker
$(‘.timepicker’).timepicker({
showInputs: false
})

//Date range picker
$(‘#reservation’).daterangepicker()
//Date range picker with time picker
$(‘#reservationtime’).daterangepicker({ timePicker: true, timePickerIncrement: 30, format: ‘MM/DD/YYYY h:mm A’ })
//Date range as a button
$(‘#daterange-btn’).daterangepicker(
{
ranges : {
‘Today’ : [moment(), moment()],
‘Yesterday’ : [moment().subtract(1, ‘days’), moment().subtract(1, ‘days’)],
‘Last 7 Days’ : [moment().subtract(6, ‘days’), moment()],
‘Last 30 Days’: [moment().subtract(29, ‘days’), moment()],
‘This Month’ : [moment().startOf(‘month’), moment().endOf(‘month’)],
‘Last Month’ : [moment().subtract(1, ‘month’).startOf(‘month’), moment().subtract(1, ‘month’).endOf(‘month’)]
},
startDate: moment().subtract(29, ‘days’),
endDate : moment()
},
function (start, end) {
$(‘#daterange-btn span’).html(start.format(‘MMMM D, YYYY’) + ‘ – ‘ + end.format(‘MMMM D, YYYY’))
}
)

});
</script>

</body>
</html>