formatting date in a morris chart with php mysql data - php

i am just trying to make my date appear "M d, Y" in my morris chart ... i am getting all of the data over correctly, but i can't seem to format the date how i want ... can anybody help?
here is my code:
$get_bar_scores = "SELECT * FROM user_rounds WHERE user_id = '".$row_user['user_id']."'";
$run_bar_scores = mysqli_query($con, $get_bar_scores); ?>
<script>
$(function(){
Morris.Line({
element: 'line-score',
data: [
<?php while($row_bar_scores = mysqli_fetch_array($run_bar_scores)) { ?>
{
y: '<?php echo $row_bar_scores['date_played']; ?>',
a: '<?php echo $row_bar_scores['total']; ?>',
},
<?php } ?>],
xkey: 'y',
ykeys: ['a'],
labels: ['Score'],
lineColors:['#16a085','#FF0066']
});
})
</script>
like i said, all of the info is appearing correctly, i would just like to have the date to show up cleaner ... i have tried: date("M d, Y", strtotime($row_bar_scores['date_played'])); but to no avail.
any and all help is greatly appreciated!! thanks!!

First, you should explicitly select your columns...but that's another topic.
"SELECT DATE_FORMAT(date_played,'%M %d %Y') as date_played FROM user_rounds WHERE user_id =...

Related

How to create Chart with 2 variables (x,,y)

I am looking forward chart like this https://i.stack.imgur.com/a6dAq.png with this code
php + html:
$sql = "SELECT val1 , val2 ,t
FROM DvojeHodnoty
INNER JOIN Pristroje ON DvojeHodnoty.dev_name = Pristroje.dev_name
WHERE t>'$startdate2' AND t< '$enddate2' AND Pristroje.nazev_pristroje='$pristroj' order by val1 asc;";
$result = mysqli_query($connection, $sql);
while ($row = mysqli_fetch_array($result))
{
$t = $t.'"'.date('d.m.y H:i:s', $row['t']/1000).'",';
$hodnota = $hodnota.'"'.$row['val1'].'",';
$hodnota2 = $hodnota2.'"'.$row['val2'].'",';
}
$start = date('d.m.y', $startdate2/1000);
$end = date('d.m.y', $enddate2/1000);
$t = trim($t,",");
$hodnota = trim($hodnota,",");
$hodnota2 = trim($hodnota2,",");
}
<div id="chart-container" style="background: white">
<canvas id="chart"></canvas>
<script>
var ctx =document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
type:'line',
data: {
labels: [<?PHP echo $hodnota2; ?>],
datasets:
[
{
label: '<?PHP echo $start;?> - <?PHP echo $end; ?> Přístroj: <?PHP echo $pristroj;?> ',
data: [<?PHP echo $hodnota; ?>],
backgroundColor:'transparent',
borderColor:'rgba(255,99,132)',
borderWidth: 3
}]
},
options: {
scales: {
yAxes:[{
scaleLabel: {
display: true,
labelString: 'σ',
fontSize: 20
}
}],
xAxes:[{
scaleLabel: {
display: true,
labelString: 'ε',
fontSize:20
}
}]
}
}
})
</script>
</div>
but so far I got only this https://i.stack.imgur.com/Ri8Ho.png.
I don't know how to create chart with two variables, I tried scatter but so far I am stuck with no ability to create graph with x,y line as values. Is there any easy way to create chart with two variables? If so can you help me/ give me some documentation? (I've seen one scatter chart with fix values, but I am not able to do it with php echo (with values from database) since I need to have variable values since user will choose values depends on chosen date. So far I got only 1 value (y) and two values but with text (numbers counted as text not as value) so chart looks weirdly (0,1,-1 still on same line not like normal graph showned up).
The problem was that data type was VARCHAR and for sorting it I need INT. Problem solved

Morris.js chart design fix

I have a problem I am able to change my Morris.js Chart to bar graph to line graph the problem is the design of the line graph. Please refer to the two (2) screen shots to see what I meant. When I switch the graph into a line graph the graphical representation of data is messed up. How can I fix this?
Bar Graph
Line Graph
PHP Code I used :
$sql = "SELECT MONTHNAME(date) AS date, SUM(sales) AS sales FROM tblSales WHERE YEAR(date)=YEAR(now()) GROUP BY MONTHNAME(date)";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
$ar[] = array(
'month' => $row['date'],
'sales' => $row['sales']
);
}
ob_clean();
echo json_encode($ar);
AJAX Code I used :
var statement = 1;
$.ajax ({
url:"show_total_overall_sales.php",
data: "statement="+statement,
method: "POST",
success: function(branch_data){
new Morris.Line({
element: 'total-sales',
data: JSON.parse(branch_data),
xkey: 'daily',
ykeys: ['sales'],
labels: ['Total Sales'],
hideHover: 'auto'
});
}
});
Maybe you can try to use parseTime:false

Not able to generate a line in graph with mysql database connected with chartist.js library?

