//MAKE: 3.02 Skill-builder: Make a bar graph

Saving your work

Use Save as... to save the empty template as "3.02S-MakeABarGraph-LastName.html" in your Computer Programming 12 directory.

The assignment

Use Javascript code to create a chart of the most common programming languages on Github, the most popular place on the web to find open source coding projects.

An example full of hints:

Graph the 2015 federal election results

Please enter the number of seats won by the respective parties:
Liberal:
Conservative:
New Democrat:
Bloc Quebecois:
Green:


Liberal
Conservative
New Democrat
Bloc Quebecois
Green

...is made from the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Election graph</title>
        <meta name="description" content="Make an election graph">
        <meta name="author" content="Dave Drapak">
        <!--
            Change log:
                Created:    20. October 2015
                Modified:   21. October         - separated functions like a good programmer!
                            4. April 2017       - moved script to tail & onclicks to <script>
        -->
        <style>
            input, button {
                position:           absolute;
                left:               10em;
            }
            div {
                color:              white;
                min-height:         1.2em;
                max-height:         1.2em;
                width:              0em;
                padding-left:       0.3em;
                overflow:           hidden;
            }
            #liberalGraphID {
                background-color:   red;
            }
            #conservativeGraphID {
                background-color:   blue;
            }
            #newDemocratGraphID {
                background-color:   orange;
            }
            #blocGraphID {
                background-color:   cyan;
            }
            #greenGraphID {
                background-color:   green;
            }
        </style>
    </head>

    <body>
        <h4>Make an election graph!</h4>
        <p>
            Please enter the number of seats won by the respective parties:<br>
            Liberal:        <input id="liberalInputID"      value="184"><br>
            Conservative:   <input id="conservativeInputID" value="99"><br>
            New Democrat:   <input id="newDemocratInputID"  value="44"><br>
            Bloc Quebecois: <input id="blocInputID"         value="10"><br>
            Green:          <input id="greenInputID"        value="1"><br><br>
            <button id="displayGraphButtonID">Click to graphinate!</button><br>
        </p>
        <hr>
        <div id="liberalGraphID">Liberal</div>
        <div id="conservativeGraphID"> Conservative</div>
        <div id="newDemocratGraphID"> New Democrat</div>
        <div id="blocGraphID"> Bloc Quebecois</div>
        <div id="greenGraphID"> Green</div>

        <script>
            var mainProcedure = function () {
                console.log('in mainProcedure');
                
                var resultsObj      = getElectionResults();
                var graphWidthObj   = calculateGraphWidths( resultsObj );
                displayGraph( graphWidthObj );
            }
            
            //INPUT: read in the election results and store inside inputObj
            var getElectionResults = function () {
                console.log( 'in getElectionResults' ); // for debugging!
                var electionResults = {};       //declare first as an empty object
                
                electionResults.liberal         
                    = document.getElementById('liberalInputID').value;
                electionResults.conservative    
                    = document.getElementById('conservativeInputID').value;
                electionResults.newDemocrat     
                    = document.getElementById('newDemocratInputID').value;
                electionResults.bloc            
                    = document.getElementById('blocInputID').value;
                electionResults.green           
                    = document.getElementById('greenInputID').value;
                
                return electionResults;
            }
            
            //PROCESS: calculate the width of the graph to display, and store in graphWidth
            var calculateGraphWidths = function ( electionResults ) {
                console.log( 'in calculateGraphWidths' ); // for debugging!
                var GRAPH_MULTIPLIER = 5;
                var graphWidth = {};        //declare first as an empty object
                
                graphWidth.liberal          = electionResults.liberal       * GRAPH_MULTIPLIER;
                graphWidth.conservative     = electionResults.conservative  * GRAPH_MULTIPLIER;
                graphWidth.newDemocrat      = electionResults.newDemocrat   * GRAPH_MULTIPLIER;
                graphWidth.bloc             = electionResults.bloc          * GRAPH_MULTIPLIER;
                graphWidth.green            = electionResults.green         * GRAPH_MULTIPLIER;
                
                return graphWidth;
            }
            
            //OUTPUT: change the graph divs to the calculated width
            var displayGraph = function ( graphWidth ) {
                console.log( 'in displayGraph' );   // for debugging!

                document.getElementById('liberalGraphID').style.width           
                    = graphWidth.liberal + 'px';
                document.getElementById('conservativeGraphID').style.width      
                    = graphWidth.conservative   + 'px';
                document.getElementById('newDemocratGraphID').style.width       
                    = graphWidth.newDemocrat    + 'px';
                document.getElementById('blocGraphID').style.width              
                    = graphWidth.bloc           + 'px';
                document.getElementById('greenGraphID').style.width             
                    = graphWidth.green          + 'px';             
            }
            
            //INPUT: connect the mainProcedure and hideGraph to their buttons
            document.getElementById('displayGraphButtonID').onclick = mainProcedure;
        </script>
    </body>
</html>