I'm hoping someone can help me here, I've been looking at highcharts as a way of graphing my dynamic data from my sql db....What I've come up with so far is below, it's strange, it seems correct, the data is correct, however, I can't get my chart to render, now I've tried viewing the chart through both Chrome and IE but with no results, can anyone see where I might've gone wrong, or where there is an error...my data is passing into the JS arrays, so there's an issue with the rendering end... Any help would be much appreciated. I have closed off my html tag, but for some reason it isn't displaying in this post...if anyone has any suggestions I would be happy to hear them!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='highcharts.js' type='text/javascript'> </script>
<script src='exporting.js' type='text/javascript'> </script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script>
</head>
<body>
<?php
include "connect_db.php";
$SQL1 = "SELECT review.reviewForum AS reviewForum,
COUNT(CASE WHEN mom.result = 'Approved' THEN 'yes' ELSE NULL END) AS Approved,
COUNT(CASE WHEN mom.result = 'NOT Approved' THEN 'yes' ELSE NULL END) AS Not_Approved,
COUNT(CASE WHEN mom.result = 'Cancelled' THEN 'yes' ELSE NULL END) AS Cancelled
FROM review INNER JOIN mom ON mom.reviewId = review.reviewId GROUP BY review.reviewForum";
$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['reviewForum'];
}
$result2 = mysql_query($SQL1);
$data2 = array();
while ($row = mysql_fetch_array($result2)) {
$data2[] = $row['Approved'];
}
$result3 = mysql_query($SQL1);
$data3 = array();
while ($row = mysql_fetch_array($result3)) {
$data3[] = $row['Not_Approved'];
}
$result4= mysql_query($SQL1);
$data4 = array();
while ($row = mysql_fetch_array($result4)) {
$data4[] = $row['Cancelled'];
}
?>
<script type="text/javascript">
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'TC REVIEW RESULT STATS'
},
xAxis: {
categories: [<?php echo join($data1, ',') ?>],
},
yAxis: {
min:0
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 35,
floating: true,
shadow: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ {
name: 'Approved',
data: [<?php echo join($data2, ',') ?>],
pointStart: 0
//pointInterval
},
{
name: 'Unapproved',
data: [<?php echo join($data3, ',') ?>],
pointStart: 0
//pointInterval
},
{
name: 'Cancelled',
data: [<?php echo join($data4, ',') ?>],
pointStart: 0
//pointInterval
},
]
});
});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
I suggest you start trying to render one without generated code. If that doesnt work, you might want to share that on jsfiddle and we can have a look :-). If it does work, you should compare it with the generated code.
{
name: 'Cancelled',
data: [<?php echo join($data4, ',') ?>],
pointStart: 0
//pointInterval
}, // This comma is a syntax error
]
Do you see that comma? You don't put commas before '}', because you have that in multiple places.
Take out the comma after the categories statement under xAxis.
xAxis: {
categories: [<?php echo join($data1, ',') ?>],
},
Should be
xAxis: {
categories: [<?php echo join($data1, ',') ?>]
},
I think thre real reason is here:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script>
<script src='highcharts.js' type='text/javascript'> </script>
<script src='exporting.js' type='text/javascript'> </script>
First load jQuery, then Highcharts.
Related
I am new to web programming, I have personal project to track expenditure.
Straight to the point, I have database data contains this month and last month total expenditure. I am able to show it manually (by echo). But i can't pass the value to highcharts series. Due to many small separate data, i want to populate it manually using php/mysql rather than json.
Graph2.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "mypassword";
$mysql_database = "mytraining";
$bd = mysqli_connect($mysql_hostname, $mysql_user, $mysql_password, $mysql_database);
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$query2 = "select year(date) as y, month(date) as m, sum(amount) as p from expenditure_bak group by year(date), month(date) order by m ASC";
$sth = mysqli_query($bd, $query2);
$rows = array();
$rows['name'] = 'Revenue';
while($r = mysqli_fetch_array($sth)) {
$rows['data'][]= round($r['p'],2);
}
//echo join($rows['data'], ','); //able to display correct value 660.2,60
?>
PopupGraph.html
<?php
include('graph2.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Monthly Expenditure</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Expenditure'
},
xAxis: {
categories: ['Jun', 'Jul']
},
yAxis: [{
min: 0,
title: {
text: ''
}
}, {
min: 0,
opposite: false, //optional, you can have it on the same side.
title: {
text: 'Average'
}
}
],
labels: {
items: [{
html: 'Monthly Expenditure',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y
/*+ '<br/>' + 'Total: ' + this.point.stackTotal*/;
}
},
series: [{
type: 'spline',
name: 'Average',
yAxis: 1, //to make y axis
//data: [660.2,60], //able to show correct graph with static input
data: [<?php echo join($rows[data], ',') ?>],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
So, what is the correct code to be put inside data: [] in the highcharts series.
Output should be like JSFiddle but using dynamic data from database obviously.
Finally, I want to display something like
Expenditure Tracking
You will likely need to encode your data. I recommend that you take a look at the answer from here Pass a PHP array to a JavaScript function. Based on this, you should be able to do something like this:
JSON.parse(<?php echo json_encode(join($rows[data], ',')) ?>);
then you should be able to get the result that you want. You might not need the JSON.parse.
have a problem when i choose the start date and end date in datepicker to display the data in highchart, the data in highchart is display alll data..so plaese some body to fix it. thank u
this's my source code
<script>
function dialogbx(){
myDialogBox('9');
}window.addEventListener("load",dialogbx);
</script>
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: 'Type Grafik : Column'
},
xAxis: {
categories: [
<?php
$sql2 = "SELECT * FROM pinjaman WHERE $filterPeriode GROUP BY tgl_pinjam ";
$query2 = mysql_query( $sql2 ) or die(mysql_error());
while($ret2=mysql_fetch_array($query2)){
$tahun = $ret2['tgl_pinjam']; ?>
'Tanggal <?php echo $tahun; ?>',
<?php } ?>
] ,
},
yAxis: {
title: {
text: 'Jumlah Pinjaman (Rupiah) '
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
<?php
include('../library/inc.connection.php');
$query1=mysql_query("select kd_jenis from pinjaman where $filterPeriode && level ='1' group by kd_jenis");
while($array1=mysql_fetch_array($query1)){
$kdjenis = $array1['kd_jenis'];
?>
{
name: '<?php echo $kdjenis; ?>',
data: [<?php $query3 = mysql_query("select * from pinjaman WHERE $filterPeriode && level ='1' group by tgl_pinjam ");
while($array3 = mysql_fetch_array($query3)){
$query4 = mysql_query("select kd_jenis,SUM(jumlah_pinjam) from pinjaman where kd_jenis='$kdjenis' &&
$filterPeriode && level ='1' group by kd_jenis ");
while( $data = mysql_fetch_array( $query4 ) ){
$jumlah = $data['SUM(jumlah_pinjam)'];
}
echo $jumlah.",";
} ?>]
},
<?php } ?>
]
});
});
</script>
im trying to populate my xaxis using only data stored in the array $date[]
this is my coding;
<?php
// Main query to pull data from 'tests' table
$sql = "SELECT UNIX_TIMESTAMP(`date`)*1000 AS unixDate,`date`, `test1`, `test2`, `test3`, `test4`, `test5`, `test6`, `test7`, `test8`, `test9`, `test10`, `test11`, `test12`, `test13`, `test14` FROM `tests` WHERE member_id = '1' ORDER by `date` ASC";
$result = mysql_query($sql) or die ("no query");
// Dataset#1
while($row = mysql_fetch_assoc( $result )) {
$dataset1[] = array( $row['unixDate'], sprintf( "%.3f", $row['test1'] ));
$date[] = array($row['unixDate']);
}
?>
<div id="chart1Canvas" style="width:510px;height:200px;">
<div id="chart1" style="width:500px;height:200px;"></div></div>
<script type="text/javascript">
//START CHART#1
var dateArray = [ <?php echo json_encode($date); ?> ];
var chart1Options = {
xaxis: {show: true, mode: "time", timeformat: "%y-%m-%d", ticks: dateArray},
yaxis: {show: true, min: 1.000, max: 1.050, tickDecimals: 3 },
lines: {
show: true,
fill: true,
fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.2}] }
},
points: { show: true, radius: 1 },
grid: {
show: true,
color: '#fff',
backgroundColor: false,
borderWidth: 0,
hoverable: true,
clickable: true }
};
function getTooltip(label, x, y) {
return "Your sales for " + x + " was $" + y; }
var dataset1 = { data: <?php echo json_encode($dataset1); ?>, color: 'white'};
$.plot($("#chart1"), [ dataset1 ], chart1Options);
//END CHART#1
</script>
when i run this my entire xaxis dissapears, i assumed i have to JSON_encode the date[] array before assigning it to the 'ticks' option for my xaxis?
can someone check what i have done wrong here?
thank you.
edit: changed something and now its doing something, but still no grid and labels for xaxis?
check link: http://www.myreeftests.com/graphs2.php
Your dateArray looks like this:
var dateArray = [ [["1367704800000"],["1367791200000"], ...
but it has to look like this:
var dateArray = [1367704800000,1367791200000, ...
So remove the outer [ ] in the javascript and format the timestamps as longint instead of as arrays of a string (not sure how to do that in php).
See the documentation for more information.
ok so with messing around i managed to get it to show the correct ticks using an array, last problem is formating the ticks to space out evenly;
[link]http://www.myreeftests.com/graphs2.php
This is my Table structure
Here is my code: <br/>
<?php
$result_journ = mysql_query("SELECT jour_id, journal FROM journals");
$count_result = mysql_num_rows($result_journ);
while ($row_sd = mysql_fetch_array($result_journ)) {
$data_sd = $row_sd['jour_id'];
$namee= $row_sd['journal'];
?>
<script type="text/javascript">
$(function () {
$('#container_journal').highcharts({
xAxis: {
categories: [<?php
$test_q = mysql_query("SELECT jour_id, year FROM journ_graph WHERE jour_id = '$data_sd'");
while($row_q = mysql_fetch_array($test_q)){
$year_q = $row_q['year'];
echo $year_q.',';
}?>
]
},
yAxis: {
title: {
text: 'Citations'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '<?php echo $namee; ?>',
data: [<?php
$sql= "SELECT `citations`, `jour_id` FROM `journ_graph` WHERE `jour_id` = '$data_sd'";
$result=mysql_query($sql);
$row = mysql_fetch_array($result);
echo $cita = $row['citations'].',';
?>]
}]
});
});
</script>
<?php
}
?>
The Result:
This is the result I am getting.
The expected Result:
The while loop is getting only one row. What would be the problem? Please help.
The while loop is getting only one row. What would be the problem? Please help.
Update Result:
Checkbox select
You are reinitializing the highcharts on each iteration of first while. Try the following code:
<?php
$result_journ = mysql_query("SELECT jour_id, journal FROM journals");
$count_result = mysql_num_rows($result_journ);
$categories = "";
$cita = array();
$count=0;
while ($row_sd = mysql_fetch_array($result_journ))
{
$data_sd = $row_sd['jour_id'];
$cita[$count]['name'] = $row_sd['journal'];
$test_q = mysql_query("SELECT jour_id, year FROM journ_graph WHERE jour_id = '$data_sd'");
while ($row_q = mysql_fetch_array($test_q))
{
$year_q = $row_q['year'];
$categories .= $year_q . ',';
}
$sql = "SELECT `citations`, `jour_id` FROM `journ_graph` WHERE `jour_id` = '$data_sd'";
$result = mysql_query($sql);
// I have added this while block thinking that you might have more than one rows
while ($row = mysql_fetch_array($result))
{
$cita[$count]['data'][] = $row['citations'];
}
$count++;
}
?>
<script type="text/javascript">
$(function () {
$('#container_journal').highcharts({
xAxis: {
categories: [<?= $categories ?>]
},
yAxis: {
title: {
text: 'Citations'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: <?= json_encode($cita, JSON_NUMERIC_CHECK) ?>
});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>
<script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'> </script>
</head>
<body>
<?php
$con = mysql_connect('localhost', 'root', '123456') or die('Error connecting to server');
mysql_select_db("aplikace", $con);
$SQL1 = "SELECT * FROM data";
$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['cas'];
}
$result2 = mysql_query($SQL1);
$data2 = array();
while ($row = mysql_fetch_array($result2)) {
$data2[] = hexdec($row['pars_data']);
}
?>
<script type="text/javascript">
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Comming Data'
},
xAxis: {
categories: ['<?php echo join($data1, "','") ?>'],
},
yAxis: {
min:0,
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 35,
floating: true,
shadow: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ {
name: 'Data',
data: ['<?php echo join($data2, "','") ?>'],
// pointStart: 0
//pointInterval
},
]
});
});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Hi guys, I dont kwno where I have a mistake, could you help me please? On X-axis should be the datetime from column CAS-> it works but it doesnt display column PARS_DATA. Thanks for your help, thanks.
MySQL TABLE screen:
Chart which I see:
You should convert your date time field to unix timestamp for process on it.
so strtotime function is good idea.
In your code, follow this :
$result=mysql_query($sql)or die(mysql_error());
if(mysql_num_rows($result)>0){
while($row=mysql_fetch_array($result))
{
$uts=strtotime($row['time']); //convert to Unix Timestamp
$date=date("l, F j, Y H:i:s",$uts); //standard template for draw chart
echo $date . "\t" . $row['new_cost']. "\n"; //only this template work
}
$sql: your sql query text.
$result: feedback.
$row['new_cost']: my field for cost.
for more details, follow this link
good luck