i want to chart the service levels for different objects where the Y
axis is the object's service level, the bubble size is the number of
errors, and the X axis is the number of errors.
The X axis conventionally increases from 0 to the maximum 'X' data
value left to right. In this case i want to reverse this so the
maximum X value is at the left and 0 at the right.
i want to do this because as an object's errors decrease it's service
level increases, and it does not look natural for the bubbles to float
up from bottom right to top left as time progresses.
i have found that by setting the error data values to be negative the
correct et can be achieved, but this has two drawbacks:
1. The minus sign prefixing 'X' axis values looks odd
-250 -200 -150 -100 -50 0
2. If the colors are set to unique for service level, we get the
perverse effect that as the service level increases, the colors get
hotter - the trend is from blue to red and not the intended way : from
red (many errors) to blue ( few errors).
This is the code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
// Load the Visualization API and the motion chart package.
google.load('visualization', '1', {'packages':
['motionchart']});
// Set a callback to run when the API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the motion chart, passes in the data and
// draws it.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Error Type');
data.addColumn('string', 'Date');
data.addColumn('number', 'Errors');
data.addColumn('number', 'Service Level');
data.addColumn('string', 'Object Type');
data.addRows(1);
data.setValue(0, 0, 'Developer');
data.setValue(0, 1, '2008Q1');
data.setValue(0, 2, -260);
data.setValue(0, 3, 94.6);
data.setValue(0, 4, 'Custom');
data.addRows(1);
data.setValue(1, 0, 'Developer');
data.setValue(1, 1, '2008Q2');
data.setValue(1, 2, -200);
data.setValue(1, 3, 97.2);
data.setValue(1, 4, 'Custom');
data.addRows(1);
data.setValue(2, 0, 'Developer');
data.setValue(2, 1, '2008Q3');
data.setValue(2, 2, -130);
data.setValue(2, 3, 98.0);
data.setValue(2, 4, 'Custom');
data.addRows(1);
data.setValue(3, 0, 'Developer');
data.setValue(3, 1, '2008Q4');
data.setValue(3, 2, -40);
data.setValue(3, 3, 99.5);
data.setValue(3, 4, 'Custom');
data.addRows(1);
data.setValue(4, 0, 'Timeout');
data.setValue(4, 1, '2008Q1');
data.setValue(4, 2, -160);
data.setValue(4, 3, 92.6);
data.setValue(4, 4, 'Standard');
data.addRows(1);
data.setValue(5, 0, 'Timeout');
data.setValue(5, 1, '2008Q2');
data.setValue(5, 2, -120);
data.setValue(5, 3, 93.7);
data.setValue(5, 4, 'Standard');
data.addRows(1);
data.setValue(6, 0, 'Timeout');
data.setValue(6, 1, '2008Q3');
data.setValue(6, 2, -60);
data.setValue(6, 3, 94.8);
data.setValue(6, 4, 'Standard');
data.addRows(1);
data.setValue(7, 0, 'Timeout');
data.setValue(7, 1, '2008Q4');
data.setValue(7, 2, -10);
data.setValue(7, 3, 95.0);
data.setValue(7, 4, 'Standard');
var chart = new google.visualization.MotionChart
(document.getElementById('chart_div'));
chart.draw(data, {width: 600, height:300});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 600px; height: 300px;"></div>
</body>
</html>
On a minor topic, trails don't work and i have found no FAQ or trouble
shooting infor on this.
This is a somewhat long post i know, but as it's about a fundamental
capability (or otherwise) of the tool (at least as currenntly exposed
by the api) i hope this is Ok.
Thanks
dave
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---
