Home › Forums › Chart Support › dynamic multistacked graph › Reply To: dynamic multistacked graph
<?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>