Help with queried and/or hard-coded JSON data
144 views
Skip to first unread message
loranstefani
Oct 10, 2011, 3:29:36 PM10/10/11
to Google Visualization API
Can anyone take a look at this for me and tell me what's missing/
incorrect? Trying to get a motion chart of organization ratings. Gave
up querying mysql, and hard coded the rows, but still no luck in the
Google Code Playground. Just says
"google.setOnLoadCallback(drawVisualization);"
I have read other documentation on querying but found it hard to
understand. Are there any step-by-step guides or video tutorials that
I can access?
Thanks in advance!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':
['motionchart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var JSONObject = {cols:
[{"id":"rating","label":"Rating","type":"string"},
{"id":"time","label":"Quarter","type":"string"},
{"id":"count","label":"Count","type":"number"}],rows:[{c:[{v:"Five"},
{v:"2008Q1"},{v:1619}]},{c:[{v:"Four"},{v:"2008Q1"},{v:3201}]},{c:
[{v:"Not Available"},{v:"2008Q1"},{v:29}]},{c:[{v:"One"},{v:"2008Q1"},
{v:3219}]},{c:[{v:"Three"},{v:"2008Q1"},{v:2997}]},{c:[{v:"Too few"},
{v:"2008Q1"},{v:8}]},{c:[{v:"Two"},{v:"2008Q1"},{v:2915}]},{c:
[{v:"Five"},{v:"2008Q4"},{v:1619}]},{c:[{v:"Four"},{v:"2008Q4"},{v:
3201}]},{c:[{v:"Not Available"},{v:"2008Q4"},{v:29}]},{c:[{v:"One"},
{v:"2008Q4"},{v:3219}]},{c:[{v:"Three"},{v:"2008Q4"},{v:2997}]},{c:
[{v:"Too few"},{v:"2008Q4"},{v:8}]},{c:[{v:"Two"},{v:"2008Q4"},{v:
2915}]},{c:[{v:"Five"},{v:"2009Q1"},{v:1576}]},{c:[{v:"Four"},
{v:"2009Q1"},{v:3258}]},{c:[{v:"Not Available"},{v:"2009Q1"},{v:16}]},
{c:[{v:"One"},{v:"2009Q1"},{v:3195}]},{c:[{v:"Three"},{v:"2009Q1"},{v:
2997}]},{c:[{v:"Two"},{v:"2009Q1"},{v:2911}]},{c:[{v:"Five"},
{v:"2009Q2"},{v:1644}]},{c:[{v:"Four"},{v:"2009Q2"},{v:3276}]},{c:
[{v:"Not Available"},{v:"2009Q2"},{v:16}]},{c:[{v:"One"},{v:"2009Q2"},
{v:3096}]},{c:[{v:"Three"},{v:"2009Q2"},{v:2967}]},{c:[{v:"Two"},
{v:"2009Q2"},{v:2935}]},{c:[{v:"Five"},{v:"2009Q3"},{v:1654}]},{c:
[{v:"Four"},{v:"2009Q3"},{v:3388}]},{c:[{v:"Not Available"},
{v:"2009Q3"},{v:19}]},{c:[{v:"One"},{v:"2009Q3"},{v:2964}]},{c:
[{v:"Three"},{v:"2009Q3"},{v:2951}]},{c:[{v:"Two"},{v:"2009Q3"},{v:
2929}]},{c:[{v:"Five"},{v:"2009Q4"},{v:1704}]},{c:[{v:"Four"},
{v:"2009Q4"},{v:3465}]},{c:[{v:"Not Available"},{v:"2009Q4"},{v:16}]},
{c:[{v:"One"},{v:"2009Q4"},{v:2827}]},{c:[{v:"Three"},{v:"2009Q4"},{v:
2950}]},{c:[{v:"Two"},{v:"2009Q4"},{v:2917}]},{c:[{v:"Five"},
{v:"2010Q1"},{v:1902}]},{c:[{v:"Four"},{v:"2010Q1"},{v:3529}]},{c:
[{v:"Not Available"},{v:"2010Q1"},{v:14}]},{c:[{v:"One"},{v:"2010Q1"},
{v:2524}]},{c:[{v:"Three"},{v:"2010Q1"},{v:2965}]},{c:[{v:"Two"},
{v:"2010Q1"},{v:2949}]},{c:[{v:"Five"},{v:"2010Q2"},{v:1929}]},{c:
[{v:"Four"},{v:"2010Q2"},{v:3562}]},{c:[{v:"Not Available"},
{v:"2010Q2"},{v:11}]},{c:[{v:"One"},{v:"2010Q2"},{v:2445}]},{c:
[{v:"Three"},{v:"2010Q2"},{v:2982}]},{c:[{v:"Two"},{v:"2010Q2"},{v:
2916}]},{c:[{v:"Five"},{v:"2010Q3"},{v:1916}]},{c:[{v:"Four"},
{v:"2010Q3"},{v:3535}]},{c:[{v:"One"},{v:"2010Q3"},{v:2393}]},{c:
[{v:"Three"},{v:"2010Q3"},{v:3001}]},{c:[{v:"Two"},{v:"2010Q3"},{v:
2855}]},{c:[{v:"Five"},{v:"2010Q4"},{v:1925}]},{c:[{v:"Four"},
{v:"2010Q4"},{v:3564}]},{c:[{v:"Not Available"},{v:"2010Q4"},{v:11}]},
{c:[{v:"One"},{v:"2010Q4"},{v:2422}]},{c:[{v:"Three"},{v:"2010Q4"},{v:
3024}]},{c:[{v:"Two"},{v:"2010Q4"},{v:2884}]},{c:[{v:"Five"},
{v:"2011Q1"},{v:1922}]},{c:[{v:"Four"},{v:"2011Q1"},{v:3569}]},{c:
[{v:"Not Available"},{v:"2011Q1"},{v:10}]},{c:[{v:"One"},{v:"2011Q1"},
{v:2419}]},{c:[{v:"Three"},{v:"2011Q1"},{v:3024}]},{c:[{v:"Two"},
{v:"2011Q1"},{v:2885}]},{c:[{v:"Five"},{v:"2011Q3"},{v:2096}]},{c:
[{v:"Four"},{v:"2011Q3"},{v:3720}]},{c:[{v:"Not Available"},
{v:"2011Q3"},{v:4}]},{c:[{v:"One"},{v:"2011Q3"},{v:2193}]},{c:
[{v:"Three"},{v:"2011Q3"},{v:2879}]},{c:[{v:"Two"},{v:"2011Q3"},{v:
2813}]}]};
var data = new google.visualization.DataTable(JSONObject,
0.5);
var chart = new
google.visualization.MotionChart(document.getElementById('chart_div'));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
incorrect? Trying to get a motion chart of organization ratings. Gave
up querying mysql, and hard coded the rows, but still no luck in the
Google Code Playground. Just says
"google.setOnLoadCallback(drawVisualization);"
I have read other documentation on querying but found it hard to
understand. Are there any step-by-step guides or video tutorials that
I can access?
Thanks in advance!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':
['motionchart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var JSONObject = {cols:
[{"id":"rating","label":"Rating","type":"string"},
{"id":"time","label":"Quarter","type":"string"},
{"id":"count","label":"Count","type":"number"}],rows:[{c:[{v:"Five"},
{v:"2008Q1"},{v:1619}]},{c:[{v:"Four"},{v:"2008Q1"},{v:3201}]},{c:
[{v:"Not Available"},{v:"2008Q1"},{v:29}]},{c:[{v:"One"},{v:"2008Q1"},
{v:3219}]},{c:[{v:"Three"},{v:"2008Q1"},{v:2997}]},{c:[{v:"Too few"},
{v:"2008Q1"},{v:8}]},{c:[{v:"Two"},{v:"2008Q1"},{v:2915}]},{c:
[{v:"Five"},{v:"2008Q4"},{v:1619}]},{c:[{v:"Four"},{v:"2008Q4"},{v:
3201}]},{c:[{v:"Not Available"},{v:"2008Q4"},{v:29}]},{c:[{v:"One"},
{v:"2008Q4"},{v:3219}]},{c:[{v:"Three"},{v:"2008Q4"},{v:2997}]},{c:
[{v:"Too few"},{v:"2008Q4"},{v:8}]},{c:[{v:"Two"},{v:"2008Q4"},{v:
2915}]},{c:[{v:"Five"},{v:"2009Q1"},{v:1576}]},{c:[{v:"Four"},
{v:"2009Q1"},{v:3258}]},{c:[{v:"Not Available"},{v:"2009Q1"},{v:16}]},
{c:[{v:"One"},{v:"2009Q1"},{v:3195}]},{c:[{v:"Three"},{v:"2009Q1"},{v:
2997}]},{c:[{v:"Two"},{v:"2009Q1"},{v:2911}]},{c:[{v:"Five"},
{v:"2009Q2"},{v:1644}]},{c:[{v:"Four"},{v:"2009Q2"},{v:3276}]},{c:
[{v:"Not Available"},{v:"2009Q2"},{v:16}]},{c:[{v:"One"},{v:"2009Q2"},
{v:3096}]},{c:[{v:"Three"},{v:"2009Q2"},{v:2967}]},{c:[{v:"Two"},
{v:"2009Q2"},{v:2935}]},{c:[{v:"Five"},{v:"2009Q3"},{v:1654}]},{c:
[{v:"Four"},{v:"2009Q3"},{v:3388}]},{c:[{v:"Not Available"},
{v:"2009Q3"},{v:19}]},{c:[{v:"One"},{v:"2009Q3"},{v:2964}]},{c:
[{v:"Three"},{v:"2009Q3"},{v:2951}]},{c:[{v:"Two"},{v:"2009Q3"},{v:
2929}]},{c:[{v:"Five"},{v:"2009Q4"},{v:1704}]},{c:[{v:"Four"},
{v:"2009Q4"},{v:3465}]},{c:[{v:"Not Available"},{v:"2009Q4"},{v:16}]},
{c:[{v:"One"},{v:"2009Q4"},{v:2827}]},{c:[{v:"Three"},{v:"2009Q4"},{v:
2950}]},{c:[{v:"Two"},{v:"2009Q4"},{v:2917}]},{c:[{v:"Five"},
{v:"2010Q1"},{v:1902}]},{c:[{v:"Four"},{v:"2010Q1"},{v:3529}]},{c:
[{v:"Not Available"},{v:"2010Q1"},{v:14}]},{c:[{v:"One"},{v:"2010Q1"},
{v:2524}]},{c:[{v:"Three"},{v:"2010Q1"},{v:2965}]},{c:[{v:"Two"},
{v:"2010Q1"},{v:2949}]},{c:[{v:"Five"},{v:"2010Q2"},{v:1929}]},{c:
[{v:"Four"},{v:"2010Q2"},{v:3562}]},{c:[{v:"Not Available"},
{v:"2010Q2"},{v:11}]},{c:[{v:"One"},{v:"2010Q2"},{v:2445}]},{c:
[{v:"Three"},{v:"2010Q2"},{v:2982}]},{c:[{v:"Two"},{v:"2010Q2"},{v:
2916}]},{c:[{v:"Five"},{v:"2010Q3"},{v:1916}]},{c:[{v:"Four"},
{v:"2010Q3"},{v:3535}]},{c:[{v:"One"},{v:"2010Q3"},{v:2393}]},{c:
[{v:"Three"},{v:"2010Q3"},{v:3001}]},{c:[{v:"Two"},{v:"2010Q3"},{v:
2855}]},{c:[{v:"Five"},{v:"2010Q4"},{v:1925}]},{c:[{v:"Four"},
{v:"2010Q4"},{v:3564}]},{c:[{v:"Not Available"},{v:"2010Q4"},{v:11}]},
{c:[{v:"One"},{v:"2010Q4"},{v:2422}]},{c:[{v:"Three"},{v:"2010Q4"},{v:
3024}]},{c:[{v:"Two"},{v:"2010Q4"},{v:2884}]},{c:[{v:"Five"},
{v:"2011Q1"},{v:1922}]},{c:[{v:"Four"},{v:"2011Q1"},{v:3569}]},{c:
[{v:"Not Available"},{v:"2011Q1"},{v:10}]},{c:[{v:"One"},{v:"2011Q1"},
{v:2419}]},{c:[{v:"Three"},{v:"2011Q1"},{v:3024}]},{c:[{v:"Two"},
{v:"2011Q1"},{v:2885}]},{c:[{v:"Five"},{v:"2011Q3"},{v:2096}]},{c:
[{v:"Four"},{v:"2011Q3"},{v:3720}]},{c:[{v:"Not Available"},
{v:"2011Q3"},{v:4}]},{c:[{v:"One"},{v:"2011Q3"},{v:2193}]},{c:
[{v:"Three"},{v:"2011Q3"},{v:2879}]},{c:[{v:"Two"},{v:"2011Q3"},{v:
2813}]}]};
var data = new google.visualization.DataTable(JSONObject,
0.5);
var chart = new
google.visualization.MotionChart(document.getElementById('chart_div'));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Dinga Bogdan
Oct 11, 2011, 4:35:33 AM10/11/11
to Google Visualization API
Here is the source code made by me in Play Ground and it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Motion Chart
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
<script type="text/javascript">
visualization = new
google.visualization.MotionChart(document.getElementById('motion'));
visualization.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="motion"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Motion Chart
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['motionchart']});
</script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['motionchart']});
<script type="text/javascript">
google.visualization.MotionChart(document.getElementById('motion'));
visualization.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="motion"></div>
</body>
</html>
Dinga Bogdan
Oct 11, 2011, 4:55:54 AM10/11/11
to Google Visualization API
On the other hand, I will try to show you how do I use PHP/Json to
query MySQL and parse it to Google API.
So, the PHP must echo a json string, for this example I will show you
how do I create a Table with users thru Google Api, must be the same
for any graph type.
PHP:
//Make a function
function ulist(){
... I first connect to the DB ...
$query = mysql_query("SELECT * FROM `security` ;"); //query for the
values
$values = array(); //build an empty array
// do a while loop to fetch all the data I want, here I read all the
rows of the db.
while ( $row = mysql_fetch_assoc($query) ){
if ( $row['attempt'] < 3 ){ $state = "Active" ; }else{ $state =
"Inactive" ; }
$row = array('c' => array(
array( 'v' => $row['username'] , 'f' => NULL ),
array( 'v' => $row['name'] , 'f' => NULL ),
array( 'v' => $row['email'] , 'f' => NULL ),
array( 'v' => $row['level'] , 'f' => NULL ),
array( 'v' => $row['lastlogin'] , 'f' => NULL ),
array( 'v' => $state , 'f' => NULL ),
array( 'v' => '<a href="deluser.php?uid='.$row['id'].'&o=1"><img
src="pic/user-edit-icon.png" /></a>' , 'f' => NULL ),
array( 'v' => '<a href="deluser.php?uid='.$row['id'].'&o=0"
onclick="return confirm(\'You are about to delete '.$row['name'].'
from the system !\');"><img src="pic/user-delete-icon.png" /></a>' ,
'f' => NULL )
));
array_push($values,$row); // I push all the arrays from the result to
the empty array created above
}
return $values ; // I return the whole array created.
} //close the function
// I make in the while loop a check to convert the numbers to strings
for a better output, I got my system set up so that a user can be
locked or not, this depends if he has more than 3 failed attempt on
login, just forget this, it is not important.
//Then, lets build the colums
$cols = array(
array( 'id' => '', 'label' => 'Username', 'type' => 'string'),
array( 'id' => '', 'label' => 'Name', 'type' => 'string'),
array( 'id' => '', 'label' => 'e-mail', 'type' => 'string'),
array( 'id' => '', 'label' => 'Level', 'type' => 'string'),
array( 'id' => '', 'label' => 'Last Login', 'type' => 'string'),
array( 'id' => '', 'label' => 'State', 'type' => 'string'),
array( 'id' => '', 'label' => 'Edit', 'type' => 'string'),
array( 'id' => '', 'label' => 'Delete', 'type' => 'string')
);
//This is simple! every value from the row above must have a "header".
This is easy if you understand it like a Table (practice with Google
Table)
$rows = ulist(); //the variable $rows contains all the rows built
above.
//and the final part is to echo out he result.
echo '{ "cols": '.json_encode($cols).', "rows":
'.json_encode($rows).'}';
The PHP will output the JSON string ready to be processed by Google
API.
Now for the JavaScript source code:
I make a var called jsonData like this:
var jsonData = $.ajax({
url: "FILEFROMABOVE.php", //file name from the above php
code !!!
dataType:"json",
async: false
}).responseText;
//this will query the PHP file and get the JSON string
var data = new google.visualization.DataTable(jsonData);
//from here everything is the same, options,
google.visualization.motionchart/table/linechart etc etc.
Last but not least you must have jquery included in the HTML head tag.
I downloaded it and make a folder called js in the root and included
it like this:
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
I hope this helps!
query MySQL and parse it to Google API.
So, the PHP must echo a json string, for this example I will show you
how do I create a Table with users thru Google Api, must be the same
for any graph type.
PHP:
//Make a function
function ulist(){
... I first connect to the DB ...
$query = mysql_query("SELECT * FROM `security` ;"); //query for the
values
$values = array(); //build an empty array
// do a while loop to fetch all the data I want, here I read all the
rows of the db.
while ( $row = mysql_fetch_assoc($query) ){
if ( $row['attempt'] < 3 ){ $state = "Active" ; }else{ $state =
"Inactive" ; }
$row = array('c' => array(
array( 'v' => $row['username'] , 'f' => NULL ),
array( 'v' => $row['name'] , 'f' => NULL ),
array( 'v' => $row['email'] , 'f' => NULL ),
array( 'v' => $row['level'] , 'f' => NULL ),
array( 'v' => $row['lastlogin'] , 'f' => NULL ),
array( 'v' => $state , 'f' => NULL ),
array( 'v' => '<a href="deluser.php?uid='.$row['id'].'&o=1"><img
src="pic/user-edit-icon.png" /></a>' , 'f' => NULL ),
array( 'v' => '<a href="deluser.php?uid='.$row['id'].'&o=0"
onclick="return confirm(\'You are about to delete '.$row['name'].'
from the system !\');"><img src="pic/user-delete-icon.png" /></a>' ,
'f' => NULL )
));
array_push($values,$row); // I push all the arrays from the result to
the empty array created above
}
return $values ; // I return the whole array created.
} //close the function
// I make in the while loop a check to convert the numbers to strings
for a better output, I got my system set up so that a user can be
locked or not, this depends if he has more than 3 failed attempt on
login, just forget this, it is not important.
//Then, lets build the colums
$cols = array(
array( 'id' => '', 'label' => 'Username', 'type' => 'string'),
array( 'id' => '', 'label' => 'Name', 'type' => 'string'),
array( 'id' => '', 'label' => 'e-mail', 'type' => 'string'),
array( 'id' => '', 'label' => 'Level', 'type' => 'string'),
array( 'id' => '', 'label' => 'Last Login', 'type' => 'string'),
array( 'id' => '', 'label' => 'State', 'type' => 'string'),
array( 'id' => '', 'label' => 'Edit', 'type' => 'string'),
array( 'id' => '', 'label' => 'Delete', 'type' => 'string')
);
//This is simple! every value from the row above must have a "header".
This is easy if you understand it like a Table (practice with Google
Table)
$rows = ulist(); //the variable $rows contains all the rows built
above.
//and the final part is to echo out he result.
echo '{ "cols": '.json_encode($cols).', "rows":
'.json_encode($rows).'}';
The PHP will output the JSON string ready to be processed by Google
API.
Now for the JavaScript source code:
I make a var called jsonData like this:
var jsonData = $.ajax({
url: "FILEFROMABOVE.php", //file name from the above php
code !!!
dataType:"json",
async: false
}).responseText;
//this will query the PHP file and get the JSON string
var data = new google.visualization.DataTable(jsonData);
//from here everything is the same, options,
google.visualization.motionchart/table/linechart etc etc.
Last but not least you must have jquery included in the HTML head tag.
I downloaded it and make a folder called js in the root and included
it like this:
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
I hope this helps!
asgallant
Oct 11, 2011, 11:38:21 AM10/11/11
to google-visua...@googlegroups.com
You are missing the chart.draw() call at the end of the drawVisualization function:
chart.draw(data, <options object>);
What problems were you having with querying MySQL?
loranstefani
Oct 12, 2011, 12:20:46 PM10/12/11
to google-visua...@googlegroups.com
Thanks, I was finally able to get it to work before viewing your response, but with MUCH more manual labor. This will make it easier next go-around! Thanks!
loranstefani
Oct 12, 2011, 12:22:30 PM10/12/11
to google-visua...@googlegroups.com
I have my own class to pull results from MySQL, but I did not know you have to echo the json_encode for columns/rows separately and was a little confused at how that was all supposed to come together. I also had to go back and take out some quotes somewhere, and ended up just manually compiling my data since it was only about 25 rows. I plan to do much more complex queries in the future, though and am glad I know how to do it properly now.
Thanks for reading/responding!
Thanks for reading/responding!
loranstefani
Oct 12, 2011, 12:26:26 PM10/12/11
to google-visua...@googlegroups.com
I will open a new thread as well, but since you two have already looked at my former code, which has been modified as seen below, can you tell me if there is a way to make the hover over each dot permanent for easier viewing? Also, is there a way to alter the original state of the bar graph without changing the bubble chart? I want the horizontal axis on the bar chart to be alphabetical, but when I change it in my settings/options, it makes the horizontal axis of the bubble chart change from "Time" to "Count." I cannot see how these are related in the code and assume it must be something in the original API and out of my control, but I thought I'd ask anyway.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var JSONObject = {cols:[{"id":"rating","label":"Rating","type":"string"},{"id":"time","label":"Quarter","type":"string"},{"id":"count","label":"Count","type":"number"}],rows:[{c:[{v:"5 out of 5 stars"},{v:"2008Q1"},{v:1619}]},{c:[{v:"4 out of 5 stars"},{v:"2008Q1"},{v:3201}]},{c:[{v:"1 out of 5 stars"},{v:"2008Q1"},{v:3219}]},{c:[{v:"3 out of 5 stars"},{v:"2008Q1"},{v:2997}]},{c:[{v:"2 out of 5 stars"},{v:"2008Q1"},{v:2915}]},{c:[{v:"5 out of 5 stars"},{v:"2008Q4"},{v:1619}]},{c:[{v:"4 out of 5 stars"},{v:"2008Q4"},{v:3201}]},{c:[{v:"1 out of 5 stars"},{v:"2008Q4"},{v:3219}]},{c:[{v:"3 out of 5 stars"},{v:"2008Q4"},{v:2997}]},{c:[{v:"2 out of 5 stars"},{v:"2008Q4"},{v:2915}]},{c:[{v:"5 out of 5 stars"},{v:"2009Q1"},{v:1576}]},{c:[{v:"4 out of 5 stars"},{v:"2009Q1"},{v:3258}]},{c:[{v:"1 out of 5 stars"},{v:"2009Q1"},{v:3195}]},{c:[{v:"3 out of 5 stars"},{v:"2009Q1"},{v:2997}]},{c:[{v:"2 out of 5 stars"},{v:"2009Q1"},{v:2911}]},{c:[{v:"5 out of 5 stars"},{v:"2009Q2"},{v:1644}]},{c:[{v:"4 out of 5 stars"},{v:"2009Q2"},{v:3276}]},{c:[{v:"1 out of 5 stars"},{v:"2009Q2"},{v:3096}]},{c:[{v:"3 out of 5 stars"},{v:"2009Q2"},{v:2967}]},{c:[{v:"2 out of 5 stars"},{v:"2009Q2"},{v:2935}]},{c:[{v:"5 out of 5 stars"},{v:"2009Q3"},{v:1654}]},{c:[{v:"4 out of 5 stars"},{v:"2009Q3"},{v:3388}]},{c:[{v:"1 out of 5 stars"},{v:"2009Q3"},{v:2964}]},{c:[{v:"3 out of 5 stars"},{v:"2009Q3"},{v:2951}]},{c:[{v:"2 out of 5 stars"},{v:"2009Q3"},{v:2929}]},{c:[{v:"5 out of 5 stars"},{v:"2009Q4"},{v:1704}]},{c:[{v:"4 out of 5 stars"},{v:"2009Q4"},{v:3465}]},{c:[{v:"1 out of 5 stars"},{v:"2009Q4"},{v:2827}]},{c:[{v:"3 out of 5 stars"},{v:"2009Q4"},{v:2950}]},{c:[{v:"2 out of 5 stars"},{v:"2009Q4"},{v:2917}]},{c:[{v:"5 out of 5 stars"},{v:"2010Q1"},{v:1902}]},{c:[{v:"4 out of 5 stars"},{v:"2010Q1"},{v:3529}]},{c:[{v:"1 out of 5 stars"},{v:"2010Q1"},{v:2524}]},{c:[{v:"3 out of 5 stars"},{v:"2010Q1"},{v:2965}]},{c:[{v:"2 out of 5 stars"},{v:"2010Q1"},{v:2949}]},{c:[{v:"5 out of 5 stars"},{v:"2010Q2"},{v:1929}]},{c:[{v:"4 out of 5 stars"},{v:"2010Q2"},{v:3562}]},{c:[{v:"1 out of 5 stars"},{v:"2010Q2"},{v:2445}]},{c:[{v:"3 out of 5 stars"},{v:"2010Q2"},{v:2982}]},{c:[{v:"2 out of 5 stars"},{v:"2010Q2"},{v:2916}]},{c:[{v:"5 out of 5 stars"},{v:"2010Q3"},{v:1916}]},{c:[{v:"4 out of 5 stars"},{v:"2010Q3"},{v:3535}]},{c:[{v:"1 out of 5 stars"},{v:"2010Q3"},{v:2393}]},{c:[{v:"3 out of 5 stars"},{v:"2010Q3"},{v:3001}]},{c:[{v:"2 out of 5 stars"},{v:"2010Q3"},{v:2855}]},{c:[{v:"5 out of 5 stars"},{v:"2010Q4"},{v:1925}]},{c:[{v:"4 out of 5 stars"},{v:"2010Q4"},{v:3564}]},{c:[{v:"1 out of 5 stars"},{v:"2010Q4"},{v:2422}]},{c:[{v:"3 out of 5 stars"},{v:"2010Q4"},{v:3024}]},{c:[{v:"2 out of 5 stars"},{v:"2010Q4"},{v:2884}]},{c:[{v:"5 out of 5 stars"},{v:"2011Q1"},{v:1922}]},{c:[{v:"4 out of 5 stars"},{v:"2011Q1"},{v:3569}]},{c:[{v:"1 out of 5 stars"},{v:"2011Q1"},{v:2419}]},{c:[{v:"3 out of 5 stars"},{v:"2011Q1"},{v:3024}]},{c:[{v:"2 out of 5 stars"},{v:"2011Q1"},{v:2885}]},{c:[{v:"5 out of 5 stars"},{v:"2011Q3"},{v:2096}]},{c:[{v:"4 out of 5 stars"},{v:"2011Q3"},{v:3720}]},{c:[{v:"1 out of 5 stars"},{v:"2011Q3"},{v:2193}]},{c:[{v:"3 out of 5 stars"},{v:"2011Q3"},{v:2879}]},{c:[{v:"2 out of 5 stars"},{v:"2011Q3"},{v:2813}]}]};
var data = new google.visualization.DataTable(JSONObject, 0.5);
var visualization= new google.visualization.MotionChart(document.getElementById('chart_div'));
var options = {};
options['state'] =
'{"sizeOption":"2","xZoomedDataMax":1309478400000,"showTrails":false,"nonSelectedAlpha":0.4,"yZoomedDataMin":4,"yZoomedIn":false,"iconType":"BUBBLE","iconKeySettings":[],"orderedByX":false,"dimensions":{"iconDimensions":["dim0"]},"playDuration":15000,"xZoomedDataMin":1199145600000,"yLambda":1,"xZoomedIn":false,"time":"2008","uniColorForNonSelected":false,"duration":{"timeUnit":"Q","multiplier":1},"orderedByY":false,"xAxisOption":"_TIME","xLambda":1,"colorOption":"_UNIQUE_COLOR","yAxisOption":"2","yZoomedDataMax":3720}';
options['width'] = 600;
options['height'] = 400;
visualization.draw(data, options,{'allowHtml': true});
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable(JSONObject, 0.5);
var options = {};
options['state'] =
'{"sizeOption":"2","xZoomedDataMax":1309478400000,"showTrails":false,"nonSelectedAlpha":0.4,"yZoomedDataMin":4,"yZoomedIn":false,"iconType":"BUBBLE","iconKeySettings":[],"orderedByX":false,"dimensions":{"iconDimensions":["dim0"]},"playDuration":15000,"xZoomedDataMin":1199145600000,"yLambda":1,"xZoomedIn":false,"time":"2008","uniColorForNonSelected":false,"duration":{"timeUnit":"Q","multiplier":1},"orderedByY":false,"xAxisOption":"_TIME","xLambda":1,"colorOption":"_UNIQUE_COLOR","yAxisOption":"2","yZoomedDataMax":3720}';
options['width'] = 600;
options['height'] = 400;
visualization.draw(data, options,{'allowHtml': true});
Reply all
Reply to author
Forward
0 new messages