Charts from HTML tables - tutorial: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
JSXGraph is able to read data from HTML tables and display charts. Here it is explained how to do it:
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.
==German Bundestag elections - From 1949 to 2009==
<html>
<html>
<link rel="stylesheet" type="text/css" href="/distrib/jsxgraph.css" />
<!--<script type="text/javascript" src="/distrib/jsxgraphcore.js"></script>-->
<script type="text/javascript" src="/~alfred/jsxgraph/branches/0.80/src/loadjsxgraph.js"></script>
</style>
<div id="page0" style="display: block;">
<table id="mytable" style="border: 1px solid gray;">
<table id="mytable" style="border: 1px solid gray;">
<tr>
<tr>
Line 130: Line 124:
</tr>
</tr>
</table>
</table>
</div>
</html>
 
<!-- Sub page 1: Chart showing the data from the whole table of page 0 -->
<div style="width:800px; display: block;" id="page1">
  <div id="jxgbox1" class="jxgbox" style="width:600px; height:450px; float:left"></div>
</div>
 
<br clear="all" />
<script type="text/javascript">
  /* <![CDATA[ */
        var board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
            hStroke = [], charts1, charts2, charts3, i;
 
        // sub page 1
        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) {
Then, with some keystrokes the JSXGraph chart from this tables is created.
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
<jsxgraph width="600" height="450">
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
            this.infobox.rendNode.style.padding = '5px';
      colors = ['black', '#333333', 'red', 'yellow', 'green'],
            this.infobox.rendNode.style.backgroundColor = 'white';
      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) {
   </script>
        this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
</html>
        this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
        this.infobox.rendNode.style.padding = '5px';
        this.infobox.rendNode.style.backgroundColor = 'white';
   }
</jsxgraph>


===The JavaScript code to produce this page===
===The code to produce this page===
<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'],
            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}),


        //--------------------------------------
        // 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) {
      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';
        }
      }
</source>


        //--------------------------------------
The HTML table ''mytable'' is generated by this code:
        // sub page 2
<source lang="html4strict">
        //--------------------------------------
<table id="mytable" style="border: 1px solid gray;">
        function select_parties() {
<tr>
            var i, chartType = 'line', color = [], part;
<td>Wahljahr</td>
 
<td>1949</td>
            if(charts2)
<td>1953</td>
                board2.removeObject(charts2);
<td>1957</td>
 
<td>1961</td>
            part = [];
<td>1965</td>
            $('input[name=parties]').each(function () { if(this.checked) { part.push(parseInt($(this).val())); color.push(colors[parseInt($(this).val())]); } });
<td>1969</td>
 
<td>1972</td>
            //if(part.length <4) chartType = 'bar';
<td>1976</td>
 
<td>1980</td>
    charts2 = board2.create('chart', ['btw'], {chartStyle: 'point,' + chartType, withHeaders: true, colorArray: color, strokeColor: color, fillColor: color, highlightFillColor: color, highlightStrokeColor: color, rows: part});
<td>1983</td>
        }
<td>1987</td>
 
<td>1990</td>
        board2.highlightInfobox = function(x,y,el) {
<td>1994</td>
            this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');
<td>1998</td>
            this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
<td>2002</td>
            this.infobox.rendNode.style.padding = '5px';
<td>2005</td>
            this.infobox.rendNode.style.backgroundColor = 'white';
<td>2009</td>
        }
</tr>
 
<tr>
        //--------------------------------------
<td>CDU</td>
        // sub page 3
<td>25.2</td>
        //--------------------------------------
<td>36.4</td>
        function select_years() {
<td>39.7</td>
            var years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005],
<td>35.8</td>
                i, data, table, col;
<td>39.3</td>
 
<td>36.6</td>
            year = parseInt($('#select_years').val());
<td>35.2</td>
 
<td>38.0</td>
            table = (new JXG.DataSource()).loadFromTable('btw', true, true);
<td>34.2</td>
            col = table.getColumn(year);
<td>38.2</td>
            for(i=0; i<col.length; i++) {
<td>34.5</td>
                if(isNaN(col[i]))
<td>36.7</td>
                    col[i] = 0.;
<td>34.2</td>
            }
<td>28.4</td>
 
<td>29.5</td>
            if(charts3) {
<td>27.8</td>
                for(i=0; i<charts3[0].length; i++) {
<td>27.3</td>
                    charts3[0][i].vertices[1].moveTo([charts3[0][i].vertices[1].X(), col[i]], 500);
</tr>
                    charts3[0][i].vertices[2].moveTo([charts3[0][i].vertices[2].X(), col[i]], 500);
<tr>
                }
<td>CSU</td>
            } else {
<td>5.8</td>
                board3.suspendUpdate();
<td>8.8</td>
        charts3 = board3.create('chart', [col], {chartStyle: 'bar', colorArray: colors});
<td>10.5</td>
                board3.unsuspendUpdate();
<td>9.6</td>
            }
<td>9.6</td>
        }
<td>9.5</td>
 
<td>9.7</td>
        //--------------------------------------
<td>10.6</td>
        // general
<td>10.3</td>
        //--------------------------------------
<td>10.6</td>
        function show(page) {
<td>9.8</td>
            var i;
<td>7.1</td>
            for(i=0; i<4; i++) {
<td>7.3</td>
                $('#page' + i).css('display', 'none');
<td>6.7</td>
            }
<td>9.0</td>
 
<td>7.4</td>
            $('#' + page).css('display', 'block');
<td>6.5</td>
        }
</tr>
        show('page0');
<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>
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Charts]]
[[Category:Charts]]

Latest revision as of 08: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>
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Charts_from_HTML_tables_-_tutorial&oldid=6035"