//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 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:
New Democrat:
Bloc Quebecois:

New Democrat
Bloc Quebecois

...is made from the following code:

<!doctype html>
<html lang="en">
        <meta charset="UTF-8">
        <title>Election graph</title>
        <meta name="description" content="Make an election graph">
        <meta name="author" content="Dave Drapak">
            Change log:
                20. October 2015                                                - Drapak
                21. October         - separated functions like a good programmer! - Drapak
                4. April 2017       - moved script to tail & onclicks to <script> - Drapak
                27. October 2018    - updated style and clarified code          - Drapak
            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;

        <h4>Make an election graph!</h4>
            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>
            <button id="displayGraphButtonId">Click to graphinate!</button><br>
        <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>

            //OUTPUT: change the graph divs to the calculated width
            var displayGraph = function ( graphObj ) {
                console.log( 'in displayGraph, graphObj=', graphObj );

                document.querySelector( '#liberalGraphId'       ).style.width           
                    = graphObj.liberal      + 'px';
                document.querySelector( '#conservativeGraphId'  ).style.width       
                    = graphObj.conservative + 'px';
                document.querySelector( '#newDemocratGraphId'   ).style.width       
                    = graphObj.newDemocrat  + 'px';
                document.querySelector( '#blocGraphId'          ).style.width               
                    = graphObj.bloc         + 'px';
                document.querySelector( '#greenGraphId'         ).style.width               
                    = graphObj.green        + 'px';             
            //PROCESS: calculate the width of the graph to display, and store in graphWidth
            var calculateGraphWidths = function ( electionResultsObj ) {
                    'in calculateGraphWidths, electionResultsObj=', 
                //INIT: the multiplier to get an attractive width
                const GRAPH_MULTIPLIER = 5;
                //INIT: the variable to store the widths as an empty object
                var graphObj = {};      
                graphObj.liberal        = electionResultsObj.liberal        * GRAPH_MULTIPLIER;
                graphObj.conservative   = electionResultsObj.conservative   * GRAPH_MULTIPLIER;
                graphObj.newDemocrat    = electionResultsObj.newDemocrat    * GRAPH_MULTIPLIER;
                graphObj.bloc           = electionResultsObj.bloc           * GRAPH_MULTIPLIER;
                graphObj.green          = electionResultsObj.green          * GRAPH_MULTIPLIER;
                return graphObj;
            //INPUT: read in the election results and store inside electionResultsObj
            var getElectionResults = function () {
                console.log( 'in getElectionResults' );
                //INIT: set up the election results as an empty object
                var electionResultsObj = {};        
                    = document.querySelector( '#liberalInputId'         ).value;
                    = document.querySelector( '#conservativeInputId'    ).value;
                    = document.querySelector( '#newDemocratInputId'     ).value;
                    = document.querySelector( '#blocInputId'            ).value;
                    = document.querySelector( '#greenInputId'           ).value;
                return electionResultsObj;
            //MAIN: connect together the data flow with the correct functions
            var mainProcedure = function () {
                console.log('in mainProcedure');
                //INPUT: get the election results stored in an object
                var electionResultsObj      = getElectionResults();
                //PROCESS: create an object of the graph widths calculated from the results 
                var graphObj                = calculateGraphWidths( electionResultsObj );
                //OUTPUT: display a graph using the widths in the graph object
                displayGraph( graphObj );
            //INPUT: connect the mainProcedure and hideGraph to their buttons
            document.querySelector( '#displayGraphButtonId' ).onclick   = mainProcedure;