simple underscore.js projects, walk through, &
tutorial
Lottery DataBase Analysis - 12 (flot graphs)
Like underscore.js, flot.js is a free library for Javascript.
The following code transforms the existing data into the format that flot.js requires.
And then, the code for the flot, follows that.
Graph is down at bottom of page.
// clears existing text
document.getElementById('prizeAvailableGraph').innerHTML = "";
// formats data to meet flots needs
data = _.map(percentData, function(a){
var temp = [];
temp[0] = "$" + a.prizeThis;
temp[1] = a.pAvailable;
return temp;
});
data[data.length - 1][0] = "ticket";
data.unshift(["%Max", percentTicketsAvailableMax]);// unshift adds a value to the beginning of an array
data.unshift(["%Ave", percentTicketsAvailableAve]); // these three values are for reference
data.unshift(["%Min", percentTicketsAvailableMin]); // and represent the degree of error in the other graphs
document.getElementById('outputOne').innerHTML = JSON.stringify(data); // output follows
$.plot("#prizeAvailableGraph", [ data ], {
series: {
bars: {
show: true,
barWidth: 0.75,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
}); //end flot output, graph 1 // and this is the first graph at the bottom of the page
document.getElementById('outputOne').innerHTML = JSON.stringify(data); // yields the following
1 Nada Yet
Once again, the first part formats the data, then the flot code follows, with the graph at the bottom of the page.
//prizeDistrubtionGraph -- Pie Chart Output
data = _.map(lotteryData, function(a){
var temp = [];
temp[0] = "$" + a.prizeThis;
temp[1] = a.numWinners;
return temp;
});// end data update
data[data.length - 1][0] = "ticket";
data.unshift(["losers", numLosingTickets]);
document.getElementById('outputTwo').innerHTML = JSON.stringify(data); // outputed below
$.plot('#ticketDistributionGraph', data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2/3,
//formatter: labelFormatter,
threshold: 0.1
}
}
},
legend: {
show: true
}
});
document.getElementById('outputTwo').innerHTML = JSON.stringify(data); // yields
2 Nada Yet
Permanent Display Stat area (summary of all meaningful stats, to date for this project):
var derivedLotteryStats = {
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
nada yet
};
var percentData =
nada yet
var lotterytData =
nada yet
As follows is the first flot graph.
The first three bars show the expected sales by chance.
The remaining show outstanding prizes (as a percentage of total starting prizes) still available for each prize category.
pie chart graph area -- if you see this, error
This is the second flot graph.
It shows the total number of
tickets as divided by each prize level. (So, biggest area
represents the non-winning tickets and the smallest represents the big
prize.)
Note: as a gambling analysis tool, this graph is pretty meaningless.
Ticket Distribution Graph
Also, between starting this page (and starting my review of the
underscore library) and now, I've decided to look into the YUI
library... if for no other reason, because it already has the
underscrore, flot, and a whole bunch of other libraries wrapped up into
one easy to use container.
So, after a few more pages (I want to
wrap up this lottery project first), I may never come back to
underscore. Still, the exercise was helpful to me. And I
would recommend the exercise to others a relatively easy way to get a
foothold on the mechanics of passing functions to functions.
Please Note: I am an idiot. No seriously. The odds
of my
gambling
odds calculations being correct are likely on par with my odds of ever
winning. You have been warned.