Difference between revisions of "Charts from HTML tables"

From JSXGraph Wiki
Jump to navigationJump to search
 
(2 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 413: Line 413:
  
 
<div id="debug" style="display:block; float: right;"></div>
 
<div id="debug" style="display:block; float: right;"></div>
  <script type="text/javascript">
+
<br clear="all" />
 +
<script type="text/javascript">
 
   /* <![CDATA[ */
 
   /* <![CDATA[ */
 
         var board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
 
         var board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
Line 494: Line 495:
 
   </script>
 
   </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 13: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');