Yii 1.1: jqplot


This extension is jqplot

alt "标题"



  • Yii 1.0 or above


  • Extract the release file under protected/extensions


See the following code example:

            array(array(2006, 4),array(2008, 9),array(2009, 16)),
            array(array(2006, 3),array(2007, 7),array(2008, 6),),
            array(array(2006, 5),array(2007, 1),array(2008, 3),array(2009, 7),),
            array(array(2006, 2),array(2007, 5),array(2008, 4),array(2009, 9),)
                'title'=>'Exponential Line',
                    'yaxis'=>array('min'=>-10, 'max'=>240,'numberTicks'=>6)


Usage Documentation: http://www.jqplot.com/docs/files/usage-txt.html

Change Log

June 9, 2010

  • Initial release.

Total 10 comments

#16608 report it
mi.sarah at 2014/03/10 08:04am
outdated version

The extension works, but it's outdated! Some of the jqPlot options like positioning the legend outside the grid doesn't work with these version.

#15976 report it
mi.sarah at 2014/01/06 10:50am
Short form for widget call

There is no need to write out the words application and extension. The first line works also like this:


thanks for the ext!

#10696 report it
trenchard at 2012/11/16 12:53am
pie charts don't render well

Data Labels don't render without error.

Uncaught TypeError: Object # has no method 'u2p'

#7229 report it
Fran1978 at 2012/03/06 03:06am

Thanks a lot for this great plugin!

#6246 report it
Toumal at 2011/12/21 08:49am
Thank you!

Very nice plugin, does what it says on the tin.

#5665 report it
toronto at 2011/10/31 04:09am
more use of the option element.

this is one of the best extension in creating a chart.

But is there any more detail of example in the usage?

for example, the way to change the label from series, to anything that we desire. or does anyone can show me if there are a link that shows that kind of example above?

thank you for your kind response.

#4822 report it
shark at 2011/08/19 07:48am
Re: Need to customize css?

Similarly, in jquery.jqplot.css:

table.jqplot-table-legend, table.jqplot-highlighter {
    width: auto;
#2493 report it
rei at 2011/01/10 03:32am
Need to customize css?

I tried this extension, but the legend doesn't display correctly. It uses table and we have already had table class in screen.css. So I customize the table class to :


And it works fine now.

Anyway, thanks for sharing this. Good work!

#1985 report it
Parcouss at 2010/10/25 03:19pm
Ajax loading

Ok, Ipost the modifications to use ajax loading, if somebody is interested.

I modified JqplotGraphWidget this way : (this is the complete file)

class JqplotGraphWidget extends JqplotWidget{
         * @var string the name of the container element that contains the progress bar. Defaults to 'div'.
        public $tagName = 'div';
        public $ajaxOpts = array(
                'dataType' => 'json'
        protected function createJQPlotScript($plotdata) {
                $flotoptions = CJavaScript::encode($this->options);
                $id = $this->htmlOptions['id'];
                return "$.jqplot('$id', $plotdata, $flotoptions);";
         * Run this widget.
         * This method registers necessary javascript and renders the needed HTML code.
        public function run(){
                if (!isset($this->htmlOptions['id'])) $this->htmlOptions['id'] = $this->getId();
                echo CHtml::tag($this->tagName,$this->htmlOptions, '');
                $script = '';
                if (is_array($this->data)) {
                        $script = $this->createJQPlotScript(CJavaScript::encode($this->data));
                } else {
                        // ajax
                        // use data property as url
                        if (!isset($this->ajaxOpts['url']) && is_string($this->data)) $this->ajaxOpts['url'] = $this->data;
                        // write success func if not given
                        if (!isset($this->ajaxOpts['success']))
                                $this->ajaxOpts['success'] = 'js:function(data) {alert(data);}';
                        $script = '$.ajax('.CJavaScript::encode($this->ajaxOpts).')';
                Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$this->htmlOptions['id'], $script);

You can now use ajax loading :

// basic usage : specify url instead of data
$this->widget('ext.jqplot.JqplotGraphWidget', array(
        'data' => Yii::app()->baseUrl.'/data.test.php'
// or with a javascript error handler
$this->widget('ext.jqplot.JqplotGraphWidget', array(
        'data' => Yii::app()->baseUrl.'/data.test.php',
        'ajaxOpts' => array(
                'dataType' => 'json',
                'error' => 'js:function() { alert("error"); }'

My test file 'data.test.php' contains :

echo '[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]';
#83 report it
Parcouss at 2010/09/20 02:23pm
good, but it could be extended

It's a nice plugin, however it could be really nice to extend it with: - ajax data loading if needed - use of minified files if needed

I wrote these extensions, let me know if you're interested in, I can post modifications or maybe create a new extension if sharehua doesn't want to extend his code.

Leave a comment

Please to leave your comment.

Create extension