Charts from HTML tables: Difference between revisions

From JSXGraph Wiki
(New page: JSXGraph is able to read data from HTML tables and display charts. ==German Bundestag elections - From 1949 to 2005== <html> <link rel="stylesheet" type="text/css" href="/distrib/jsxgraph...)
 
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
JSXGraph is able to read data from HTML tables and display charts.
JSXGraph is able to read data from HTML tables and display charts.


==German Bundestag elections - From 1949 to 2005==
==German Bundestag elections - From 1949 to 2009==
<html>
<html>
<link rel="stylesheet" type="text/css" href="/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="/distrib/jsxgraph.css" />
Line 7: Line 7:
<script type="text/javascript" src="/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="/distrib/jsxgraphcore.js"></script>
<style type="text/css">
<style type="text/css">
         .election a.topmenu {
         a.topmenu {
             padding: 5px;
             padding: 5px;
             background-color: #ddd;
             background-color: #ddd;
Line 14: Line 14:
         }
         }


         .election a.topmenu:hover {
         a.topmenu:hover {
             padding: 5px;
             padding: 5px;
             margin: 0px;
             margin: 0px;
Line 361: Line 361:
</table>
</table>
</div>
</div>
<!-- Sub page 1: Chart showing the data from the whole table of page 0 -->
<div style="width:800px; display: block;" id="page1">
  <div id="jxgbox1" class="jxgbox" style="width:600px; height:450px; float:left"></div>
</div>
<div style="width:800px; display: block;" id="page2">
  <div id="jxgbox2" class="jxgbox" style="width:600px; height:450px; float:left"></div>
<div style="float: left"><br/> <!--a href="#" onclick="select_parties();" class="topmenu">Update display</a--><br /><br />
<form name="form_parties">
    <input type="checkbox" value="0" onchange="select_parties();" name="parties">CDU<br/>
    <input type="checkbox" value="1" onchange="select_parties();" name="parties">CSU<br/>
    <input type="checkbox" value="2" onchange="select_parties();" name="parties">SPD<br/>
    <input type="checkbox" value="3" onchange="select_parties();" name="parties">FDP<br/>
    <input type="checkbox" value="4" onchange="select_parties();" name="parties">B&uuml;ndnis 90/Die Gr&uuml;nen<br/>
    <input type="checkbox" value="5" onchange="select_parties();" name="parties">PDS/Linke<br/>
    <input type="checkbox" value="6" onchange="select_parties();" name="parties">Piraten<br/>
    <input type="checkbox" value="7" onchange="select_parties();" name="parties">NPD<br/>
    <input type="checkbox" value="8" onchange="select_parties();" name="parties">DP<br/>
    <input type="checkbox" value="9" onchange="select_parties();" name="parties">GB/BHE<br/>
    <input type="checkbox" value="10" onchange="select_parties();" name="parties">REP<br/>
    <input type="checkbox" value="11" onchange="select_parties();" name="parties">KPD<br/>
    <input type="checkbox" value="12" onchange="select_parties();" name="parties">BP<br/>
    <input type="checkbox" value="13" onchange="select_parties();" name="parties">Sonstige<br/>
</form></div>
</div>
<div style="width:800px; display: block;" id="page3">
  <div id="jxgbox3" class="jxgbox" style="width:600px; height:450px; float:left"></div>
<div style="float: left"><br/> <!--a href="#" onclick="select_parties();" class="topmenu">Update display</a--><br /><br />
<select id="select_years" onchange="select_years();">
    <option value="0">1949</option>
    <option value="1">1953</option>
    <option value="2">1957</option>
    <option value="3">1961</option>
    <option value="4">1965</option>
    <option value="5">1969</option>
    <option value="6">1972</option>
    <option value="7">1976</option>
    <option value="8">1980</option>
    <option value="9">1983</option>
    <option value="10">1987</option>
    <option value="11">1990</option>
    <option value="12">1994</option>
    <option value="13">1998</option>
    <option value="14">2002</option>
    <option value="15">2005</option>
    <option value="16">2009</option>
</select></div>
</div>
<div id="debug" style="display:block; float: right;"></div>
<br clear="all" />
<script type="text/javascript">
  /* <![CDATA[ */
        var board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            board2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            board3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
            years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
            hStroke = [], charts1, charts2, charts3, i;
        // sub page 1
        charts1 = board1.create('chart', ['btw'], {chartStyle: 'point,line', withHeaders: true, colorArray: colors, strokeColor: colors, fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});
        board1.highlightInfobox = function(x,y,el) {
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
            this.infobox.rendNode.style.padding = '5px';
            this.infobox.rendNode.style.backgroundColor = 'white';
        }
        // sub page 2
        function select_parties() {
            var i, chartType = 'line', color = [], part;
            if(charts2)
                board2.removeObject(charts2);
            part = [];
            $('input[name=parties]').each(function () { if(this.checked) { part.push(parseInt($(this).val())); color.push(colors[parseInt($(this).val())]); } });
            //if(part.length <4) chartType = 'bar';
    charts2 = board2.create('chart', ['btw'], {chartStyle: 'point,' + chartType, withHeaders: true, colorArray: color, strokeColor: color, fillColor: color, highlightFillColor: color, highlightStrokeColor: color, rows: part});
        }
        board2.highlightInfobox = function(x,y,el) {
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
            this.infobox.rendNode.style.padding = '5px';
            this.infobox.rendNode.style.backgroundColor = 'white';
        }
        // sub page 3
        function select_years() {
            var years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005],
                i, data, table, col;
            year = parseInt($('#select_years').val());
            table = (new JXG.DataSource()).loadFromTable('btw', true, true);
            col = table.getColumn(year);
            for(i=0; i<col.length; i++) {
                if(isNaN(col[i]))
                    col[i] = 0.;
            }
            if(charts3) {
                for(i=0; i<charts3[0].length; i++) {
                    charts3[0][i].vertices[1].moveTo([charts3[0][i].vertices[1].X(), col[i]], 500);
                    charts3[0][i].vertices[2].moveTo([charts3[0][i].vertices[2].X(), col[i]], 500);
                }
            } else {
                board3.suspendUpdate();
        charts3 = board3.create('chart', [col], {chartStyle: 'bar', colorArray: colors});
                board3.unsuspendUpdate();
            }
        }
        // general
        function show(page) {
            var i;
            for(i=0; i<4; i++) {
                $('#page' + i).css('display', 'none');
            }
            $('#' + page).css('display', 'block');
        }
        show('page0');
  /* ]]> */
  </script>
</html>
</html>
===The JavaScript code to produce this page===
<source lang="javascript">
        var board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            board2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            board3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
            years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
            hStroke = [], charts1, charts2, charts3, i;
        //--------------------------------------
        // sub page 1
        //--------------------------------------
        charts1 = board1.create('chart', ['btw'], {chartStyle: 'point,line', withHeaders: true, colorArray: colors, strokeColor: colors, fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});
        board1.highlightInfobox = function(x,y,el) {
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
            this.infobox.rendNode.style.padding = '5px';
            this.infobox.rendNode.style.backgroundColor = 'white';
        }
        //--------------------------------------
        // sub page 2
        //--------------------------------------
        function select_parties() {
            var i, chartType = 'line', color = [], part;
            if(charts2)
                board2.removeObject(charts2);
            part = [];
            $('input[name=parties]').each(function () { if(this.checked) { part.push(parseInt($(this).val())); color.push(colors[parseInt($(this).val())]); } });
            //if(part.length <4) chartType = 'bar';
    charts2 = board2.create('chart', ['btw'], {chartStyle: 'point,' + chartType, withHeaders: true, colorArray: color, strokeColor: color, fillColor: color, highlightFillColor: color, highlightStrokeColor: color, rows: part});
        }
        board2.highlightInfobox = function(x,y,el) {
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
            this.infobox.rendNode.style.padding = '5px';
            this.infobox.rendNode.style.backgroundColor = 'white';
        }
        //--------------------------------------
        // sub page 3
        //--------------------------------------
        function select_years() {
            var years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005],
                i, data, table, col;
            year = parseInt($('#select_years').val());
            table = (new JXG.DataSource()).loadFromTable('btw', true, true);
            col = table.getColumn(year);
            for(i=0; i<col.length; i++) {
                if(isNaN(col[i]))
                    col[i] = 0.;
            }
            if(charts3) {
                for(i=0; i<charts3[0].length; i++) {
                    charts3[0][i].vertices[1].moveTo([charts3[0][i].vertices[1].X(), col[i]], 500);
                    charts3[0][i].vertices[2].moveTo([charts3[0][i].vertices[2].X(), col[i]], 500);
                }
            } else {
                board3.suspendUpdate();
        charts3 = board3.create('chart', [col], {chartStyle: 'bar', colorArray: colors});
                board3.unsuspendUpdate();
            }
        }
        //--------------------------------------
        // general
        //--------------------------------------
        function show(page) {
            var i;
            for(i=0; i<4; i++) {
                $('#page' + i).css('display', 'none');
            }
            $('#' + page).css('display', 'block');
        }
        show('page0');
</source>
[[Category:Examples]]
[[Category:Charts]]

Latest revision as of 11:07, 30 September 2009

JSXGraph is able to read data from HTML tables and display charts.

German Bundestag elections - From 1949 to 2009

TableWhole table as chartChoose parties to displayChoose year to display

Wahljahr 1949 1953 1957 1961 1965 1969 1972 1976 1980 1983 1987 1990 1994 1998 2002 2005 2009
CDU 25.2 36.4 39.7 35.8 39.3 36.6 35.2 38.0 34.2 38.2 34.5 36.7 34.2 28.4 29.5 27.8 27.3
CSU 5.8 8.8 10.5 9.6 9.6 9.5 9.7 10.6 10.3 10.6 9.8 7.1 7.3 6.7 9.0 7.4 6.5
SPD 29.2 28.8 31.8 36.2 39.3 42.7 45.8 42.6 42.9 38.2 37.0 33.5 36.4 40.9 38.5 34.2 23.0
FDP 11.9 9.5 7.7 12.8 9.5 5.8 8.4 7.9 10.6 7.0 9.1 11.0 6.9 6.2 7.4 9.8 14.6
Bündnis 90/Die Grünen - - - - - - - - 1.5 5.6 8.3 5 7.3 6.7 8.6 8.1 10.7
PDS/Linke - - - - - - - - - - - 2.4 4.4 5.1 4.0 8.7 11.9
Piraten - - - - - - - - - - - - - - - - 2.0
NPD - - - - 2.0 4.3 0.6 0.3 0.2 0.2 0.6 0.3 0.0 0.3 0.4 1.6 1.5
DP 4.0 3.3 3.4 - - - - - - - - - - - - - -
GB/BHE - 5.9 4.6 - - - - - - - - - - - - - -
REP - - - - - - - - - - - 2.1 1.9 1.8 0.6 0.6 0.4
KPD 5.7 2.2 - - - - - - - - - - - - - - -
BP 4.2 1.7 0.9 - - 0.2 - - - - 0.1 0.1 0.1 0.1 0.0 0.1 0.1
Sonstige 14.0 7.8 9.4 5.7 3.6 5.3 0.9 0.9 0.5 0.5 1.3 4.1 3.4 5.9 3.0 1.7 2.0



CDU
CSU
SPD
FDP
Bündnis 90/Die Grünen
PDS/Linke
Piraten
NPD
DP
GB/BHE
REP
KPD
BP
Sonstige




The JavaScript code to produce this page

        var board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            board2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            board3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
            years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
            hStroke = [], charts1, charts2, charts3, i;

        //--------------------------------------
        // sub page 1
        //--------------------------------------
        charts1 = board1.create('chart', ['btw'], {chartStyle: 'point,line', withHeaders: true, colorArray: colors, strokeColor: colors, fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});

        board1.highlightInfobox = function(x,y,el) {
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
            this.infobox.rendNode.style.padding = '5px';
            this.infobox.rendNode.style.backgroundColor = 'white';
        }

        //--------------------------------------
        // sub page 2
        //--------------------------------------
        function select_parties() {
            var i, chartType = 'line', color = [], part;

            if(charts2)
                board2.removeObject(charts2);

            part = [];
            $('input[name=parties]').each(function () { if(this.checked) { part.push(parseInt($(this).val())); color.push(colors[parseInt($(this).val())]); } });

            //if(part.length <4) chartType = 'bar';

	    charts2 = board2.create('chart', ['btw'], {chartStyle: 'point,' + chartType, withHeaders: true, colorArray: color, strokeColor: color, fillColor: color, highlightFillColor: color, highlightStrokeColor: color, rows: part});
        }

        board2.highlightInfobox = function(x,y,el) {
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
            this.infobox.rendNode.style.padding = '5px';
            this.infobox.rendNode.style.backgroundColor = 'white';
        }

        //--------------------------------------
        // sub page 3
        //--------------------------------------
        function select_years() {
            var years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005],
                i, data, table, col;

            year = parseInt($('#select_years').val());

            table = (new JXG.DataSource()).loadFromTable('btw', true, true);
            col = table.getColumn(year);
            for(i=0; i<col.length; i++) {
                if(isNaN(col[i]))
                    col[i] = 0.;
            }

            if(charts3) {
                for(i=0; i<charts3[0].length; i++) {
                    charts3[0][i].vertices[1].moveTo([charts3[0][i].vertices[1].X(), col[i]], 500);
                    charts3[0][i].vertices[2].moveTo([charts3[0][i].vertices[2].X(), col[i]], 500);
                }
            } else {
                board3.suspendUpdate();
    	    	charts3 = board3.create('chart', [col], {chartStyle: 'bar', colorArray: colors});
                board3.unsuspendUpdate();
            }
        }

        //--------------------------------------
        // general
        //--------------------------------------
        function show(page) {
            var i;
            for(i=0; i<4; i++) {
                $('#page' + i).css('display', 'none');
            }

            $('#' + page).css('display', 'block');
        }
        show('page0');