Difference between revisions of "Charts from HTML tables"

From JSXGraph Wiki
Jump to navigationJump to search
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 12: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');