Hi,
Firstly, many thanks for this fantastic resource - I've been
thoroughly enjoying using it. I'm trying to create some graphs to
address a statistic problem:
The Objective:
Graph student exam marks in individual subjects vs their overall
average mark in all of the subjects they have completed. The idea is
to provide graphs to lecturers so that they can see if their subject
is 'too hard' or 'too easy' etc.
I've hacked a mockup together with some made up data - I've attached
it to the bottom of this message. It looks well and works reasonably
well apart from a few issues. The scatter plot shows the result
comparisons. The line chart shows the 45 degree "ideal" line. And
the orange line is meant to represent the statistic showing how
difficult or easy the module is for various categories of students (in
this example: easy for weaker students, hard for stronger students).
Ok the problem:
1) I've done this with opacity/filter on divs, which while it's a
pretty clever "hack" it's very prone to axes. For example: I need to
put an 100,100 data point in to make the axes match. I don't believe
there is a way to invisibly force axes to have a particular size? If
anyone could clarify this, I'd appreciate it.
2) The green line solution won't work in many situations. For
example, it could go negative and intersect the X axis at some random
point, which I can't really implement I think (maybe I could hack it
by splitting the X axis into 100 points or something but I haven't
tried this.
So here's my main question and forgive my ignorance - I've only "used"
visualisations and I haven't tried to implement my own.
Am I going down the wrong route trying to hack this sort of graph -
should I be developing my own visualisation which can combine both
types of graphs? Is this a large undertaking?
Or is there some sort of way to "draw" on a graph using javascript
etc. Perhaps using overlapping divs again?
Ok, I've written too much - any help anyone might have would be
greatfully appreciated.
Thanks in advance,
David
--- Code ---
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:
["scatterchart","areachart","linechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', ' ');
data.addColumn('number', ' ');
data.addRows(7);
data.setValue(0, 0, 50);
data.setValue(0, 1, 60);
data.setValue(1, 0, 40);
data.setValue(1, 1, 47);
data.setValue(2, 0, 78);
data.setValue(2, 1, 82);
data.setValue(3, 0, 65);
data.setValue(3, 1, 58);
data.setValue(4, 0, 20);
data.setValue(4, 1, 45);
data.setValue(5, 0, 90);
data.setValue(5, 1, 50);
data.setValue(6, 0, 100);
data.setValue(6, 1, 100);
var chart = new google.visualization.ScatterChart
(document.getElementById('chart_div'));
chart.draw(data, {width: 700, height: 500, legend:'none',
titleColor:'#888888', pointSize:4, titleY:'Student Mark in Module
EE101',titleX:'Student Average Mark in Programme Modules'});
}
google.setOnLoadCallback(drawChart4);
function drawChart4() {
var data4 = new google.visualization.DataTable();
data4.addColumn('number', ' ');
data4.addColumn('number', ' ');
data4.addRows(2);
data4.setValue(0, 0, 0);
data4.setValue(1, 0, 100);
data4.setValue(0, 1, 40);
data4.setValue(1, 1, 70);
var chart4 = new google.visualization.AreaChart
(document.getElementById('chart_div4'));
chart4.draw(data4, {width: 700, height: 500,
titleColor:'#888888', legend:'none', pointSize:2, colors:
['#ff6b00','green'],titleY:'Student Mark in Module
EE101',titleX:'Student Average Mark in Programme Modules'});
}
</script>
</head>
<body>
<div id="chart_div4" style="opacity: 1;position:absolute;top:
50px;left:50px"></div>
<div id="chart_div" style="filter: alpha(opacity = 70);opacity:
0.7; position:absolute;top:50px;left:50px"></div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
