I've created a Google chart and I've added data taken from the database itself. When getting data through php loops though, I have had some difficulty because I couldn't amend that data to the chart because of its syntax.
This is as far as I have gone. I need to get the mysql values in place of: 1170, 460, 45, 123, 456],
660, 1120, 145, 785, 658]
var data = google.visualization.arrayToDataTable([
['Term', <?php
while ($getchartrows = mysql_fetch_array($getchart))
{
echo " ' " . $getchartrows['std_ID'] . " ' " . ",";
}
?>],
<?php
$one = mysql_query("SELECT * FROM stusitting WHERE std_ID = '0001' AND subjectNo = '$subin' AND grade = '$gradein' AND termNo = '$tcheck' ");
$getone = mysql_fetch_array($one);
?>
['01', <?php echo $getone ['marks']; ?>, 400, 495, 565, 415],
['02', 1170, 460, 45, 123, 456],
['03', 660, 1120, 145, 785, 658]
]);
var options = {
title: 'Class Progress'
};
Try to tackle one problem after the other. First, get the data you need from the database. Then, create the data structure you need in PHP, and convert it to JavaScript using json_encode(). Finally, pass it to the visualization function in JavaScript:
<?php
// query data
$result = mysql_query(...);
// format data structure
$data = array();
$i = 0;
while($row = mysql_fetch_array($result)) {
$i += 1;
array_push($data, array($i) + $row);
}
// convert to JavaScript
?>
var raw_data = <?php echo json_encode($data) ?>;
// visualize
var data = google.visualization.arrayToDataTable(raw_data);
Related
This question already has answers here:
Is storing a delimited list in a database column really that bad?
(10 answers)
How to count items in comma separated list MySQL
(6 answers)
Closed 1 year ago.
I want to count the number of mechanics in a chart, but some data has multiple data which I use with implode (comma). how to separate data?
I'm taking data from one of my tables, where a column has a value that is implode. the problem here, I just want to explode **nama_tmp **(EKO PAMBUDI, MURNO, ARDI PRASETYO) separately so I can count each name.
The following query I use to display the table:
var chart4;
$(document).ready(function() {
chart4 = new Highcharts.Chart({
chart: {
renderTo: 'mygraph4',
type: 'column'
},
title: {
text: 'Grafik Mekanik'
},
xAxis: {
categories: ['Mekanik']
},
yAxis: {
title: {
text: 'Total Perbaikan'
}
},
series:
[
<?php
include "system/koneksi.php";
$sql = "SELECT nama_tmp FROM tb_tmp GROUP by nama_tmp";
$query = mysqli_query($connect, $sql) or die(mysqli_error());
while($temp = mysqli_fetch_array($query))
{
$namatmp=$temp['nama_tmp'];
$sql_total = "SELECT COUNT(nama_tmp) as 'total' from tb_tmp GROUP by nama_tmp = '$namatmp'";
$query_total = mysqli_query($connect,$sql_total) or die(mysql_error());
while($data = mysqli_fetch_array( $query_total))
{
$total = $data['total'];
}
?>
{
name: '<?php echo $namatmp; ?>',
data: [<?php echo $total; ?>]
},
<?php
} ?>
]
});
});
my database:
After looking at the image again, I can understand your problem. You basically need to prepare your data, instead of printing the PDF directly.
You could use a map to calculate your output like so:
$total = array("freq" => 0, "menit" => 0, "jam" => 0);
$groups = array();
while ($data = mysqli_fetch_array($query)) {
$names = explode(",",$data['nama_tmp']);
foreach ($names as $name) {
if (!array_key_exists($name, $groups)) {
$groups[$name] = array("freq" => 0, "menit" => 0, "jam" => 0);
}
$groups[$name]["freq"] += $data["freq"];
$groups[$name]["menit"] += $data["menit"];
$groups[$name]["jam"] += $data["jam"];
$total["freq"] += $data["freq"];
$total["menit"] += $data["menit"];
$total["jam"] += $data["jam"];
}
}
Now you should have all your data in $groups and you can generate your PDF from that.
foreach ($groups as $name => $group) {
$pdf->Ln();
$pdf->Cell(90,5,$name,1,0,'L',0);
$pdf->Cell(20,5,$group['freq'],1,0,'C',0);
$pdf->Cell(25,5,$group['menit'],1,0,'C',0);
$pdf->Cell(25,5,$group['jam'],1,0,'C',0);
}
$pdf->Ln(5);
$pdf->SetFillColor(255, 235, 255);
$pdf->SetFont('times','B',8);
$pdf->Cell(90,5,'TOTAL',1,0,'C',1);
$pdf->Cell(20,5,$total["freq"],1,0,'C',1);
$pdf->Cell(25,5,$total["menit"],1,0,'C',1);
$pdf->Cell(25,5,$total["jam"],1,0,'C',1);
Note: Instead of using a variable for every column sum, I have used a $total map array instead. This makes it more readable. Also you should consider using some functions for each part of your script.
The main function could then be as simple as this:
$data = readData();
$groups= calculateSums($data);
$pdf = generatePDF($groups);
Using chart.js I want to create a graph of a given stock price.
The labels and data are fetched using the data from $select_query. Here I create a dynamic function that gets the ticker name from the URL: https://signal-invest.com/tick/?ticker=LOW
$select_query = $con->prepare("SELECT Date_buy, Name_buy, Price_buy FROM daily_buy_orders WHERE Name_buy = ?");
$select_query->bind_param('s', $ticker); // 's' specifies the variable type => 'string'
$select_query->execute();
I tried to loop through the rows using the while loop but failed.
<canvas id="myChart" style="border: 1px solid black; margin: 25px 25px" height="300"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
//labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
labels: [<?php
$get_dates = $select_query->get_result();
while ($rows = mysqli_fetch_assoc($get_dates)) {
$dates = $rows["Date_buy"];
echo ''.$dates.'';
}
?>],
datasets: [{
label: '# of Votes',
//data: [12, 19, 3, 5, 2, 3],
data: [<?php
$get_prices = $select_query->get_result();
while ($rowss = mysqli_fetch_assoc($get_prices)) {
$prices = $rowss["Price_buy"];
echo ''.$prices.'';
}
?>],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(75, 192, 192)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Above code messes with my table below. When creating the tables the while loop actually works. I tried to use the same thinking when doing the while loops for the labels and data in chartjs, didn't work though.
<table style="width:50%" border="solid">
<tr>
<th>Name</th>
<th>Price</th>
<th>Date of signal</th>
</tr>
<?php
$result = $select_query->get_result();
while ($row = mysqli_fetch_assoc($result)) {
$name_buy = $row["Name_buy"];
$price_buy = $row["Price_buy"];
$date = $row["Date_buy"];
echo buy_table($name_buy, $price_buy, $date);
}
?>
</table>
Trying to dynamically build an array of JS with PHP code is never a good idea. Instead, build the array in PHP and the use json_encode to pass it to JS (or even better, use a templating engine and pass it in with data attributes, but's that a whole other topic)
Also, you are trying to loop the result multiple times, which I'm not sure is possible. It's been a long time since I used the native mysqli functions.
First, fetch the data and build the arrays you need to pass to Chart.js in PHP:
$statement = $con->prepare("SELECT Date_buy, Name_buy, Price_buy FROM daily_buy_orders WHERE Name_buy = ?");
$statement->bind_param('s', $ticker); // 's' specifies the variable type => 'string'
$statement->execute();
$result = $statement->get_result();
$dates = [];
$prices = [];
while ($row = $result->fetch_assoc()) {
$dates[] = $row['Date_buy'];
$prices[] = $row['Price_buy']
}
Now you can pass this to the chart in a much cleaner way:
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: <?php json_encode($dates); ?>,
datasets: [{
label: '# of Votes',
data: <?php json_encode($prices); ?>,
}]
}
}
I haven't tested this, but it gives you the idea
EDIT: This returns the following output:
"LOWArrayLOWArrayLOWArrayLOWArray". Where Name_buy is LOW, meaning the second print statement is bugged. How to solve this?
$arrDates = array();
$arrPrices = array();
$arrNames = array();
// $dates = [];
// $prices = [];
// $names = [];
$result = $select_query->get_result();
while ($row = mysqli_fetch_assoc($result)) {
$arrDates[] = $row['Date_buy'];
$arrPrices[] = $row['Price_buy'];
$arrNames[] = $row['Name_buy'];
print($row['Name_buy']);
print($arrNames);
}
I'm using Google's Geo Charts API, and using json to update the data.
This is my map js (map.php):
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var jsonData = $.ajax({
url: "includes/_ajax_home_map.php?metric=Clicks",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
//region: '009',
backgroundColor: 'EAF7FE',
colorAxis: {colors: ['910101']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
This is my php generated json (_ajax_home_map.php):
$data = '{
"cols": [
{"id":"","label":"Country","pattern":"","type":"string"},
{"id":"","label":"Popularity","pattern":"","type":"number"}
],
"rows": [';
$metric = $_REQUEST['roi_tag'];
$sql = "SELECT SUM($metric) as '$metric',tag_1 FROM Dashboard_ClientsCampaigns_Today_HoH WHERE tag_1 != '' GROUP BY tag_1";
$sql = mysql_query($sql);
$count = 1;
while($row = mysql_fetch_array($sql)){
$tag_1 = strtoupper($row["tag_1"]);
if($tag_1 == "UK")$tag_1 = "GB";
if($count != 1)$data .= ",";
$count++;
$data .= '{"c":[{"v":"'.$tag_1.'","f":null},{"v":'.$row[$metric].',"f":null}]}';
}
$data .= ']}';
echo $data;
Now when I connect these 2, I just get a blank map. No data is in there. BUT..here comes the strange part. If I browse directly to my PHP JSON, I get this:
{ "cols": [ {"id":"","label":"Country","pattern":"","type":"string"}, {"id":"","label":"Popularity","pattern":"","type":"number"} ], "rows": [{"c":[{"v":"AU","f":null},{"v":139,"f":null}]},{"c":[{"v":"CZ","f":null},{"v":3,"f":null}]},{"c":[{"v":"DE","f":null},{"v":4,"f":null}]},{"c":[{"v":"DK","f":null},{"v":978,"f":null}]},{"c":[{"v":"ES","f":null},{"v":32,"f":null}]},{"c":[{"v":"HU","f":null},{"v":2,"f":null}]},{"c":[{"v":"IE","f":null},{"v":65,"f":null}]},{"c":[{"v":"IT","f":null},{"v":5081,"f":null}]},{"c":[{"v":"PT","f":null},{"v":4452,"f":null}]},{"c":[{"v":"RO","f":null},{"v":16,"f":null}]},{"c":[{"v":"RS","f":null},{"v":0,"f":null}]},{"c":[{"v":"RU","f":null},{"v":0,"f":null}]},{"c":[{"v":"SE","f":null},{"v":69,"f":null}]},{"c":[{"v":"GB","f":null},{"v":28123,"f":null}]}]}
If I take this outputted JSON, copy it, home it in it's own file (data2.php), then get my map js to access it, it populates the map perfectly.
How on earth can I have 2 pieces of identical JSON and only one work with Google Charts?
Maybe because you try to load the PHP with the wrong param
_ajax_home_map.php?metric=Clicks
but in the code you look for
$metric = $_REQUEST['roi_tag'];
try
$metric = $_REQUEST['metric'];
..instead. And you are right by the way - the JSON works just fine! Thats not the problem.
I am trying to pull financial stock data of multiple companies from CSVs and display the data as separate series in a Highcharts/Highstocks line chart. I have the sources setup and I am able to pull data + convert to JSON, but I am having trouble passing the data off to Highcharts. I believe I am not using the most efficient method of preparing the data for Highcharts use, and I am hoping someone can give me direction on what I've done incorrectly. Please take a look at my code and make me aware of any inefficiencies or glaring errors you see.
PHP code:
date_default_timezone_set('America/Los_Angeles');
$stocks = array('MSFT' => 'http://ichart.finance.yahoo.com/table.csv?s=MSFT', 'AAPL' => 'http://ichart.finance.yahoo.com/table.csv?s=AAPL', 'FB' => 'http://ichart.finance.yahoo.com/table.csv?s=FB');
$stocks_data = array();
foreach ($stocks as $key=>$stock) {
$fh = fopen($stock, 'r');
$header = fgetcsv($fh);
$varname = $key . '_data';
$$varname = array();
while ($line = fgetcsv($fh)) {
${$varname}[count($$varname)] = array_combine($header, $line);
}
fclose($fh);
}
foreach($MSFT_data as $val){
$MSFT[] = strtotime($val['Date']) * 1000 . ', ' . (float)$val['Close']; //sets the date as a javascript timestamp
}
$MSFT = json_encode($MSFT);
foreach($AAPL_data as $val){
$AAPL[] = strtotime($val['Date']) * 1000 . ', ' . (float)$val['Close']; //sets the date as a javascript timestamp
}
$AAPL = json_encode($AAPL);
foreach($FB_data as $val){
$FB[] = strtotime($val['Date']) * 1000 . ', ' . (float)$val['Close']; //sets the date as a javascript timestamp
}
$FB = json_encode($FB);
JS code:
$(function () {
var seriesOptions = [],
yAxisOptions = [],
colors = Highcharts.getOptions().colors;
seriesOptions[0] = {
name: 'MSFT',
data: <? php echo $MSFT; ?>
};
seriesOptions[1] = {
name: 'AAPL',
data: <? php echo $AAPL; ?>
};
seriesOptions[2] = {
name: 'FB',
data: <? php echo $FB; ?>
};
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
If you have any questions or need further information, please let me know with a comment.
Thanks
BTW: I have all necessary assets included for Highcharts to work; when I replace my JS + PHP with example code from the Highcharts site, it works beautifully. So the problem clearly lies in my JS + PHP code.
Alright, I believe I found the problem, it lies in the way that you are storing each individual point in the array.
Instead of this (which is passing a string x,y separated by a comma):
strtotime($val['Date']) * 1000 . ', ' . (float)$val['Close'];
You are going to want to use something like this (Highcharts accepts arrays or associative arrays):
array((strtotime($val['Date']) * 1000), ((float)$val['Close']));
That will store the X and Y variables as an array instead of comma separated string for the javascript to pass as data.
I am working with the google chart visualization API.
I have a variable in php:
`$value`
which contains the following:
['0',0, 0],['1',65, 35],['2',88, 35],['3',66, 35],['4',35, 35],['5',99, 100]
I want to use this $value below in data.addRows as follows however the output I am getting is blank
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
<?php echo $value ?>
]);
var options = {
width: 400, height: 240,
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
After some research it seems it is Ajax I am trying to attempt. Is this correct? Is there a simple way I can return the value $value to data.addRow??
Here is the process to which $value is set:
$i = "0";
$period = "0";
$chartrow = array();
$unitpriceNumR = 3
while ($i<3)
{
$chartrow[$i] = "['".$period."',".$sPrice[$i].", ".$uPrice[$i]."]";
$period++;
$i++;
}
switch ($currentStage)
{
case "0":
$value = $chartrow[0];
break;
case "1":
$value = $chartrow[0];
break;
case "2":
$value = $chartrow[0].",".$chartrow[1];
break;
}
In this example if $currentStage = "2" then $value is set to ['0',0, 0],['1',65, 35]
Ok now I have even tried a copy and paste of google code into my file and still no success of seeing a graph. (code taken from:http://code.google.com/intl/en-EN/apis/chart/interactive/docs/gallery/linechart.html)
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Using this code
$chartrow = array();
for ($i = 0; $i < 3; $i++ )
{
$chartrow[] = array((string) $i, $sPrice[$i], $uPrice[$i]);
echo $chartrow;
}
results in $chartrow displaying the word "Array" to the screen.
Please have a look at the JSON encode function provided with PHP. This will let you echo or print out a JSON encoded string that JavaScript transforms into a native object.
$value = array(
array('0', 0, 0),
array('1', 65, 35),
array('2', 88, 35),
...
);
...
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
// Change this and the following lines to:
data.addRows(<?php print json_encode($value); ?>);
EDIT
$i = 0;
$chartrow = array();
$unitpriceNumR = 3
for (; $i < 3; $i++ )
$chartrow[] = array((string) $i, $sPrice[$i], $uPrice[$i]);
switch ($currentStage) {
case "0":
case "1":
$value = $chartrow[0];
break;
case "2":
$value = array_slice($chartrow, 0, 2);
default:
// You should have some default value, seriously!!!
}
// Then go the json_encode way, it's safer and easier to maintain!
...
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
// Change this and the following lines to:
data.addRows(<?php print json_encode($value); ?>);
Change [<?php echo $value ?>] to <?php echo json_encode($value) ?>
echo $value produces Array(5) because PHP doesn't natively know how to represent an array as a string.
echo json_encode($value) produces:
[['0',0, 0],['1',65,35],['2',66,35],['4',35,35],['5',99, 100]]
so you don't need brackets around the <?php ... ?>.
http://php.net/manual/en/function.json-encode.php
EDIT: thanks for clarifying how the PHP variables are formed.
The problem is that you're manually converting arrays into strings, when you should let $json_encode do all of the work for you.
Revised version of the PHP code:
$chartrow = array();
$unitpriceNumR = 3;
for ($i=0; $i<=2; $i++)
$chart_row[$i] = array($i, $sPrice[$i], $uPrice[$i];
switch ($currentStage)
{
case '0':
case '1':
$value = $chartrow[0];
break;
case '2':
$value = array($chartrow[0], $chartrow[1]);
break;
}
EDIT2: I tried what you did (replacing the php block with what we expect the php block to produce) and it didn't work for me either. Firebug says 'Container is not defined' in Google's own code.
You forgot to add a div to your document. Add <div id='chart_div'></div> after the script.
So we're on the same page: http://jsfiddle.net/daemon/nnpeE/
Here is the answer to this problem
PHP: How to pass multiple variables to an array?
Whenever I have values like that I do this as my first script on the page and it seems to work for me. It also allows me to inspect what is going on with the PHP instead of the variable being hidden in some function. Note that this will create a global variable which might be not what you want.
<script>
var a = [<?php echo($var1) ?>];
</script>
EDIT:
I got your PHP code to work for me. The changes I made was I converted $i to just 0 not "0" The same goes for the switch statement . Also line 4 needs a semicolon after it. Then I put this
<script>
var a = [<?php echo($value) ?>];
</script>
And the output in the page was
<script>
var a = [['0',, ],['1',, ]];
</script>