Charts from HTML tables - tutorial

From JSXGraph Wiki
Revision as of 17:35, 21 December 2009 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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