Charts from HTML tables

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

1949 1953 1957 1961 1965 1969 1972 1976 1980 1983 1987 1990 1994 1998 2002 2005 2009

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