I'm new to gRaphael and not a hardcore JS dev able to unpick the source code, and there are zero docs on how to use it properly it seems.
I'm keen to get a dot chart up and running on my app, but am confused as to how the x- and y-values draw the dots on the chart canvas.
I've been using the demo at http://g.raphaeljs.com/dotchart.html as a basis for the graph. However, when I tinker with the data set, I lose all the dots from the chart.
I don't think I am understanding the relationship between the dots and the x's and y's in the canvas.
Can someone please enlighten me as to how to include the data that I'm returning from the database in the code below?
The data returned is an array with 23 elements, which range from 8 to 56.
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder2"),
xs = <%= chart_xs(@weeks) %>,
ys = <%= chart_ys(@weeks) %>,
data = <%= chart_data(@weeks) %>,
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {
symbol: "o",
max: 10,
heat: true,
axis: "0 0 1 1",
axisxstep: 23,
axisystep: 6,
axisxlabels: axisx,
axisxtype: " ",
axisytype: " ",
axisylabels: axisy
}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
Outputs like this:
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder2"),
xs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
ys = [220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220],
data = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {symbol: "o", max: 10, heat: true, axis: "0 0 1 1", axisxstep: 23, axisystep: 6, axisxlabels: axisx, axisxtype: " ", axisytype: " ", axisylabels: axisy}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
Frederico, can you explain then why this chart displays nothing on screen? If your explanation holds, then each of the 23 data points should be expressed on a continuous line across the canvas:
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder"),
xs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
ys = [7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
data = [294, 300, 204, 255, 348, 383, 334, 217, 114, 33, 44, 26, 41, 39, 52, 17, 13, 2, 0, 2, 5, 6, 64],
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {symbol: "o", max: 10, heat: true, axis: "0 0 1 1", axisxstep: 23, axisystep: 6, axisxlabels: axisx, axisxtype: " ", axisytype: " ", axisylabels: axisy}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
But nothing is displayed. This is the problem I am having with my data, which is roughly aligned with the data in this hard-coded script. So how do I get the data in my original output (see question) to display correctly do you think?
I am not familiar with Ruby on Rails, but I do know a thing or two about graphael, particularly... about the existence of unnofficial docs.
You could try reading the unnofficial docs here, or see other examples on using dot charts here.
Hope that helps, good luck!
Update
In essence it is like this:
You use the valuesx and valuesy arrays to place each dot in a x,y coordenate in the dot chart. For instance, see the simple dot example and you'll notice that the 6th parameter (y values) is an array
[220, 220, 220, 220, 220], if you change one of those values to 0, you'll notice how the rest of the dots are raise above the one with 0 for y value.The same goes for the 5th parameter (x values), you can use it to place a dot anywhere in the chart, along the X axis (you'll notice how in the example the x values array is composed of numbers 5, 10, 15, etc...
Finally, you use the 7th parameter (data) to give each dot a value (which is represented in the dot's radius and color if you set it up for that).
With that in mind, every dot in the chart is rendered using three numbers:
So, if you look back at the official dot chart example, you'll notice how the x values are from 0 to 23 (representing the 24 hours of the day), the y values are numbers from 1 to 7 repeated 24 times (to place each sequence of dots in it's corresponding day) and finally the data represents... well... something counted in that hour of that day :).
You can use axis labels to make the chart more comprehensible just like in the demo.