The purpose is to display data into flot stacked bar. For example for Week1 I would be able to count number of red, orange and green color and display them into stacked bar and by having week1 underneath the x-axis.
My code is working fine between two flexible dates so for example starting date is "1/1/2015" and the end date is "1/7/2015".
Wondering how to display it as weekly regarding to the dates I have chosen.
Any examples would be much appreciated.
Thank you.
Here is my code for PHP :-
$result = mysqli_query($con,"SELECT * FROM `colors` WHERE `Date` BETWEEN '" . $_POST
['start'] . "' AND '" . $_POST ['end'] . "' ") or die ("Error: ".mysqli_error($con));
$Colorcounter = 0;
$counterRed=0;
$counterOrange=0;
$counterGreen=0;
while($row = mysqli_fetch_array($result))
{
$answer = $row['color'];
$red= 'red';
$orange='orange';
$green='green';
if ($answer == $red)
{
$counterRed++;
}
if($answer == $orange)
{
$counterOrange++;
}
if($answer == $green)
{
$counterGreen++;
}
$Colorcounter;
}
mysqli_close($con);
JavaScript Libraries :-
<script src="../../js/jquery.flot.js"></script>
<script src="../../js/jquery.flot.stack.js"></script>
<script src="../../js/jquery.flot.valuelabels.js"></script>
<script src="../../js/jquery.flot.categories.min.js"></script>
Here is my JavaScript code:-
(function($) {
var series = [{
// Data needs to be displayed in te Stacked Bar.
// counterRed : to count the color for Red
data: [[ 1,<?php echo $counterRed; ?>] ],
valueLabels: {
show: true,
valign: 'middle'
} ,
label: "Red" ,
color:'#2AD457'
},
{
//counterOrange to count the color for Orange
data: [[1,<?php echo $counterOrange; ?>] ],
valueLabels: {
show: true,
valign: 'middle'
} ,
label: "Orange" ,
color:'#FFC200'
}, {
// CounterGreen : to count the Color for Green.
data: [[1,<?php echo $counterHigh; ?>] ],
//ValueLables used to show the values of color into each series of the bar.
valueLabels: {
show: true,
valign: 'middle'
} ,
label: "Green" ,
color:'#FA0509'
}];
var options = {
xaxis: {
minTickSize: 1
},
series: {
bars: {
show: true,
barWidth: .8,
align: "center"
},
stack: true
}
};
$.plot("#placeholder", series, options);
})(jQuery);