Difference between revisions of "Charts from HTML tables - tutorial"

From JSXGraph Wiki
Jump to: navigation, search
Line 128: Line 128:
 
Then, with some keystrokes the JSXGraph chart from this tables is created.
 
Then, with some keystrokes the JSXGraph chart from this tables is created.
 
<jsxgraph width="600" height="450">
 
<jsxgraph width="600" height="450">
        var board1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
+
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
+
      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],
+
      years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
            hStroke = [], charts1, charts2, charts3, i;
+
      chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',  
 
+
                                                withHeaders: true, colorArray: colors, strokeColor: colors,  
        charts1 = board1.create('chart', ['mytable'], {chartStyle: 'point,line', withHeaders: true, colorArray: colors, strokeColor: colors, fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});
+
                                                fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),
 
+
      brd.highlightInfobox = function(x,y,el) {
        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.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.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
 
             this.infobox.rendNode.style.padding = '5px';
 
             this.infobox.rendNode.style.padding = '5px';
 
             this.infobox.rendNode.style.backgroundColor = 'white';
 
             this.infobox.rendNode.style.backgroundColor = 'white';
        }
+
      }
 
</jsxgraph>
 
</jsxgraph>
  
Line 270: Line 269:
 
</source>
 
</source>
 
<source lang="javascript">
 
<source lang="javascript">
        var board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
+
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            board2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
+
      colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
            board3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
+
      years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
            colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
+
      chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',  
            years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
+
                                                withHeaders: true, colorArray: colors, strokeColor: colors,  
            hStroke = [], charts1, charts2, charts3, i;
+
                                                fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),
 
+
      brd.highlightInfobox = function(x,y,el) {
        //--------------------------------------
 
        // 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.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.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
 
             this.infobox.rendNode.style.padding = '5px';
 
             this.infobox.rendNode.style.padding = '5px';
 
             this.infobox.rendNode.style.backgroundColor = 'white';
 
             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>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Revision as of 18:46, 21 December 2009

JSXGraph is able to read data from HTML tables and display charts. Here it is explained how to do it. First, there is an HTML table showing the results of the German Bundestag elections for some parties 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

Then, with some keystrokes the JSXGraph chart from this tables is created.

The code to produce this page

The HTML table is generated by this code:

<table id="mytable" style="border: 1px solid gray;">
<tr>
 <td>Wahljahr</td>
 <td>1949</td>
 <td>1953</td>
 <td>1957</td>
 <td>1961</td>
 <td>1965</td>
 <td>1969</td>
 <td>1972</td>
 <td>1976</td>
 <td>1980</td>
 <td>1983</td>
 <td>1987</td>
 <td>1990</td>
 <td>1994</td>
 <td>1998</td>
 <td>2002</td>
 <td>2005</td>
 <td>2009</td>
</tr>
<tr>
 <td>CDU</td>
 <td>25.2</td>
 <td>36.4</td>
 <td>39.7</td>
 <td>35.8</td>
 <td>39.3</td>
 <td>36.6</td>
 <td>35.2</td> 
 <td>38.0</td>
 <td>34.2</td>
 <td>38.2</td>
 <td>34.5</td>
 <td>36.7</td>
 <td>34.2</td>
 <td>28.4</td>
 <td>29.5</td>
 <td>27.8</td>
 <td>27.3</td> 
</tr>
<tr>
 <td>CSU</td>
 <td>5.8</td>
 <td>8.8</td>
 <td>10.5</td>
 <td>9.6</td>
 <td>9.6</td>
 <td>9.5</td>
 <td>9.7</td> 
 <td>10.6</td>
 <td>10.3</td>
 <td>10.6</td>
 <td>9.8</td>
 <td>7.1</td>
 <td>7.3</td>
 <td>6.7</td>
 <td>9.0</td>
 <td>7.4</td>
 <td>6.5</td> 
</tr>
<tr>
 <td>SPD</td>
 <td>29.2</td>
 <td>28.8</td>
 <td>31.8</td>
 <td>36.2</td>
 <td>39.3</td>
 <td>42.7</td>
 <td>45.8</td> 
 <td>42.6</td>
 <td>42.9</td>
 <td>38.2</td>
 <td>37.0</td>
 <td>33.5</td>
 <td>36.4</td>
 <td>40.9</td>
 <td>38.5</td>
 <td>34.2</td>
 <td>23.0</td>
</tr>
<tr>
 <td>FDP</td>
 <td>11.9</td>
 <td>9.5</td>
 <td>7.7</td>
 <td>12.8</td>
 <td>9.5</td>
 <td>5.8</td>
 <td>8.4</td>
 <td>7.9</td>
 <td>10.6</td>
 <td>7.0</td>
 <td>9.1</td>
 <td>11.0</td>
 <td>6.9</td>
 <td>6.2</td>
 <td>7.4</td>
 <td>9.8</td>
 <td>14.6</td>
</tr>
<tr>
 <td>B&uuml;ndnis 90/Die Gr&uuml;nen</td>
 <td>-</td>
 <td>-</td>
 <td>-</td>
 <td>-</td>
 <td>-</td>
 <td>-</td>
 <td>-</td> 
 <td>-</td>
 <td>1.5</td>
 <td>5.6</td>
 <td>8.3</td>
 <td>5</td>
 <td>7.3</td>
 <td>6.7</td>
 <td>8.6</td>
 <td>8.1</td>
 <td>10.7</td>
</tr>
</table>
  var brd = JXG.JSXGraph.initBoard('jxgbox', {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],
      chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line', 
                                                withHeaders: true, colorArray: colors, strokeColor: colors, 
                                                fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),
      brd.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';
      }