Charts from HTML tables - tutorial: Difference between revisions

From JSXGraph Wiki
(added example for changing tick labels)
mNo edit summary
Line 158: Line 158:
                                                 withHeaders: false, colorArray: colors, strokeColor: colors,  
                                                 withHeaders: false, colorArray: colors, strokeColor: colors,  
                                                 fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),
                                                 fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),
  brd.defaultAxes.x.defaultTicks.labels[9].setText("1965");
  brd.defaultAxes.x.defaultTicks.labels[9].updateRenderer();
  brd.defaultAxes.x.defaultTicks.labels[14].setText("1983");
  brd.defaultAxes.x.defaultTicks.labels[14].updateRenderer();
  brd.defaultAxes.x.defaultTicks.labels[19].setText("2002");
  brd.defaultAxes.x.defaultTicks.labels[19].updateRenderer();
       brd.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>');

Revision as of 13:43, 18 January 2010

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: false, colorArray: colors, strokeColor: colors, 
                                                fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),


  brd.defaultAxes.x.defaultTicks.labels[9].setText("1965");
  brd.defaultAxes.x.defaultTicks.labels[9].updateRenderer();
  brd.defaultAxes.x.defaultTicks.labels[14].setText("1983");
  brd.defaultAxes.x.defaultTicks.labels[14].updateRenderer();
  brd.defaultAxes.x.defaultTicks.labels[19].setText("2002");
  brd.defaultAxes.x.defaultTicks.labels[19].updateRenderer();


      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>