I am using this code for creating charts and it works but I need to add the options too just don't know where to add them.
<script type="text/javascript">
function drawVisualizationHourlyChart() {
var data = google.visualization.arrayToDataTable([ // Create and populate the data table.
['Date - Hour:Minute', 'Cares', 'Bikes', 'Both'],
<?php
while( $row = $result->fetch_assoc() ){
extract($row);
echo "['Date: ($dateandtime) - {$hour}:{$minute}', {$cars}, {$bikes}, {$both}],";
}
?>
]);
new google.visualization.LineChart(document.getElementById('mydiv')). // Create and draw the visualization.
draw(data, {legend: 'bottom', title:"titles here"});
}
google.setOnLoadCallback(drawVisualizationHourlyChart);
</script>
And what I want the do is add All the code below into the code above.
var options = {
//options go here
});
Where do I add the options?
The options are the second param of the draw method.
var options = {
legend: 'bottom',
title:"titles here"
};
chart.draw(data, options);
Related
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var jsvar = '<?=$count?>';
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Rating'],
['Good', <?php echo $count; ?>],
['Average', <?php echo $count1; ?>],
['Bad', <?php echo $count2; ?>],
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Windoek' , 'width':400, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
window.open("table.php?myvar=" + encodeURI(selection));
});
I would like to get the selected task header and send it to new page ......
Example , If someone clicks the bad pie chart slice , The variable Bad and Title of pie chart should be send via link to new page for processing ....if someone selects Good than the variable Good with title of pie chart send to new page
How can I set the intervals on Google Charts?
I don't know if that's how it's called, but, in the image, they are the 200k, 400k and so on.
Since some of my values are pretty small, I need to create intervals at each 5k or so.
How can I set this using Google Charts?
The code I'm using is down here:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart4);
function drawChart4() {
var data = google.visualization.arrayToDataTable([
<?php echo $dados; ?>
]);
var options = {
chart: {title: <?php echo "'".str_replace('_', ' ', $subtitulo)."'" ?>,
},bars: 'horizontal',
width: 1250,
height: 350,
colors: ['#4c4c4c','#07bb27']
};
var chart = new google.charts.Bar(document.getElementById('column_horizontal'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
I knew the answer was going to be much simpler then I was making it out to be. I added the following if statement to the while loop.
<?php
echo "['Month', '$year1' , '$year2' , '$currentYear'],";
require('./PHPConnect.php');
$statement1 = #mysqli_query($dbc, $query1);
while($row = mysqli_fetch_array($statement1)){
if($row["Year3"] == NULL ? $row["Year3"] = 'null' : $row["Year3"] = $row["Year3"]);
echo "['".$row["Month"]."', ".$row["Year1"].", ".$row["Year2"].", ".$row["Year3"]."],";
}
mysqli_close($dbc);
?>
As an update we now know that the problem is MySql spits out NULL and javascript requires null. Any thoughts on how to accomplish getting MySql NULL int value into lowercase null.
*I was wondering if anyone can help me with this. I created a line chart to visual show company sales by month for the current year and the previous 2. It works fine, but because at this point there is 0 sales for the remaining months of the year it shows a steep drop off for that line. We don't want to see that, so I tried changing the 0s to nulls in the database and using interpolateNulls false. However when I add the interpolateNulls option the line chart breaks and no longer displays anything. Any ideas?
<script type="text/javascript">
var data;
var chart;
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
data = google.visualization.arrayToDataTable([
<?php
echo "['Month', '$year1' , '$year2' , '$currentYear'],";
require('./PHPConnect.php');
$statement1 = #mysqli_query($dbc, $query1);
while($row = mysqli_fetch_array($statement1)){
echo "['".$row["Month"]."', ".$row["Year1"].", ".$row["Year2"].", ".$row["Year3"]."],";
}
mysqli_close($dbc);
?>
]);
var options = {
backgroundColor: 'transparent',
title:'Total Sales By Month',
width:600,
height:500,
interpolateNulls: false,
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Below is the code that i have worked on which contains the code to fetch the data from database and add it into the $orderArray1 variable . I want to know how to add these data to chart.
if(isset($_POST['submit'])=="GeneratePieChart"){
$fromDate=$_POST['datepicker'];
$toDate=$_POST['datepicker1'];
$sql="SELECT count(*),DATE_FORMAT(order_date,'%d-%b-%Y') as order_date FROM customer_order WHERE order_date BETWEEN '$fromDate' AND '$toDate' GROUP BY DATE_FORMAT(order_date, '%Y%m%d') LIMIT 0 , 30";
echo $sql."<br>";
$result = mysql_query($sql);
while($row=mysql_fetch_assoc($result)) {
$resultset[] = $row;
}
$orderCount = count($resultset);
$orderArray = $resultset;
$orderArray1 = json_encode($orderArray);
}
The result of $orderArray1 is as shown below
[{"count(*)":"29","order_date":"20-Apr-2015"},{"count(*)":"5","order_date":"21-Apr-2015"}]
Below is the code for drawing line chart
<script type="text/javascript">
$(document).ready(function(){
var jQueryArray = <?php echo $orderArray1; ?>;
alert(jQueryArray);
**var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];**
var plot1 = $.jqplot('chart1', [line1], {
title:'Data Point Highlighting',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
});
});
I want to know how to pass the array data that i have got into the chart in place of var line1 where the first value will be date and second value will be count as i have got the result in $orderArray1
Try this:
jQueryArray = [{"count(*)":"29","order_date":"20-Apr-2015"},{"count(*)":"5","order_date":"21-Apr-2015"}]
var line1 = [];
$.each(jQueryArray,function(index,val) {
line1.push([val.order_date,val.count(*)]);
});
Ps: better change the index count(*) to something else
I'd like to retrieve data from database (mongodb) and with those data i'd like to draw à pie chart using google charts. in a first case i have a collection called user and each user has a boolean attribute called (paid), i'd like to count how many paid users and free users and basing on those results i will draw a pie chart with the percentage of each kind of users
this my try i tried with for a long time but i'dont arrive to show the chart,
thanks :)
<?php
$connection = new MongoClient();
$collection = $connection->pato->user;
$cursor = $collection->find();
$cursor = $collection->find(array("paid"=>true));
$x=$cursor->count();
$cursor = $collection->find(array("paid"=>false));
$y=$cursor->count();
$myurl[]="['Option','Value']";
$myurl[]=[['Free users', $y],['Paid users', $x]];
?>
<html>
<head>
<!--Load the AJAX API-->
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data=google.visualization.arrayToDataTable([
<?echo(implode(",",$myurl));?>
]);
// Set chart options
var options = {'title':'User statistics',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('userStatsDiv'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}</script>
<body>
<div id="usageStatsDiv" style="width:700; height:500"></div>
</body>
</html>
I think your problem is with your JSON:
var data=google.visualization.arrayToDataTable([
<?echo(implode(",",$myurl));?>
]);
It looks like you're trying to build the JSON string yourself. Let PHP do the work for you instead - use json_encode instead, like this:
var data=google.visualization.arrayToDataTable([
<?php echo json_encode($data); ?>
]);
You'll need to build your $data array so that it gives you the correct elements, but I think you'll find that the end result is cleaner and easier to understand.