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

From JSXGraph Wiki
Jump to: navigation, search
 
(12 intermediate revisions by 2 users not shown)
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'],
            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,
 +
                                                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';
 +
  }
 +
</jsxgraph>
 +
 
 +
===The code to produce this page===
 +
<source lang="javascript">
 +
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
 +
      colors = ['black', '#333333', 'red', 'yellow', 'green'],
 +
      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}),
  
        charts1 = board1.create('chart', ['mytable'], {chartStyle: 'point,line', withHeaders: true, colorArray: colors, strokeColor: colors, fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});
 
  
        board1.highlightInfobox = function(x,y,el) {
+
      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.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>
+
</source>
  
===The code to produce this page===
+
The HTML table ''mytable'' is generated by this code:
The HTML table is generated by this code:
 
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<table id="mytable" style="border: 1px solid gray;">
 
<table id="mytable" style="border: 1px solid gray;">
Line 268: Line 285:
 
</tr>
 
</tr>
 
</table>
 
</table>
</source>
 
<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>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Latest revision as of 10:54, 21 February 2013

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

  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
      colors = ['black', '#333333', 'red', 'yellow', 'green'],
      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';
      }

The HTML table mytable 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>