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.


_.moreUnderscoreProjects

© Copyright 2013 Brett Paufler


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.