Google Charts error with Chrome: Cannot read property 'DataTable' of undefined - php
As the title says, I am getting this error when trying to load a simple Column Chart: "Uncaught TypeError: Cannot read property 'DataTable' of undefined"
This only happens in Google Chrome, while Firefox displays it without problems.
I tried to find a solution, but I can't figure out the problem. google.load is there by the way, this is the full jQuery script:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
current = 0;
var jsondata1 =$.ajax({url: "index.php?action=stats&data=post",dataType:"json",async: false}).responseText;
var jsondata2 =$.ajax({url: "index.php?action=stats&data=comm",dataType:"json",async: false}).responseText;
var jsondata3 =$.ajax({url: "index.php?action=stats&data=like",dataType:"json",async: false}).responseText;
var jsondata4 =$.ajax({url: "index.php?action=stats&data=disl",dataType:"json",async: false}).responseText;
var data = [];
data[0] = new google.visualization.DataTable(jsondata1);
data[1] = new google.visualization.DataTable(jsondata2);
data[2] = new google.visualization.DataTable(jsondata3);
data[3] = new google.visualization.DataTable(jsondata4);
var title = ["post","comments","likes","dislikes"];
var options = {
width:600,
height:500,
vAxis: {title: "Number"},
hAxis: {title: "Users"},
legend: {position: 'none'},
animation:{
duration: 1000,
easing: 'out',
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('graphimg'));
function drawChart() {
google.visualization.events.addListener(chart, 'ready',function() {});
options['title'] = 'Max number of '+title[current];
chart.draw(data[current], options);
}
function next(){
current++;
if(current === 4)
current = 0;
drawChart();
}
function prev(){
current--;
if(current < 0)
current = 3;
drawChart();
}
The data is obtained from the ajax calls, the requests are handled by similar php functions, here is one (don't mind the deprecated MySQL calls):
function getMaxLikes(){
$conn = dbConnect();
$sql = "SELECT username, count( user ) AS numlikes
FROM users, likes
WHERE user = username and value=1
GROUP BY username
ORDER BY numlikes DESC
LIMIT 5";
$res = mysql_query($sql) or die("Error:".mysql_error());
$json = array();
$json['cols'] = array(
array('label' => 'User', 'type' => 'string'),
array('label' => 'Likes', 'type' => 'number'),
array('type' => 'string', 'role' => 'style')
);
$rows = array();
$i = 0;
while($r = mysql_fetch_assoc($res)) {
$temp = array();
$temp[] = array('v' => (string) $r['username']);
$temp[] = array('v' => (int) $r['numlikes']);
$temp[] = array('v' => (string) $this->color[$i]);
$rows[] = array('c' => $temp);
$i++;
}
$json['rows'] = $rows;
return json_encode($json);
}
The json format seems right to me, but I could be mistaken.
What could cause the problem? Thanks in advance!
Related
How can I convert this JSON chart to real-time dynamic chart?
This is the data that is in the database but I've only copy them so this is currently a static one and I can't convert this one into a real-time dynamic json chart. <script src="https://www.gstatic.com/charts/loader.js"></script> <script> let temp = 25; // testdata const gaugeArr = [ ['Label', 'Value'], ['Temperature', temp], ['pH', 7.2], ['DO', 60], ['Turbidity ', 10] ]; // testdata const lineObj = {"cols":[{"label":"Date Time","type":"datetime"},{"label":"Water Level (ft)","type":"number"}],"rows":[{"c":[{"v":"Date(1628486400000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1628485800000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1628485200000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1628484600000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1628484000000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1628483400000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1628388000000)"},{"v":"29.00"}]},{"c":[{"v":"Date(1628302200000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1628216400000)"},{"v":"36.00"}]},{"c":[{"v":"Date(1628130600000)"},{"v":"31.00"}]},{"c":[{"v":"Date(1628044800000)"},{"v":"30.00"}]},{"c":[{"v":"Date(1627959000000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1627873200000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1627787400000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1627701600000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1627615800000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1627530000000)"},{"v":"36.00"}]},{"c":[{"v":"Date(1627444200000)"},{"v":"30.00"}]},{"c":[{"v":"Date(1627358400000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1627272600000)"},{"v":"36.00"}]},{"c":[{"v":"Date(1627186800000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1627104600000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1627018800000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1626933000000)"},{"v":"37.00"}]},{"c":[{"v":"Date(1626847200000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1626761400000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1626675600000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1626589800000)"},{"v":"29.00"}]},{"c":[{"v":"Date(1626504000000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1626418200000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1626332400000)"},{"v":"37.00"}]},{"c":[{"v":"Date(1626246600000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1626160800000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1626075000000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1625989200000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1625903400000)"},{"v":"31.00"}]},{"c":[{"v":"Date(1625817600000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1625731800000)"},{"v":"37.00"}]},{"c":[{"v":"Date(1625646000000)"},{"v":"31.00"}]},{"c":[{"v":"Date(1625560200000)"},{"v":"36.00"}]},{"c":[{"v":"Date(1625474400000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1625388600000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1625302800000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1625217000000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1625131200000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1625045400000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1624959600000)"},{"v":"31.00"}]},{"c":[{"v":"Date(1624873800000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1624788000000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1624702200000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1624616400000)"},{"v":"30.00"}]},{"c":[{"v":"Date(1624530600000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1624444800000)"},{"v":"29.00"}]},{"c":[{"v":"Date(1624359000000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1624273200000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1624187400000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1624101600000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1624015800000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1623930000000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1623844200000)"},{"v":"37.00"}]},{"c":[{"v":"Date(1623758400000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1623672600000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1623586800000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1623501000000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1623415200000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1623329400000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1623243600000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1623157800000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1623072000000)"},{"v":"31.00"}]},{"c":[{"v":"Date(1622986200000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1622900400000)"},{"v":"37.00"}]},{"c":[{"v":"Date(1622814600000)"},{"v":"30.00"}]},{"c":[{"v":"Date(1622728800000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1622643000000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1622557200000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1622471400000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1622385600000)"},{"v":"31.00"}]},{"c":[{"v":"Date(1622299800000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1622214000000)"},{"v":"37.00"}]},{"c":[{"v":"Date(1622128200000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1622042400000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1621956600000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1621870800000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1621785000000)"},{"v":"30.00"}]},{"c":[{"v":"Date(1621612800000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1621527000000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1621441200000)"},{"v":"29.00"}]},{"c":[{"v":"Date(1621355400000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1621269600000)"},{"v":"36.00"}]},{"c":[{"v":"Date(1621183800000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1621098000000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1621012200000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1620926400000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1620840600000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1620754800000)"},{"v":"36.00"}]},{"c":[{"v":"Date(1620669000000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1620583200000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1620497400000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1620411600000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1620325800000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1620240000000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1620154200000)"},{"v":"36.00"}]},{"c":[{"v":"Date(1620068400000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1619982600000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1619896800000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1619811000000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1619725200000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1619639400000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1619553600000)"},{"v":"37.00"}]},{"c":[{"v":"Date(1619467800000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1619382000000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1619296200000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1619210400000)"},{"v":"25.00"}]},{"c":[{"v":"Date(1619124600000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1619038800000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1618953000000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1618867200000)"},{"v":"38.00"}]},{"c":[{"v":"Date(1618781400000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1618695600000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1618609800000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1618524000000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1618438200000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1618352400000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1618266600000)"},{"v":"31.00"}]},{"c":[{"v":"Date(1618180800000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1618095000000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1618009200000)"},{"v":"29.00"}]},{"c":[{"v":"Date(1617923400000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1617837600000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1617751800000)"},{"v":"28.00"}]},{"c":[{"v":"Date(1617666000000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1617580200000)"},{"v":"29.00"}]},{"c":[{"v":"Date(1617494400000)"},{"v":"40.00"}]},{"c":[{"v":"Date(1617408600000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1617322800000)"},{"v":"32.00"}]},{"c":[{"v":"Date(1617237000000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1617151200000)"},{"v":"29.00"}]},{"c":[{"v":"Date(1617065400000)"},{"v":"35.00"}]},{"c":[{"v":"Date(1616979600000)"},{"v":"34.00"}]},{"c":[{"v":"Date(1616893800000)"},{"v":"26.00"}]},{"c":[{"v":"Date(1616808000000)"},{"v":"33.00"}]},{"c":[{"v":"Date(1616722200000)"},{"v":"27.00"}]},{"c":[{"v":"Date(1616636400000)"},{"v":"39.00"}]},{"c":[{"v":"Date(1616550600000)"},{"v":"34.00"}]}]} let lineChart, gauge; const drawChart = () => { if (!lineChart) lineChart = new google.visualization.LineChart(document.getElementById('linechart_div')); // only do this once if (!gauge) gauge = new google.visualization.Gauge(document.getElementById('gauge_div')); // only do this once var gaugeData = google.visualization.arrayToDataTable(gaugeArr); var lineData = new google.visualization.DataTable(lineObj); lineChart.draw(lineData, lineOptions); gauge.draw(gaugeData, gaugeOptions); } const getData = () => { drawChart(); gaugeArr[1][1] = ++temp setTimeout(getData, 5000); }; window.addEventListener("load", () => { // when page loads google.charts.load('current', { 'packages': ['gauge','corechart'] }); google.charts.setOnLoadCallback(getData); // start }) const lineOptions = { title: "Sensors Data", legend: { position: "bottom" }, chartArea: { width: "80%", height: "70%" } }; const gaugeOptions = { width: 500, height: 200, minorTicks: 5, }; </script> </head> <body> <div id="linechart_div" style="width: 400px; height: 120px,; margin-top:30px"></div> <div id="gauge_div" style="width: 400px; height: 120px,; margin-top:30px"></div> </body> This is the php syntax that I use to get the data from the database and a working one but only if they are the only json chart in that page but what I want to happen is to display them both in one page and also I don't know how can I integrate this in a two combined json table to make them dynamic. <?php // For line chart $con = mysqli_connect('localhost', 'root', '', 'adminpanel'); $sql = 'SELECT temperature, UNIX_TIMESTAMP(CONCAT_WS(" ", sensor_date , sensor_time)) AS datetime FROM tbl_waterquality ORDER BY sensor_date DESC, sensor_time DESC'; $result = mysqli_query($con, $sql); $rows = array(); $table = array(); $table['cols'] = array( array( 'label' => 'Date Time', 'type' => 'datetime' ), array( 'label' => 'Water Level (ft)', 'type' => 'number' ), ); while ($row = mysqli_fetch_array($result)) { $sub_array = array(); $datetime = explode(".", $row["datetime"]); $sub_array[] = array( "v" => 'Date(' . $datetime[0] . '000)' ); $sub_array[] = array( "v" => $row["temperature"] ); $rows[] = array( "c" => $sub_array ); } $table['rows'] = $rows; $jsonTable = json_encode($table); echo $jsonTable; ?> //For Gauge chart <?php $con = mysqli_connect('localhost', 'root', '', 'adminpanel'); $sql = 'SELECT * FROM tbl_waterquality ORDER BY id DESC'; $result = mysqli_query($con, $sql); $row = mysqli_fetch_array($result); // assuming ONE result $temperature = $row["temperature"]; $pH = $row["pH"]; $DO = $row["DO"]; $turbidity = $row["Turbidity"]; echo <<<EOT [ ["Label", "Value"], ["Temperature", $temperature], ["pH", $pH ], ["DO", $DO ], ["Turbidity", $turbidity ] ] EOT ?>
Mysql to Google Chart with Column Label
I am trying to create a google chart with column labels. The following works just fine for me. Except that when i try to use it with a Json datacreated from a mysql table. Would you guys kindly help me out to understand where i am doing wrong. Working Google Chart code: <script type="text/javascript"> function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['From', 'TotalOrders', 'Quantity'], ['Wk of 9/7/14', 172, 8910], ['Wk of 9/14/14', 121, 5901], ['Wk of 9/21/14', null, null], ['Wk of 9/28/14', null, null] ]); var formatter = new google.visualization.NumberFormat( {pattern:'#,###'}); formatter.format(data, 1); formatter.format(data, 2); mydiv = $("#mychart"); chart = new google.visualization.ComboChart(mydiv[0]); chart.draw(data, { width: 600, height: 400, seriesType: 'bars', chartArea: {left: 60, top: 30, width: 540} }); rects = mydiv.find('svg > g > g > g > rect'); var row = 0; for (i = 0; i < rects.length; i++) { el = $(rects[i]); if (parseFloat(el.attr("height")) <= 2) { continue; } aparent = el.parent(); do { // skips 'null' values text = data.getValue(row++, 1); } while (text == null && row < data.getNumberOfRows()); if (text) { text = formatter.formatValue(text); // see below pos = getElementPos(el); attrs = {x: pos.x + pos.width / 2, y: pos.y - 2, fill: 'black', 'font-family': 'Arial', 'font-size': 11, 'text-anchor': 'middle'}; aparent.append(addTextNode(attrs, text, aparent)); } } } google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawVisualization); function getElementPos($el) { return { x: parseInt($el.attr("x")), width: parseInt($el.attr("width")), y: parseInt($el.attr("y")), height: parseInt($el.attr("height")) } } function addTextNode(attrs, text, _element) { var el = document.createElementNS('http://www.w3.org/2000/svg', "text"); for (var k in attrs) { el.setAttribute(k, attrs[k]); } var textNode = document.createTextNode(text); el.appendChild(textNode); return el; } </script> but when i use it with the following it doesn't work. $table = array(); $table['cols'] = array( array('label' => 'From', 'type' => 'string'), array('label' => 'TotalOrders', 'type' => 'number'), array('label' => 'Quantity', 'type' => 'Number') ); $rows = array(); while($r = mysql_fetch_assoc($sth)) { $temp = array(); $temp[] = array('v' => (string) $r['From']); $temp[] = array('v' => (int) $r['TotalOrders']); $temp[] = array('v' => (int) $r['Quantity']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); I can't seem to find what is going wrong here. perhaps you guys will be able to point me to the right direction.
That JSON structure is not compatible with the arrayToDataTable function - you must use the regular DataTable constructor: var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>); Also, you should have the json_encode function parse numbers correctly in the output, otherwise they may come out as strings: $jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
google timeline chart connect to php mysql
Right now my timeline chart doesn't show up at all in my web page I am not sure what is wrong with my code is not given me any errors. I think this could be something to do with the date format I set but I am not sure. I double checked the date format and the one I am using it is matching with my database. I would be grateful if you could point out where when wrong. Thanks <?php $sth = "SELECT * FROM goal WHERE account_id =$account_id"; $result4 = mysqli_query($con,$sth) or die(mysqli_error()); $rows = array(); $flag = true; $table = array(); $table['cols'] = array( array('type' => 'string', 'label' => 'goalName'), array('type' => 'date', 'label' => 'starts'), array('type' => 'date', 'label' => 'finish')); //$rows = array(); while($rows = mysqli_fetch_assoc($result4)) { $temp = array(); $starts = date("Y-m-d"); $finish = date("Y-m-d"); $temp[] = array('v' => (string) $rows['goalName']); $temp[] = array('v' => (string) $rows['starts']); $temp[] = array('v' => (string) $rows['finish']); $rows[] = array('c' => $temp);} $table['rows'] = $rows; $jsonTable = json_encode($table); //echo $jsonTable; ?> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules': [{'name':'visualization', 'version':'1','packages':['timeline']}]}"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example3.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); var data = "" google.visualization.DataTable(<?php echo json_encode($table, JSON_NUMERIC_CHECK); ?>); var options = { title: 'Progress', is3D: true var options = { timeline: { colorByRowLabel: true } }; chart.draw(dataTable, options); } </script>
Friend the detail is in the var option being interpreted twice so you see: var options = { title: 'Progress', is3D: true var options = { timeline: { colorByRowLabel: true } }; and should be as follows when var options = { title: 'Progress', is3D: true, timeline: { colorByRowLabel: true } }; I hope it will help you
Google Bar chart labeling Dynamic data.How to add labels?
I am creating a Google charts bar chart! The data comes from MySQL, using JSON and PHP. All I would like is to put labels at the end of Bar charts. Because data are dynamic, i found it difficult. <?php $sth = mysql_query("select * from table"); $rows = array(); //flag is not needed $flag = true; $table = array(); $table['cols'] = array( array('label' => 'Stats', 'type' => 'string'), array('label' => 'Value', 'type' => 'number') ); $rows = array(); while($r = mysql_fetch_assoc($sth)) { $temp = array(); $temp[] = array('v' => (string) $r['Stats']); $temp[] = array('v' => (int) $r['Value']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); ?> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>); var options = { legend: {position: 'none'}, bar: {groupWidth: "85%"}, colors:['#4A9218'], hAxis: { viewWindowMode: 'explicit', viewWindow: { max: 400, min: 0, }, gridlines: { count: 10, } } }; var chart = new google.visualization.BarChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> <!--this is the div that will hold the pie chart--> <div id="chart_div" style="width:100%; height:200px"></div> Outcome : Bar chart with no labeling Outcome I am looking for: Bar chart with labeling at the end on the right
First, add JSON_NUMERIC_CHECK to your json_encode call, as MySQL outputs numbers as strings, and inputting numbers as strings can cause problems with some charts: $jsonTable = json_encode($table, JSON_NUMERIC_CHECK); If you want to add the data values as annotations on the bars, the easiest way is to create a DataView that includes a calculated 'annotation' role column that takes its data from the value column and stringifies it: var view = new google.visualization.DataView(data); view.setColumns([0, 1, { type: 'string', role: 'annotation', sourceColumn: 1, calc: 'stringify' }]); Then use the view to draw your chart instead of the DataTable: chart.draw(view, options);
Placing Google chart in a particular place
Thanks for all the inputs from Stackoverflow. I am able to place the 2 google chart in one page, but the 2nd chart is showing below 1st chart. But i need both charts in parallel to each other. Like: 1st chart from Left it should be 100th position, top =200 and 2nd chart should be 300th position, top=200. How can i achieve that. I used chartArea:{left:20,top:0,width:"50%",height:"75%"}, but i am not getting <?php $con=mysql_connect("","root","") or die("Failed to connect with database!!!!"); mysql_select_db("Loan_Bids", $con); $sth = mysql_query("SELECT A.Bid_Size, B.Rating from bids_data A, loan_data B Where A.LoanID = B.LoanID"); $rows = array(); $rows1 = array(); //flag is not needed $flag = true; $table = array(); $table['cols'] = array( array('label' => 'Bid_Size', 'type' => 'number'), array('label' => 'Rating', 'type' => 'number') ); $table1 = array(); $table1['cols'] = array( array('label' => 'Bid_Size', 'type' => 'number'), array('label' => 'Rating', 'type' => 'number') ); $rows = array(); $rows1 = array(); while($r = mysql_fetch_assoc($sth)) { $Ratingval = $r['Rating']; if ($Ratingval == 1 ) { $temp = array(); // the following line will be used to slice the Pie chart $temp[] = array('v' => (int) $r['Bid_Size']); // Values of each slice $temp[] = array('v' => (int) $r['Rating']); $rows[] = array('c' => $temp); } if ($Ratingval == 2 ) { $temp1 = array(); // the following line will be used to slice the Pie chart $temp1[] = array('v' => (int) $r['Bid_Size']); // Values of each slice $temp1[] = array('v' => (int) $r['Rating']); $rows1[] = array('c' => $temp1); } } $table['rows'] = $rows; $jsonTable = json_encode($table); $table1['rows'] = $rows1; $jsonTable1 = json_encode($table1); echo $jsonTable1; ?> <html> <head> <!--Load the Ajax API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(<?php echo $jsonTable?>); var options = { title: 'Rating1', is3D: 'true', color:'red', hAxis: {title: 'Interest Rate'}, vAxis: {title: 'Bid Size'}, width:200,height:200 }; var data1 = new google.visualization.DataTable(<?php echo $jsonTable1?>); var options1 = { title: 'Rating2', is3D: 'true', hAxis: {title: 'Interest Rate'}, vAxis: {title: 'Bid Size'}, width:200,height:200 }; // Instantiate and draw our chart, passing in some options. // Do not forget to check your div ID var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); var chart1 = new google.visualization.ScatterChart(document.getElementById('chart_div1')); chart1.draw(data1, options1); } </script> </head> <body> <!--this is the div that will hold the pie chart--> <div id="chart_div"></div> <div id="chart_div1"></div> </body> </html>
You need to use CSS to position the container divs on the page, not the chartArea options. Something like this should work: #chart_div, #chart_div1 { float: left; width: 50%; }