Charts from HTML tables: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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">
<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 494:
   </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]]

Revision as of 10:44, 30 September 2009

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

German Bundestag elections - From 1949 to 2005

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');