Permanent Hover and Changing Original State in Visualizations
17 views
Skip to first unread message
loranstefani
Oct 12, 2011, 12:27:37 PM10/12/11
to google-visua...@googlegroups.com
Is there a way to make the hover over each bubble 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});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
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});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages