How To Call Jqplot Widget Functions Over Onclick Event Buttons

Yii 1.1 General Discussion
1

Hey together,

I’m working with the jqplot extension. I’ve got some issues on setting the right plot-id, plot-name or whatever you call it in the onclick-Event at my buttons.


<button type="button" value="reset" onclick="plot1.resetZoom();" name="resetPlotZoom">Reset Zoom</button>

I’ve got some buttons, which are meant to call simple jqPlot functions. Unfortunately I don’t get the right name of my jqPlot Plot/Graph to call the functions and so the buttons won’t work.

Here’s an example code from the jqplot documentation, which I’m trying to fit in yii code form.


 $("input[type=checkbox][name=gridsHorizontal]").change(function(){

        plot1.axes.yaxis.tickOptions.showGridline = this.checked;

        plot1.replot();

    });

or another example, my zooming:


<button onclick="plot1.resetZoom();" type="button" value="reset"></button>

The class JqplotGraphWidget catches the class id and set it as chartdiv


public function run(){

		$id=$this->getId();

		$this->htmlOptions['id']=$id;        


		echo CHtml::openTag($this->tagName,$this->htmlOptions);

		echo CHtml::closeTag($this->tagName);


		$plotdata=CJavaScript::encode($this->data);

		$flotoptions=CJavaScript::encode($this->options);

		

		Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$id,"$.jqplot('$id', $plotdata, $flotoptions);");

	}

I also trying setting the id in the view


... onclick="yw1.resetZoom();" ...

How could I get the right id in my view? Or am I on a completly wrong way?

2

you can override the id attribute in your htmls htmlOptions


'htmlOptions'=>array(

'id' = 'yourid'

)

and then use that

3

Well, thanks for your advice, but unfortunately it won’t work.

Overriding the id attribute in the htmlOptions does not apply.

Code from my View:


$this->widget('ext.jqplot.JqplotGraphWidget',

                            array(

                                'htmlOptions'=>array(

                                       'style'=>'width:800px;height:500px;margin:10px 0px 10px 20px;',

                                       'id'=>'myPlot',

                                ),...



<button type="button" value="reset" onclick="myPlot.resetZoom();" name="resetPlotZoom">Reset Zoom</button>

Yii generates an id like yw0 for the jqplot-div-Tag.

Clicking the button returns a warning:


ReferenceError: myPlot is not defined

I’ve also tried a button like this:


<button type="button" value="reset" onclick="yw0.resetZoom();" name="resetPlotZoom">Reset Zoom</button>

Message in return:


TypeError: yw0.resetZoom is not a function

I still can’t figure out which object or id in yii is to call.

On a easy website something like


<button onclick="plot1.resetZoom();" type="button" value="reset"></button>

with


 var plot1 = $.jqplot('chart1', [goog], { ...

works.