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

From JSXGraph Wiki
Jump to: navigation, search
 
(8 intermediate revisions by 2 users not shown)
Line 129: Line 129:
 
<jsxgraph width="600" height="450">
 
<jsxgraph width="600" height="450">
 
   var brd = 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],
       chart = brd.create('chart', ['mytable'], {chartStyle: 'point',  
+
       chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',  
                                                 withHeaders: false, colorArray: colors, strokeColor: colors,  
+
                                                 withHeaders: true, colorArray: colors, strokeColor: colors,  
 
                                                 fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});
 
                                                 fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});
  
Line 144: Line 144:
  
 
===The code to produce this page===
 
===The code to produce this page===
The HTML table is generated by this code:
+
<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}),
 +
 
 +
 
 +
      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';
 +
      }
 +
</source>
 +
 
 +
The HTML table ''mytable'' 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 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';
 
      }
 
 
</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>