I am using the chartist.js library for making graphs. I didn't found a single example of it with MYSQL example. So, taking help different libraries codes available online I am trying to insert numerical values as array as in labels(which is static though). But not able to generate graph.
Hoew to solve this problem.
The page is filled with values of X and Y axis but no line is getting drawn when entered in browser.
The debugger says
TypeError: this.data.series[i][m] is undefined chartist.min.js:7:17185
Use of Mutation Events is deprecated. Use MutationObserver instead.
code:
<head>
<script src="../_js/chartist.min.js"></script>
<link href="../_css/chartist.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Daily performance-- Aspect ratio containers</title>
<?php
$con=mysqli_connect("// due connectn attributes");
if(mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * from Score_result");
$row = mysqli_fetch_array($result, MYSQLI_NUM);
$player1 = array_column($row,"Player1");
$player2 = array_column($row,"Player2");
mysqli_close($con);
?>
</head>
<body>
<div class="ct-chart ct-golden-section"></div>
<script>
new Chartist.Line('.ct-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[<?php echo implode(',',$player1); ?>],
[<?php echo implode(',',$player2); ?>]
]
});
</script>
</body>
</html>
I've used ChartJS before, however, i did not use json so i'm unsure what might be wrong with your code.
I pulled this out of the script i wrote where I implemented a bar chart. In this code the variable video_statistics is a multidimensional array contains data in the following form:
Month | Premium Users | Total Users
___________________________________
March | 8 | 12
April | 15 | 32
May | 13 | 27
Code:
<?php
$months = array_column($video_statistics,"month");
$premium_users = array_column($video_statistics,"premium_users");
$total_users = array_column($video_statistics,"total_users");
?>
<script type="text/javascript">
$( document ).ready(function() {
var data = {
labels: [<?php echo implode(',',$months);?>],
datasets: [
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [<?php echo implode(',',$total_users); ?>],
title : 'Total Users'
},
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [<?php echo implode(',',$premium_users); ?>],
title : 'Premium Users'
}
]
}
var cht = document.getElementById('videoChart');
var ctx = cht.getContext('2d');
var barChart = new Chart(ctx).Bar(data);
});
</script>
<canvas id="videoChart" width="400" height="400"></canvas>
The code was working in the script but i haven't tested it in this form. I hope it helps.

Getting Data from PHP, JSON Highcharts?

Hi I am trying to get data from MySql table and show the data in Highcharts by using PHP and Json
I have try the example from internet and it is working fine but when I try to get data from my file it show nothing.
What I am trying to do:
I am creating table of office attendance system and trying to show record day by day. So at y axis I want to count names of employees and x axis the date of attendance.
Problem: Nothing Is show from mu json.
Here is what my Json looks like:
[["Hamza","07\/04\/2014"],
["Junaid","07\/04\/2014"],
["Usman","07\/04\/2014"],
["Rajab","07\/04\/2014"],
["Hamza","08\/04\/2014"],
["Junaid","08\/04\/2014"],
["Usman","08\/04\/2014"],
["Rajab","08\/04\/2014"]]
I am having to value names and dates.
My PHP which is creating my Json code:
// Set the JSON header
header("Content-type: text/json");
$result = mysqli_query($con,"SELECT * FROM attendence");
$a=array();
while($row = mysqli_fetch_array($result)) {
$row['name'] . "\t" . $row['date']. "\n";
$b=array();
array_push($b,$row['name']);
array_push($b,$row['date']);
array_push($a,$b);
}
echo json_encode($a);
and this is my Jquery code:
$(function() {
$.getJSON('highchart.php', function(data) {
// Create the chart
$('#chart').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#chart').width() > 480
},
title : {
text : 'Attendence'
},
series : [{
name : 'Empolyees',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
In the json_encode() you need to use JSON_NUMERIC_CHECK flag to avoid use string in your JSON
In the highstock you need to have timestamps and value, not name and date.
Dates should be timestamp, and as first element in array, not second as you have.
If you want to get a count of all people on a given day, you need to write a SQL query that returns that information. Assuming that date field is a datetime type and name is of varchar type:
SELECT COUNT(name) FROM attendence GROUP BY DATE(date);
perhaps you need to define what kind of data your x-axis will have
take a look at this fiddle (taken from highcharts website)
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 2, 1), 71.5],
[Date.UTC(2010, 3, 1), 106.4]
]
}]
});
});

multidatespicker with disabled dates from php variable

I'm trying to get the holidays from a php function and using them to disable dates for my multidatepicker.
Using jquery multidatespicker from: http://multidatespickr.sourceforge.net/
//php:
$holidays = show_holidays($year, $province);
which then $holidays echo's as:
['01/01/2014','02/17/2014','04/18/2014','05/19/2014,'07/01/2014','08/04/2014','09/01/2014','10/13/2014','12/25/2014','12/26/2014']
my js:
var holidays = "<?php echo $holidays; ?>";
$('#with-altField').multiDatesPicker({
addDisabledDates: holidays,
altField: '#vacationdays',
beforeShowDay: $.datepicker.noWeekends
});
and it doesn't disable the dates...
firebug shows error : uncaught exception: Missing number at position 0
Sorry all, i figured it out... i had to put it in array and remove the [ ] from php var:
changed:
var holidays = "<?php echo $holidays; ?>";
to
var holidays = [ <?php echo $holidays; ?> ];
and it works now...

Categories