Get stats and show it in chart - PHP/HighCharts - php

I have a table called "tracks",it looks like this:
id,
name,
url
hits
I have a pie charts, from highcharts, the code looks like this:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Where users came from, total'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox.com', 45.0],
['Default.com', 26.8],
['MSN', 12.8],
['Google.com', 8.5],
['Yahoo.com', 6.2],
['Others', 0.7]
]
}]
});
});
My question is, how can I get data from the "tracks" table (hits), and the (name) and output it in the pie chart like:
'name','hits'
And then, at last, convert # of hits, to %.

series: [{
type: 'pie',
name: 'Browser share',
data: [
<?php
$sql = 'select sum(hits) from tracks';
$result = mysql_query($sql);
$row = mysql_fetch_row($result);
$totalHits = $row[0];
$sql = 'select name, hits from tracks order by hits desc';
$result = mysql_query($sql);
$i = 0;
$totalOther = 0;
$maxSlices = 5;
$minPercent = 10;
while ($row = mysql_fetch_row($result))
{
$percent = row[1] / $totalHits * 100;
if (++$i <= $maxSlices && $percent >= $minPercent)
{
echo json_encode($row);
}
else
{
$totalOther += $row[1];
}
}
if ( $totalOther > 0 ) echo json_encode(array('Other', $totalOther));
?>
]
}]
if you want to refresh it thourgh ajax...
...
series: [{
type: 'pie',
name: 'Browser share',
data: getData(function(result) {return result;}),
...
and
function getData(setDataCallback)
{
$.getJSON('file.php', args, function(result) { // use of jquery for clarity.
setDataCallback(result);
});
}
in php you have to do a new file ('file.php') with the code shown in the first code block;

Simplest way is to query data from mySql and then sort it same as
[
['Firefox.com', 45.0],
['Default.com', 26.8],
['MSN', 12.8],
['Google.com', 8.5],
['Yahoo.com', 6.2],
['Others', 0.7]
]
Requires if you want to show chart just on page loading.
You can also use JSON.

Related

How do i get date and time in points highchart?

I plot highcharts on my page.
This works great but i have one little problem that in my points when i hover with my mouse on it, i get no date and time with it.
This is what my json is like.:
[{"metingen":"metingen","Datum":"Datum","data":["5-9-2022",14.6,"5-9-2022",14.8,"6-9-2022",15.948,"6-9-2022",17.112,"6-9-2022",
My chart look then like this.:
You see on the left the baloon, it show the number 0: 14.6.
14.6 is the value, thats good but the 0 is number of that value sutch as another point, that gives
But how can i show the date and time thats belong with that number in the baloon?
My chart code is this.:
$.getJSON("mfrmetingen300RG.json", function(data) {
const processedData9 = [];
for (let a = 0; a < data[0].data.length; a += 2) {
processedData9.push([data[0].data[a], data[0].data[a + 1]]);
}
data[0].data = processedData9;
avg = <?php echo $rowj[0]; ?>;
StDev = <?php echo $rowj[1]; ?>;
Aantalwaarden9 = <?php echo $rowj[2]; ?>;
//Cp=(USL-LSL)/(6xstd.Dev) see.:https://www.easycalculation.com/statistics/learn-cp-cpk-calculator.php
//Cpk = (USL-gemiddelde) / (3 x std.Dev) of (gemiddelde-LSL) / (3 x std.Dev)
cpkl1 = (<?php echo $_cpkh10waarde; ?>-<?php echo $_cpkl10waarde; ?>)/(6*StDev);
Cpk1High = (<?php echo $_cpkh10waarde; ?>-avg)/(3*StDev);
Cpk1Low = (avg-<?php echo $_cpkl10waarde; ?>)/(3*StDev);
chart9 = new Highcharts.Chart('container9',{
chart: {
zoomType: 'x',
type: 'line',
marginRight: 130,
marginBottom: 100,
backgroundColor:'azure'
},
rangeSelector: {
buttons: [{
text: '+',
events: {
click() {
return false
}
}
},
{
text: '-',
events: {
click() {
return false
}
}
}]
},
title: {
useHTML: true,
text: "Gemeten MFR waarde van PP 300R Grey Extrusie over de laatste "+(Aantalwaarden9)+" waarden.",
x: -20 //center
},
credits: {
enabled: false
},
subtitle: {text: 'Gem.='+avg.toFixed(2)+' Stdev='+StDev.toFixed(2)+' Cp='+cpkl1.toFixed(2)+' Cpk_High='+Cpk1High.toFixed(2)+' Cpk_Low='+Cpk1Low.toFixed(2)+'',x: -20},
xAxis: {
uniqueNames: false,
type: 'category',
title: {
text: 'Datum'
}
},
yAxis: {
"min":15,
"max":23,
title: {
text: 'MFR'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
plotLines: [{value: <?php echo $_cpkl10waarde; ?>,color: <?php echo $_color_min_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}},
{value: <?php echo $_cpkh10waarde; ?>,color: <?php echo $_color_max_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}},
{value: <?php echo $_cpkm10waarde; ?>,color: <?php echo $_color_guide_line; ?>,dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn'}},
{value: avg.toFixed(2),color: <?php echo $_color_avg_line; ?>,dashStyle: 'spline',width: 2,label: {text: 'Avg'}},
]
},
tooltip: {
formatter: function() {
return '<b>Meetwaarden</b><br/>'+ this.x +': '+ this.y;
}
},
legend: {layout: 'vertical',align: 'right',verticalAlign: 'top', x: -100,y: 0,floating: true,borderWidth: 0},
series: data,
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
});
chart9.legend.allItems[0].update({name:'MFR'});
}, 1000);
});```
Because you have category type xAxis, your category name is contained in point.key variable. So, based on your example, you only need to refer to this.key
tooltip: {
formatter: function() {
return '<b>Meetwaarden</b><br/>'+ this.key +': '+ this.y;
}
},
Simplified Demo:
https://jsfiddle.net/BlackLabel/87bousnL/
API Reference:
https://api.highcharts.com/highcharts/tooltip.headerFormat

Line Chart using Chart js with time data

I am creating a line chart using chartJs by passing date at X-Axis and time (mm:ss) at Y-Axis. I am not sure how to use chartJs with time values.I tried different solutions from stack but none works in my case.
Here is json file
{"label":["08-Aug-2019","11-Aug-2019","22-Aug-2019","25-Aug-2019"],"time":["1:08","1:44","2:27","1:02"],"chart_data":"{\"label\":[\"08-Aug-2019\",\"11-Aug-2019\",\"22-Aug-2019\",\"25-Aug-2019\"],\"time\":[\"1:08\",\"1:44\",\"2:27\",\"1:02\"]}"}
Here is what i am trying to code
<div id="time_chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script>
let sData = JSON.parse('<?php echo $chart_data; ?>');
let time_ctx = $("#time-chart");
//Line Chart
var time_data = {
labels: sData.label,
datasets: [
{
label: sData.label,
data: sData.time
}
]
};
//options line chart
var time_options = {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
scales: {
yAxes: [{
type: 'time',
time: {
parser: 'm:s',
unit: 'minute',
unitStepSize: 2,
min: '0:0',
max: '30:00',
displayFormats: {
'seconds': 'm.s'
}
},
ticks: {
callback: function(value, index, values) {
//Ticks reverse does not work with time axes so we have to revert in this callback
if (values[values.length - index] != undefined) {
return moment(values[values.length - index].value).format('m.s');
}
}
}
}]
}
};
var chart2 = new Chart(time_ctx, {
type: "line",
data: time_data,
options: time_options
});
</script>
This is what I am getting with this code:
Although I didn't manage to use a time axis for both the x- and y-axes, I managed to create a workaround with a timed x-axis and a linear y-axis.
I parse your time and return the time in seconds (integer). I use this value to display your time and change the format back to mm:ss.
I hope this is what you wanted. I'm not sure you want the axes this way (because in your code you use the y-axis as type "time").
PS: My first post, please feel free to tell me what I can improve.
JSFiddle: https://jsfiddle.net/5837nmyo/
JSBin: https://jsbin.com/yadixolica/1/edit?html,js,output
let sData = {}
sData.label = ["08-Aug-2019","11-Aug-2019","22-Aug-2019","25-Aug-2019"]
sData.time = ["1:08","1:44","2:27","1:02"]
let chartData = {}
chartData.label = sData.label
chartData.time = parseTimeToSeconds(sData.time)
function parseTimeToSeconds(times){
let regex = /(\d*):(\d{2})/gm
let parsedTime = []
for (let x = 0; x < times.length; x++) {
let match = regex.exec(times)
parsedTime.push(parseInt(match[1])*60 + parseInt(match[2]))
}
return parsedTime
}
let time_ctx = document.getElementById('time_chart');
let time_data = {
labels: chartData.label,
datasets: [{
label: chartData.label,
data: chartData.time
}]
};
let time_options = {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data){
let value = parseInt(tooltipItem.value)
if (value%60 < 10)
return Math.floor(value/60) + ":" + 0 + value%60
else
return Math.floor(value/60) + ":" + value%60
}
}
},
scales: {
xAxes: [{
type: 'time'
}],
yAxes: [{
ticks: {
min: 0,
max: 1800,
stepSize: 120,
callback: function(value, index, values) {
if (value%60 < 10)
return Math.floor(value/60) + ":" + 0 + value%60
else
return Math.floor(value/60) + ":" + value%60
}
}
}]
}
};
let chart2 = new Chart(time_ctx, {
type: "line",
data: time_data,
options: time_options
});

Pass php variable in bar graph with highcharts

I have a bar graph made with highcharts that display properly, data are from mysql table. I would like to pass value i mean : ($category['data'][] = $r['Assign_To']) in each bar as variable so that when i click on a bar this value contained in variable is taken to a new page in order to use it in that page. The exemple given in highcharts website doesn't fit me because i use data from table.
1- this is the graph
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'EOP Postings Issues Chart',
x: -20 //center
},
credits: {
enabled: false
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Requests'
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("DataEobChart.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
DataEobChart.php
$dbc = #mysqli_connect('', '', '', '');
$query = mysqli_query($dbc, "select *, count(Assign_To) as count,Assign_To from claims_follow_up.eob_posting where Status='open' group by Assign_To order by count desc");
$category = array();
$category['name'] = 'Month';
$series1 = array();
$series1['name'] = 'Number of issues assigned';
while($r = mysqli_fetch_array($query)) {
$category['data'][] = $r['Assign_To'];
$series1['data'][] = $r['count'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($dbc);
Add a new section to your HighCharts definition called plotOptions containing this code:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (event) {
var index = event.point.index;
var Assign_To = options.xAxis.categories[index];
alert(Assign_To);
location.href = "NewPage.php?AssignTo=" + Assign_To;
}
}
}
}
},
This provides a click event handler which will figure out which options.xAxis.categories[] item to use based on which bar was clicked. It will then alert the result and then take the user to a page called NewPage.php with a request string called AssignTo.

How can I extract data from php and mysql for column and spline chart in highchart

I try to make a combo chart of column with spline highchart. I want this type of chart from highcharts [link] http://jsfiddle.net/sunman/dwyNz/8/. But here is my problem is I want to show my dynamic data both spline and column chart which comes from data.php using json for data retrieve. But my graph will not show properly like this [link] http://jsfiddle.net/sunman/dwyNz/8/ .
I want this type of graph through my code.in spline line I want to show 'bsp values' from query1 and in column chart I want to facility rating. Here is my code where I extract data through json:-
data.php
$query1 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id= superfac_rating.project_id ");
$category = array();
$category['name'] = 'Project';
while($row1 = mysql_fetch_array($query1)) {
$category['data'][] = $row1['Project_name'];
$series1['data'][] = $row1['faci_total'];
}
$query2 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id= superfac_rating.project_id
LEFT OUTER JOIN cost ON gsuperfac_rating.project_id=cost.project_id ");
$series1 = array();
$series1['name'] = 'Project Name';
$series2 = array();
$series2['name'] = 'BSP VALUES';
while($row2 = mysql_fetch_array($query2)) {
$series1['data'][] = $row2['faci_total'];
$series2['data'][] = $row2['bsp'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
Here I am design for graph:
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Project facility Rating'
},
subtitle: {
text: 'testing'
},
xAxis: [{
categories: []
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value} Rs.',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Bsp Cost',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Facility Rating',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
//format: '{value} out of 100',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: json
});
});
});
});
so tell me why my json code not create a graph ..

Flot Charts using SQL Server db with multiple y axis

This is my first post, apologies if I've asked a question a number of people have already done so. I don't see the answer I need in other posts.
I'm using Flot Charts and have a SQL Server db, I've got a php file that will connect to the db and return all the values within the sql in an array.
<?php
$server = "XXXX";
$database = "XXXX";
$user = "ReportsUser";
$pwd = "ReportsUser";
$cnn = odbc_connect("Driver={SQL Server Native Client 10.0};Server=$server;Database=$database;", $user, $pwd);
if(!$cnn)
{
echo "error in connecting";
}
$sql = odbc_exec($cnn, "
SELECT Months
,Referrals
,ProjectedVol
FROM mis.ReferralsBudgetvsActual
WHERE Months <= MONTH(GETDATE())
");
while($result = odbc_fetch_array($sql))
{
$allreferrals[] = array($result['Months'],$result['Referrals'],$result['ProjectedVol']);
}
echo json_encode(($allreferrals), JSON_NUMERIC_CHECK);
exit;
?>
This works well and produces the array as below
[[1,5981,7465],[2,5473,6962],[3,4974,7391],[4,5731,6985],[5,5891,7080],[6,5168,7136],[7,5551,7543],[8,4427,7242],[9,4617,7204],[10,4807,7642]]
Now, when it all comes together in the jquery file, this is where I end up getting stuck. I don't see where it pulls any other columns back apart from the first data column, how can this be done?
// document ready function
$(document).ready(function() {
var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
// function for refreshing shiftstats chart
make_chart();
function make_chart() {
$.ajax({
cache: 'false',
type: 'GET',
dataType: 'json',
url: "test.php",
success: function(data) {
var d1 = data;
var d2 = data;
//define placeholder class
var placeholder = $(".shifts-chart");
//graph options
var options = {
grid: {
show: true,
aboveData: true,
color: "#3f3f3f" ,
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20
},
series: {
grow: {
active: false,
stepMode: "linear",
steps: 50,
stepDelay: true
},
lines: {
show: true,
fill: false,
lineWidth: 4,
steps: false
},
points: {
show:true,
radius: 5,
symbol: "circle",
fill: true,
borderColor: "#fff"
}
},
legend: {
position: "ne",
margin: [0,-25],
noColumns: 0,
labelBoxBorderColor: null,
labelFormatter: function(label, series) {
// just add some space to labes
return label+' ';
}
},
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: chartColours,
shadowSize:1,
tooltip: true, //activate tooltip
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
}
}
};
$.plot(placeholder,
[{
label: "Referrals",
data: d1,
lines: {fillColor: "#f2f7f9"},
points: {fillColor: "#88bbc8"}
},
{
label: "ProjectedVol",
data: d2,
lines: {fillColor: "#f2f7f9"},
points: {fillColor: "#88bbc8"}
}
], options);
}
});
}
});
Thanks
You'll need to change your php array creation to properly format the data into two series:
$d1 = array();
$d2 = array();
while($result = odbc_fetch_array($sql))
{
array_push($d1, array($result['Months'], $result['Referrals']));
array_push($d2, array($result['Months'], $result['ProjectedVol']));
}
$allreferrals = array($d1, $d2);
echo json_encode(($allreferrals), JSON_NUMERIC_CHECK);
This should return it as an array of arrays:
[
[[1,5981],[2,5473],[3,4974],[4,5731],[5,5891],[6,5168],[7,5551],[8,4427],[9,4617,7204],[10,4807]],
[[1,7465],[2,6962],[3,7391],[4,6985],[5,7080],[6,7136],[7,7543],[8,7242],[9,7204],[10,7642]]
]
(Hopefully I have the syntax correct, I'm not a fan of php)
Update from comment
If you are returning a slew of series, you might be better returning an associative array from PHP:
$allreferrals = array('ref' => array(), 'projVol'=> array());
while($result = odbc_fetch_array($sql))
{
array_push($allreferrals['ref'], array($result['Months'], $result['Referrals']));
array_push($allreferrals['projVol'], array($result['Months'], $result['ProjectedVol']));
}
echo json_encode(($allreferrals), JSON_NUMERIC_CHECK);
Then back in the javascript:
$.plot(placeholder,
[{
label: "Referrals",
data: data["ref"]
},
{
label: "ProjectedVol",
data: data["projVol"]
}],
options);

Categories