jQuery - manipulation of option after create - Plugin

jQuery - manipulation of option after create - Plugin

Hey jQuery Friend,

i've read a lot of books and webpages, but i didn't found anything..

The problem:

i'm creating a diagramm in a canvas.
After this creating i want to change some options of my plugin with a button, like bg color of the canvas etc.

HTML Code:
  1. [HTML]        <script type="text/javascript">
  2.         var daten = new Array(100,33);
  3.         var legende = new Array('Januar','Februar');
  4.         var daten2 = new Array(1,1);
  5.             $(document).ready(function(){               
  6.                 $("#diagramm").diagramm(
  7.                         {
  8.                             data:daten,
  9.                             legend:legende,
  10.                             'canvas':
  11.                                 {'backgroundColor':"#CCC"},
  12.                             'diagramm':
  13.                                 {'ScaleY':5,
  14.                                  'color':'#000'
  15.                                 }
  16.                         });
  17.                 $('a[name="blue"]').click(function(){
  18.                     $( "#diagramm").diagramm({'canvas':{'backgroundColor':"#CCC"}});
  19.                 });
  20.             });
  21.         </script>
  22. <body>
  23.     <canvas id="diagramm" class="test">
  24.    
  25.     </canvas>
  26.     <table>
  27.         <tr>
  28.         <td><button name="grey">Grau</button></td>
  29.         <td><button name="red">Rot</button></td>
  30.         <td><a name="blue" onclick="return false;">Blau</button></td>
  31.     </table>
  32. </body>
  33. </html>[/HTML]

