1 /**
  2 Konstruktor
  3 
  4 */
  5 WordCloud = function(container) {
  6   this.container = container;
  7 }
  8 
  9 WordCloud.DEFAULT_STOP_WORDS = {
 10   "a": 1,
 11   "an": 1,
 12   "and": 1,
 13   "is": 1,
 14   "or": 1,
 15   "the": 1    
 16 };
 17 
 18 var totalwords=0;
 19 var checkcap=0;
 20 
 21 /**
 22 Returniert die Farbe Abh�ngig von der gr��e der Schrift
 23 
 24 */
 25 getColor = function(size)
 26 {
 27 
 28 	if(size<15)
 29 	{
 30 		return "#acc1f3";
 31 	}
 32 	else if(size>=15 && size <20)
 33 	{
 34 		return "#86a0dc";
 35 	}
 36 	else if(size>=20 && size <25)
 37 	{
 38 		return "#607ec5";
 39 	}
 40 	else if(size>=25 && size <30)
 41 	{
 42 		return "#264ca2";
 43 	}
 44 	else if(size>=30 && size <35)
 45 	{
 46 		return "#133b97";
 47 	}
 48 	else if(size>=35 && size <40)
 49 	{
 50 		return "#002a8b";
 51 	}
 52 	else if(size>=40 && size <45)
 53 	{
 54 		return "#071a41"
 55 	}
 56 	else if(size >=45)
 57 	{
 58 		return "#081122";
 59 	}
 60 }
 61 
 62 
 63 /**
 64 mergt zwei Sublisten nach gr��e
 65 
 66 */
 67 merge= function(map, left, right)
 68 {
 69 	var loesung=new Array();
 70 	while(left.length>0||right.length>0)
 71 	{
 72 		
 73 		if(left.length>0&&right.length>0)
 74 		{
 75 			wordleft=left[0];
 76 			wordright=right[0];
 77 			
 78 			
 79 			
 80 			if(getMaxCount(wordleft.toLowerCase())<getMaxCount(wordright.toLowerCase()))
 81 			{
 82 				
 83 		
 84 				loesung.push(left.shift());
 85 			//	console.log(wordleft);
 86 			}	
 87 			else
 88 			{
 89 				loesung.push(right.shift());
 90 			//	console.log(wordright);
 91 			}	
 92 			
 93 		}	
 94 		else if(left.length>0)
 95 		{
 96 			loesung.push(left.shift());
 97 			//console.log(wordleft);
 98 			
 99 		}
100 		else if(right.length>0)
101 		{
102 			loesung.push(right.shift());
103 			//console.log(wordright);
104 		}
105 	}
106 	return loesung;
107 }
108 
109 
110 /**
111 Zerlegt Liste in Sublisten f�r Sortierung
112 
113 */
114 mergeSort= function(map, list)
115 {
116 	if(list.length<=1) //es ist bereits sortiert
117 	{
118 		return list;
119 	}	
120 	var left=new Array();
121 	var right=new Array();
122 	var haelfte=Math.floor(list.length/2);
123 	//console.log("laenge der liste gesamt:"+list.length + " haelfte der liste:"+haelfte )
124 	
125 	//console.log("inhalte linker teil:");
126 	//var links=" ";
127 	for(var i=0;i<haelfte;i++)
128 	{
129 		left[i]=list[i];
130 		//links+=left[i];
131 		
132 	}
133 	//console.log(links);
134 	var j=0;
135 	//console.log("inhalte rechter teil:");
136 	//var rechts=" ";
137 	for(var k=haelfte;k<list.length;k++)
138 	{
139 		
140 		
141 		right[j]=list[k];
142 	//	rechts+=right[j];
143 		j++;
144 		//console.log("index in rechts:"+j+" ; index in der gro�en liste:"+k);
145 		
146 	}	
147 	//console.log(rechts);
148 	
149 //	console.log(count +"laenge links:"+left.length +" laenge rechts:"+right.length);
150 	//count++;
151 	
152 	left=mergeSort(map, left);
153 	right=mergeSort(map,right);
154 	
155 	return merge(map,left, right);
156 	
157 }
158 
159 
160 
161 
162 
163 var newCap=false;
164 var chapIndex=-1;
165 var wordindex=0;
166 
167 
168 /**Add all words in a given text to a list and map.
169 list is a list of unique words.
170 map is a set of all found words.
171 stopWords is a set of all words to ignore.
172 */
173 addWords = function(text, listm,mapm, map, stopWords) 
174 {
175   var word = '';
176   for (var i = 0; i < text.length; i++) 
177   {
178     //ist der buchstabe noch teil des wortes
179     var c = text.charAt(i);
180     if (' ,.<>[]{}/`~!@#$%^&*()-=+\'"\\|:;?\r\r\n'.indexOf(c) >= 0)
181     {
182     
183     	
184       if (word.length > 0) 
185       {
186         addWord(word, listm,mapm, map, stopWords);
187       }
188       if(c=='~')
189       {
190     	 // console.log("hier w�r a neues kapitel");
191     	  newCap=true;
192     	  chapIndex++;
193     	  listm[chapIndex]=new Array();
194     	  mapm[chapIndex]=new Array();
195     	  wordindex=0;
196       }
197       word = '';
198     } 
199     else 
200     {
201       word += c;
202     }      
203   }
204   if (word.length > 0)
205    {
206     addWord(word, listm,mapm, map, stopWords);
207   }
208 };
209 
210 
211 
212 
213 
214 
215 var chapters=new Array();
216 /**Add a single word in a given text to a list and map.
217 list is a list of unique words.
218 map is a set of all found words.
219 stopWords is a set of all words to ignore.
220 */
221 addWord = function(word, listm,mapm, map, stopWords) 
222 {
223   var wl = word.toLowerCase();
224   if(newCap==true)
225   {
226 	  chapters.push(word);
227 	  //console.log("adding chapter" + chapters[checkcap])
228 	  //checkcap++;
229 	  newCap=false;
230   }
231   if (stopWords[wl]) 
232   {
233     return; // Ignore stop words
234   }
235   if (map[wl])     //existiert das wort schon in unserer liste? wenn ja z�hler hoch
236   {
237     map[wl]++;
238     if(mapm[chapIndex][wl])
239     {	
240     	mapm[chapIndex][wl]++;
241     	
242     	
243 //    	if(wl=="length")
244 //    	{
245 ////    		console.log("test");
246 ////    		console.log(mapm[chapIndex][wl]);
247 //    	}	
248     }
249     else
250     {
251     	listm[chapIndex][wordindex]=word;
252 //    	if(word=="Gutenberg")
253 //    	{
254 //    		console.log("Gutenberg"+chapters[chapIndex]);
255 //    	}	
256     	mapm[chapIndex][wl]=1;
257     	wordindex++;
258         totalwords++;
259     	
260     }	
261     totalwords++;
262   } else 
263   {
264     map[wl] = 1; // wenn ned z�hler auf eins setzen
265  //   console.log(chapIndex);
266    // console.log(wordindex);
267    // console.log(word);
268     listm[chapIndex][wordindex]=word;
269     mapm[chapIndex][wl]=1;
270 
271  //   console.log(chapIndex+" "+ listm[chapIndex][wordindex]);
272     wordindex++;
273     totalwords++;
274   }
275 };
276 var surface = document.getElementById("myCanvas");
277 var table= document.getElementById("myTable");
278 MIN_UNIT_SIZE = 10;
279 MAX_UNIT_SIZE = 50;
280 RANGE_UNIT_SIZE = MAX_UNIT_SIZE - MIN_UNIT_SIZE;
281 
282 /**
283  * Generiert die aktulle Wortliste abh�ngig von de Kapiteln
284  */
285 generateWordList =function(multiWordList)
286 {
287 	var finalliste=new Array();
288 	var checkboxes= document.getElementsByName("kapitel");
289 //	console.log(multiWordList[0][0].length);
290 	for(var row=0; row< multiWordList.length; row++)
291 	{
292 		if(checkboxes[row].checked==false)
293 		{
294 			continue;
295 		}	
296 		for(var col=0; col< multiWordList[row].length; col++)
297 		{
298 			if(finalliste.indexOf(multiWordList[row][col].toLowerCase())<0)
299 			{
300 				finalliste.push( multiWordList[row][col].toLowerCase());
301 			
302 			}
303 		
304 		}
305 		
306 		
307 	}	
308 	return finalliste;
309 
310 
311 }
312 
313 var wordMap = {};
314 var wordMapBearbeitet=new Array();
315 var wordListMulti = new Array();
316 var wordMapMulti = new Array();
317 var wordList = new Array();
318 
319 /**
320  * Vorzeichenfunktion, liest Daten ein, erkennt kapitel, erzeugt Checkboxen und ruft die zeichenoperation auf
321  */
322 prototype.draw = function(data, options) 
323 {
324 
325 
326   chapIndex=-1;
327   wordindex=0;
328   var contentString="<h3>Bitte Kapitel ausw�hlen</h3><br><form id=\"f1\">";
329   chapters=new Array();
330  
331   options = options || {};
332   var stopWords = DEFAULT_STOP_WORDS;
333   if (options.stopWords)
334   {     //da werden die unerlaubten w�rter geholt
335     stopWords = {};
336     var words = options.stopWords.toLowerCase().split(/ |,/);
337     for (var i = 0; i < words.length; i++) 
338     {
339       stopWords[words[i]] = 1;
340     }
341   }
342 
343   for (var rowInd = 0; rowInd < data.getNumberOfRows(); rowInd++) 
344   {
345     for (var colInd = 0; colInd < data.getNumberOfColumns(); colInd++) 
346     {
347       if (data.getColumnType(colInd) == 'string') {
348         addWords(data.getValue(rowInd, colInd), wordListMulti,wordMapMulti, wordMap, stopWords);   //da lesen wir die w�rter ein
349       }
350     }
351   }
352   for(var l=0; l < chapters.length; l++)
353   {
354 	  contentString+="<input type=\"checkbox\" id=\"kapitel\" name=\"kapitel\" checked=\"checked\" onclick=\"redraw()\">"
355 			  +chapters[l].toLowerCase()+"<br>";
356   }
357  
358   document.getElementById("cell2").value =" ";
359   contentString+="</form>";
360   
361   document.getElementById("cell2").innerHTML = contentString;
362   
363   redraw();
364 
365 };
366 
367 /**
368  * Returniert Wortvorkommen �ber aktuelle Kapitel
369  */
370 getMaxCount=function(wort)
371 {
372 	var totalCount=0;
373 	var checkboxes= document.getElementsByName("kapitel");
374 	for(var i=0;i<wordMapMulti.length;i++)
375 	{
376 		if(checkboxes[i].checked==true)
377 		{
378 			
379 		
380 			if(wordMapMulti[i][wort]== undefined || wordMapMulti[i][wort]==null|| wordMapMulti[i][wort]==Number.NaN|| wordMapMulti[i][wort]=="sort()")
381 			{
382 			}
383 			else if(wordMapMulti[i][wort]>0)
384 			{
385 				//console.log(wordMapMulti[i][wort]);
386 				totalCount+=wordMapMulti[i][wort];
387 //				if(wort=="gutenberg")
388 //				{
389 //					console.log(wort+" "+i + chapters[i]+" Akt anzahl: "+totalCount)
390 //				}	
391 			}
392 		
393 		}
394 	}	
395 	//console.log(totalCount);
396 	return totalCount;
397 	
398 }
399 
400 /**
401  * Gibt die Anzahl der aktiven Kapitel retour
402  */
403 getActiveChapters=function()
404 {
405 	var counti=0;
406 	var checkboxes= document.getElementsByName("kapitel");
407 	for(var row=0; row< wordListMulti.length; row++)
408 	{
409 		if(checkboxes[row].checked==false)
410 		{
411 			continue;
412 		}	
413 		
414 		counti++;
415 		
416 	}	
417 	return counti;
418 	
419 	
420 	
421 }
422 
423 /**
424  * Zeichenfunktion mit canvas f�r W�rter und Sparklines
425  */
426 redraw=function()
427 {
428 	
429 	//console.log("doing drawing");
430 	 wordList=generateWordList(wordListMulti);
431 	 var checkboxes= document.getElementsByName("kapitel");
432 
433 		
434 	  var minAnz=0;
435 	  var maxAnz=0;
436 	  var minFreq = 999999;
437 	  var maxFreq = 0;
438 	  for (var word in wordMap) 
439 	  {
440 	    var f = getMaxCount(word);
441 	    
442 	    minFreq = Math.min(minFreq, f);
443 	    maxFreq = Math.max(maxFreq, f);
444 	  }
445 	  
446 	  var range = maxFreq - minFreq;
447 	//  console.log(range);
448 	  range = Math.max(range, 8);
449 
450 
451 	 // var html = [];
452 
453 	  
454 	  
455 
456 	      var context = surface.getContext('2d');
457 
458 
459 	      context.textBaseline = "middle";
460 	      
461 
462 	      context.font = "10px Arial";
463 
464 	  context.clearRect ( 0 , 0 , 600 , 400 );
465 
466 	  
467 	  
468 	  var durchgaenge=wordList.length;
469 	  if(wordList.length>50)
470 	  {
471 	    durchgaenge=50;
472 	  }
473 	  
474 	//  for(var t=0;t<wordList.length;t++)
475 	//  {
476 //		  var word = wordList[i];
477 //			
478 //		  var text = word;
479 //		//  var freq = wordMap[word.toLowerCase()];
480 //		  console.log("vorm sortieren: "+t+ word +" ");
481 	//  }
482 	  wordMapBearbeitet=mergeSort(wordMap, wordList);
483 	//  for(var t=0;t<wordMapBearbeitet.length;t++)
484 	//  {
485 //		 console.log(wordMapBearbeitet[t]); 
486 	//  }
487 	 // console.log(wordList.length);
488 
489 
490 	  var starti=0;
491 	  var previousdim=5;
492 	  var previousheight=25;
493 	  var dim;
494 	  var first=true;
495 	     
496 	  var maxsize=0;
497 	  for (var i =  wordMapBearbeitet.length-durchgaenge; i <  wordMapBearbeitet.length; i=i+2) 
498 	  {
499 		  var word = wordMapBearbeitet[i];
500 		
501 		  var text = word;
502 		  var freq = getMaxCount(word.toLowerCase());
503 		  //console.log(wordMapMulti[0][word.toLowerCase()]);
504 		  var samples=getActiveChapters();
505 		//  console.log( word +" "+ freq);
506 	   // if(freq>=)
507 	    //{
508 		  starti=i;
509 	      var size = MIN_UNIT_SIZE +Math.round((freq - minFreq) / range * RANGE_UNIT_SIZE);
510 	   //   html.push('<span class="word-cloud-', size, '">', text, '</span> ');
511 	   //   console.log(freq);
512 	      context.font = size+"px Arial";
513 	      context.fillStyle=getColor(size);
514 	      
515 	 
516 	    //  if(i<7)
517 	      //{
518 	      var graphbreite=0;
519 	      var graphhoehe=10;
520 	      var stepsx=0;
521 	      var starty=0;
522 	      var acty=0;
523 	      var maxcount=freq;
524 	      var chapcount=0;
525 	  //    console.log("y.koord"+starty )
526 	      
527 	      if (first==true)
528 	      {
529 	    	  maxsize=Math.max(size,maxsize);
530 	    	  context.fillText(word, 5, 25);
531 	    	  dim= context.measureText(word);
532 	    	  if(getActiveChapters()>1)
533 	    	  {
534 	    		  graphbreite=dim.width;
535 	    	  
536 		    	  stepsx=0;
537 		    	  stepsx=graphbreite/(getActiveChapters()-1);
538 		    	 // console.log(graphbreite +"  "+getActiveChapters());
539 		    	  context.beginPath();
540 		       	  starty=previousheight+size/2+88/size+graphhoehe;
541 		    	 // console.log("x-koord "+5+stepsx*schritte+ "y.koord"+starty )
542 		    	  context.moveTo(5,starty);
543 		    	  var schritte=0;
544 		    	  var schrittemulti=0;
545 		    	  while(schritte <checkboxes.length-1)
546 		    	  {
547 		    		if(checkboxes[schritte].checked==true)
548 		    		{
549 	
550 			    		  chapcount=wordMapMulti[schritte][word.toLowerCase()];
551 			    		  if(chapcount==undefined || chapcount==null|| chapcount==Number.NaN)
552 			    		  {
553 			    			  chapcount=0;
554 			    		  }	 
555 			    		 // console.log("chapcount ist "+ chapcount +"Kapitel"+schritte);
556 			    		  acty=(chapcount/maxcount)*20;
557 			    		//  console.log("x-koord "+5+stepsx*schritte+ "y.koord"+starty )
558 			    		  acty=Math.min(Math.floor(starty-acty),starty-1);
559 			    		 // console.log(schritte +"  x-koord "+5+stepsx*schritte+ "y.koord"+acty )
560 			    		  context.lineTo(5+stepsx*schrittemulti,acty);
561 			    		  schrittemulti++;
562 		    		}
563 		    		  schritte++;
564 		    	  }
565 		    	  schrittemulti=0;
566 		    	  context.lineTo(5+stepsx*(getActiveChapters()-1),starty);
567 		    	  context.lineTo(5,starty);
568 		    	  context.fill();
569 		    	  
570 		    	  context.beginPath();
571 		    	  context.moveTo(5,starty);
572 		    	  context.lineTo(5, starty-20);
573 		    	    context.stroke();
574 		    	  context.beginPath();
575 		    	  context.moveTo(4,starty+1);
576 		    	  context.lineTo(4+graphbreite,starty+1);
577 	    	  }
578 	    	//  context.closePath();
579 	    	    context.stroke();
580 	    	  
581 	    	  
582 	    	  
583 	    	  previousdim=dim.width+10;
584 	    	  first=false;
585 	      }
586 	      else
587 	      {
588 	    	  maxsize=Math.max(size,maxsize);
589 	    	  if(previousdim+context.measureText(word).width+5>600)
590 	    	  {
591 	    		  previousdim=5;
592 	    		  previousheight+=30+maxsize;
593 	    		  maxsize=0;
594 	    		  
595 	    	  }
596 	    	  
597 	    	  
598 	    	  
599 	    	  
600 	    	  context.fillText(word, previousdim,  previousheight);
601 	    	  if(getActiveChapters()>1)
602 	    	  {
603 		    	  graphbreite=context.measureText(word).width;
604 		    	  stepsx=0;
605 		    	  stepsx=graphbreite/(getActiveChapters()-1);
606 		    	 // console.log(graphbreite +"  "+getActiveChapters());
607 		    	  context.beginPath();
608 		    	  starty=previousheight+size/2+88/size+graphhoehe;
609 		    	 // console.log("x-koord "+5+stepsx*schritte+ "y.koord"+starty )
610 		    	  context.moveTo( previousdim,starty);
611 		    	  var schritte=0;
612 		    	  var schhrittemulti=0;
613 		    	  while(schritte <checkboxes.length)
614 		    	  {
615 		    		if(checkboxes[schritte].checked==true)
616 		    		{
617 	
618 			    		  chapcount=wordMapMulti[schritte][word.toLowerCase()];
619 			    		  if(chapcount==undefined || chapcount==null|| chapcount==Number.NaN)
620 			    		  {
621 			    			  chapcount=0;
622 			    		  }	 
623 			    		 // console.log("chapcount ist "+schritte);
624 			    		  acty=(chapcount/maxcount)*20;
625 			    		//  console.log("x-koord "+5+stepsx*schritte+ "y.koord"+starty )
626 			    		  acty=Math.min(Math.floor(starty-acty),starty-1);
627 			    		 // console.log(schritte +"  x-koord "+5+stepsx*schritte+ "y.koord"+acty )
628 			    		  context.lineTo(previousdim+stepsx*schrittemulti,acty);
629 			    		  //console.log(schrittemulti)
630 			    		  schrittemulti++;
631 		    		}
632 		    		  schritte++;
633 		    	  }
634 		    	  schrittemulti=0;
635 		    	  context.lineTo(previousdim+stepsx*(getActiveChapters()-1),starty);
636 		    	  context.lineTo(previousdim,starty);
637 		    	  context.fill();
638 		    	  
639 		    	  context.beginPath();
640 		    	  context.moveTo(previousdim,starty);
641 		    	  context.lineTo(previousdim, starty-20);
642 		    	    context.stroke();
643 		    	  context.beginPath();
644 		    	  context.moveTo(previousdim-1,starty+1);
645 		    	  context.lineTo(previousdim-1+graphbreite,starty+1);
646 		    	//  context.closePath();
647 		    	    context.stroke();
648 	    	  
649 	      	}  
650 	    	  
651 	    	  
652 	    	  previousdim+= context.measureText(word).width+5;
653 	      }
654 	   
655 	    //  console.log(size);
656 	    	  
657 	    	 
658 	      //}	  
659 	      //context.restore();  
660 	    //}
661 	  }
662 
663 	  if(starti<( wordMapBearbeitet.length-1))
664 	  {
665 		  starti= wordMapBearbeitet.length-1;
666 	  }
667 	  else
668 	  {
669 		  starti= wordMapBearbeitet.length-2;
670 	  }
671 	// console.log(starti);
672 	  for (var i =   starti; i >=  wordMapBearbeitet.length-durchgaenge; i=i-2) 
673 	  {
674 		  var word = wordMapBearbeitet[i];
675 		
676 		  var text = word;
677 		  var freq = getMaxCount(word.toLowerCase());
678 		  
679 		  //console.log(wordMapMulti[0][word.toLowerCase()]);
680 		  var samples=getActiveChapters();
681 		  //console.log( word +" "+ freq);
682 	   // if(freq>=)
683 	    //{
684 		  //starti=i;
685 	      var size = MIN_UNIT_SIZE +Math.round((freq - minFreq) / range * RANGE_UNIT_SIZE);
686 	   //   html.push('<span class="word-cloud-', size, '">', text, '</span> ');
687 	     // console.log(freq);
688 	      context.font = size+"px Arial";
689 	      context.fillStyle=getColor(size);
690 	      
691 	 
692 	    //  if(i<7)
693 	      //{
694 	      var graphbreite=0;
695 	      var graphhoehe=10;
696 	      var stepsx=0;
697 	      var starty=0;
698 	      var acty=0;
699 	      var maxcount=freq;
700 	      var chapcount=0;
701 	  //    console.log("y.koord"+starty )
702 	      
703 	    	  maxsize=Math.max(size,maxsize);
704 	    	  if(previousdim+context.measureText(word).width+5>600)
705 	    	  {
706 	    		  previousdim=5;
707 	    		//  console.log(maxsize);
708 	    		  previousheight+=30+maxsize;
709 	    		  maxsize=0;
710 	    		  
711 	    		  
712 	    	  }
713 	    	  
714 	    	  
715 	    	  
716 //	    	  console.log(previousheight);
717 	    	  context.fillText(word, previousdim,  previousheight);
718 	    	  if(getActiveChapters()>1)
719 	    	  {
720 		    	  graphbreite=context.measureText(word).width;
721 		    	  stepsx=0;
722 		    	  stepsx=graphbreite/(getActiveChapters()-1);
723 		    	 // console.log(graphbreite +"  "+getActiveChapters());
724 		    	  context.beginPath();
725 		       	  starty=previousheight+size/2+88/size+graphhoehe;
726 		    	 // console.log("x-koord "+5+stepsx*schritte+ "y.koord"+starty )
727 		    	  context.moveTo( previousdim,starty);
728 		    	  var schritte=0;
729 		    	  var schrittemulti=0;
730 		    	  while(schritte <checkboxes.length)
731 		    	  {
732 		    		if(checkboxes[schritte].checked==true)
733 		    		{
734 	
735 			    		  chapcount=wordMapMulti[schritte][word.toLowerCase()];
736 			    		  if(chapcount==undefined || chapcount==null|| chapcount==Number.NaN)
737 			    		  {
738 			    			  chapcount=0;
739 			    		  }	 
740 			    		 // console.log("chapcount ist "+schritte);
741 			    		  acty=(chapcount/maxcount)*20;
742 			    		//  console.log("x-koord "+5+stepsx*schritte+ "y.koord"+starty )
743 			    		  acty=Math.min(Math.floor(starty-acty),starty-1);
744 			    		 // console.log(schritte +"  x-koord "+5+stepsx*schritte+ "y.koord"+acty )
745 			    		  context.lineTo(previousdim+stepsx*schrittemulti,acty);
746 			    		  schrittemulti++;
747 			    		//  console.log(5+stepsx*schrittemulti);
748 		    		}
749 		    		  schritte++;
750 		    	  }
751 		    	  context.lineTo(previousdim+stepsx*(getActiveChapters()-1),starty);
752 		    	  context.lineTo(previousdim,starty);
753 		    	  context.fill();
754 		    	  
755 		    	  context.beginPath();
756 		    	  context.moveTo(previousdim,starty);
757 		    	  context.lineTo(previousdim, starty-20);
758 		    	    context.stroke();
759 		    	  context.beginPath();
760 		    	  context.moveTo(previousdim-1,starty+1);
761 		    	  context.lineTo(previousdim-1+graphbreite,starty+1);
762 		    	//  context.closePath();
763 		    	    context.stroke();
764 	    	  
765 	    	  }
766 	    	  
767 	    	  
768 	    	  previousdim+= context.measureText(word).width+5;
769 	      }
770 	   
771 	  
772 
773 }
774 // JavaScript Document
775