Charts from HTML tables - tutorial

JSXGraph is able to read data from HTML tables and display charts. Here it is explained how to do it:

German Bundestag elections - From 1949 to 2009

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

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