Das Widget
  1. [CODE](function($){
  2.     $.widget("ui.diagramm",{
  3.         // Options Standard value
  4.         options: {
  5.             titel: {                    // Aussehen des Titels
  6.                 marginTop:         20,
  7.                 fontSize:         10,
  8.                 fontFace:         "Arial",
  9.                 text:            "Überschrift",
  10.                 postion:        "center"
  11.             },
  12.             diagramm: {                    // Diagrammparameter
  13.                 marginLeft:        30,
  14.                 marginBottom:    30,
  15.                 fontSize:        10,
  16.                 fontFace:        "Arial",
  17.                 ScaleY:            20,        // Y-Skala
  18.                 color:            "#FFF"    // Punktfarbe
  19.             },
  20.             canvas: {                    // Canvas Parameter
  21.                 width:            700,
  22.                 height:            300,
  23.                 border:            1,
  24.                 borderColor:    "#000",
  25.                 backgroundColor:"#000"
  26.             },
  27.             data: [1,2,3,4],                    // Datenwerte - Array
  28.             legend: ['1','1','1','1']                    // Datenlegende - Array
  29.         },
  30.        
  31.         _setOption: function(option, value){    // übergibt Parameter an Options
  32.              $.Widget.prototype._setOption.apply( this, arguments ); 
  33.         },
  34.        
  35.         _create: function(){    // Konstruktor
  36.            
  37.             var self = this;
  38.             opt = this.options;
  39.             ele = this.element;
  40.            
  41.             ele.addClass("test");   
  42.            
  43.             var axisY = new Array(opt.diagramm.marginLeft, opt.canvas.height - opt.diagramm.marginBottom, opt.canvas.height - opt.diagramm.marginBottom * 2); // Position X & Y , Länge
  44.             var axisX = new Array(opt.diagramm.marginLeft, opt.canvas.height - opt.diagramm.marginBottom, opt.canvas.width - opt.diagramm.marginLeft); // Position X & Y , Länge
  45.            
  46.             axisX_scaling = (Math.ceil((opt.canvas.width - opt.diagramm.marginLeft * 2) / opt.data.length));    // Berechnung der Abstände
  47.             ScaleX_center = axisX_scaling/2;                                    // Länge der Skalierung durch 2 (Pro abschnitt)
  48.             var ScaleX_center; // Mittelpunkt Skalierung der X - Achse;
  49.             var myCan = document.getElementById(ele.attr('id'));
  50.             var Can = myCan.getContext("2d");
  51.            
  52.             this.setCanvas();    // Canvas erstellen
  53.             this.setDiagramm(axisY, axisX,Can);    // Diagramm zeichnen           
  54.             this.setTitel(Can);    // Titel setzen
  55.            
  56.             this.setYscale(opt.data, opt.diagramm.ScaleY, opt.canvas.height - opt.diagramm.marginBottom * 2, axisY, Can);
  57.             this.setXscale(opt.legend, opt.canvas.width - opt.diagramm.marginLeft * 2, axisX, Can);
  58.             this.setDataPoints(opt.data, opt.legend, axisX, axisY, ScaleX_center, opt.canvas.width - opt.diagramm.marginLeft * 2, opt.canvas.height - opt.diagramm.marginBottom * 2, Can);
  59.            
  60.         },
  61.        
  62.         destroy: function(){    // Destructor
  63.            
  64.         },
  65.        
  66.         data: function(daten){
  67.             alert(opt.canvas.backgroundColor);
  68.             opt.data = daten;
  69.             var axisY = new Array(opt.diagramm.marginLeft, opt.canvas.height - opt.diagramm.marginBottom, opt.canvas.height - opt.diagramm.marginBottom * 2); // Position X & Y , Länge
  70.             var axisX = new Array(opt.diagramm.marginLeft, opt.canvas.height - opt.diagramm.marginBottom, opt.canvas.width - opt.diagramm.marginLeft); // Position X & Y , Länge
  71.             this._create();
  72.             },
  73.         option: function(option, value){    // übergibt Parameter an Options
  74.              $.Widget.prototype._setOption.apply( this, arguments ); 
  75.              alert("123");
  76.              this._create();
  77.         },
  78.         setYscale:function(data, ScaleY, ScaleY_length, axisY, Can){    // Beschreibt die Y-Skala
  79.             var max=0;
  80.             for(i = 0; i < data.length; i++){
  81.                 if(data[i] > max)
  82.                         max = data[i];
  83.             }       
  84.             axisY_scaling = ScaleY_length/(Math.ceil(max / ScaleY));    // Berechnung der Abstände
  85.             for(i = 0; i <= Math.ceil(max / ScaleY); i++){    // Y Beschriften
  86.                 // setze Strich
  87.                 Can.font = opt.diagramm.fontSize+"px " + opt.titel.fontFace;   
  88.                 Can.moveTo(axisY[0]-2,axisY[1] - (axisY_scaling*i));
  89.                 Can.lineTo(axisY[0]+2,axisY[1] - (axisY_scaling*i));
  90.                 Can.lineWidth = 2;
  91.                 Can.stroke();
  92.                 if(i>0)
  93.                 Can.fillText(i * ScaleY,opt.diagramm.marginLeft-20,axisY[1]-(axisY_scaling*i)+3);
  94.             }
  95.         },
  96.        
  97.         setXscale: function(data, ScaleX_length, axisX, Can){    // Beschreibt die X-Skala
  98.             axisX_scaling = (Math.floor(ScaleX_length/data.length));    // Berechnung der Abstände
  99.             for(i = 0; i <= data.length; i++){    // Y Beschriften
  100.                 // setze Strich
  101.                 Can.font = opt.diagramm.fontSize+"px "+opt.diagramm.fontFace;
  102.                 Can.moveTo(axisX[0]+axisX_scaling*i,axisX[1]-2);
  103.                 Can.lineTo(axisX[0]+axisX_scaling*i,axisX[1]+2);
  104.                 Can.lineWidth = 2;
  105.                 if(i>0)
  106.                     Can.stroke();
  107.                 ScaleX_center = axisX_scaling/2;
  108.                 // Text mittel setzen
  109.                 if(i!=data.length){
  110.                     var center = (axisX_scaling/2)+(data[i].length/2*opt.diagramm.fontSize);
  111.                     Can.fillText(data[i],opt.diagramm.marginLeft+((axisX_scaling*(i+1)))-center+14,opt.canvas.height - opt.diagramm.marginBottom + 20);
  112.                 }
  113.             }
  114.         },
  115.        
  116.         // Setzt die Datenpunkte
  117.         setDataPoints: function (data, data_name, axisX, axisY, ScaleX_center, ScaleX_length, ScaleY_length, Can){
  118.             axisX_scaling = (Math.floor(ScaleX_length/data.length));
  119.             var max=0;
  120.             for(i = 0; i < data.length; i++){
  121.                 if(data[i] > max)
  122.                         max = data[i];
  123.             }
  124.             axisY_scaling = ScaleY_length/(Math.ceil(max / opt.diagramm.ScaleY)*opt.diagramm.ScaleY);
  125.            
  126.             var x_alt = axisX[0];
  127.             var y_alt = axisY[1];
  128.            
  129.             for(i = 0 ; i<data_name.length;i++){
  130.                 var x = opt.diagramm.marginLeft + (axisX_scaling *(i+1)) - ScaleX_center;
  131.                 var y = (opt.canvas.height - opt.diagramm.marginBottom)-(axisY_scaling * data[i]);       
  132.                
  133.                 Can.fillStyle = opt.diagramm.color;
  134.                 Can.beginPath();
  135.                 Can.arc(x, y, 2, 0, Math.PI * 2, true);
  136.                 Can.closePath();
  137.                 Can.fill();
  138.                 Can.stroke();
  139.                
  140.                 Can.moveTo(x_alt,y_alt);
  141.                 Can.lineTo(x,y);
  142.                 Can.lineWidth = 1;
  143.                 Can.stroke();
  144.                
  145.                 x_alt = x;
  146.                 y_alt = y;
  147.             }
  148.         },
  149.                
  150.         setTitel: function(Can){    // Titel hinzufügen
  151.             // Mittig ausrichten anhand der Breite des Canvas
  152.             var title_center = (opt.canvas.width / 2)-((opt.titel.text.length/2) * opt.titel.fontSize);
  153.            
  154.             // Text in das Canwas schreiben
  155.            
  156.             Can.font = opt.titel.fontSize+"px "+opt.titel.fontFace;   
  157.             Can.fillText(opt.titel.text, title_center , opt.titel.marginTop);
  158.         },
  159.         setDiagramm: function(axisY, axisX, Can){
  160.            
  161.             Can.fillText(0 , opt.diagramm.marginLeft - 10 , opt.canvas.height - opt.diagramm.marginBottom + 10);
  162.             Can.moveTo(axisY[0],axisY[1] + 5);
  163.             Can.lineTo(axisY[0],opt.canvas.height-axisY[1]);
  164.             Can.lineWidth = 2;
  165.             Can.stroke();
  166.            
  167.             Can.moveTo(axisX[0]-5,axisX[1]);
  168.             Can.lineTo(axisX[2],axisX[1]);
  169.             Can.lineWidth = 2;
  170.             Can.stroke();
  171.         },
  172.        
  173.         setCanvas: function(){    // Übergibt Werte an Canvas
  174.             ele.attr("width",opt.canvas.width);
  175.             ele.attr("height",opt.canvas.height);
  176.             ele.css("border",opt.canvas.border);
  177.             ele.css("background-color",opt.canvas.backgroundColor);
  178.         }       
  179.     });
  180. })(jQuery);[/CODE]

I thought i can give this plugin this new options, but it didn't worked
$( "#diagramm").diagramm({'canvas':{'backgroundColor':"#CCC"}});

Is there a trick or another possibility to change this options after creation?

Thanks a lot

Lg cRs