jqplot Follow @yiiframework

jqplot

Documentation

This extension is jqplot

alt "标题"

Documentation ¶

Requirements ¶

Yii 1.0 or above

Installation ¶

Extract the release file under protected/extensions

Usage ¶

See the following code example:

$this->widget('application.extensions.jqplot.JqplotGraphWidget', 
    array(
        'data'=>array(
            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),)
        ),
        'options'=>array(
                'seriesDefaults'=>array(
                    'renderer'=>'js:$.jqplot.BarRenderer',
                    'rendererOptions'=>array('barPadding'=>10,'barMargin'=>10)
                ),
                'legend'=>array('show'=>'true','location'=>'nw'),
                'title'=>'Exponential Line',
                'axes'=>array(
                    'xaxis'=>array('renderer'=>'js:$.jqplot.CategoryAxisRenderer'),
                    'yaxis'=>array('min'=>-10, 'max'=>240,'numberTicks'=>6)
                ),
        ),
        'htmlOptions'=>array(
               'style'=>'width:400px;height:300px;'
        ),
        'pluginScriptFile'=>array(
            'jqplot.dateAxisRenderer.js',
            'jqplot.barRenderer.js',
            'jqplot.categoryAxisRenderer.js')
    )
);

指南：http://blog.csdn.net/gaoyusi4964238/archive/2009/07/25/4378459.aspx

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

Change Log ¶

June 9, 2010 ¶

Initial release.

Total 8 comments

#10696

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

Fran1978 at 2012/03/06 03:06am

Thanks!

Thanks a lot for this great plugin!

#6246

Toumal at 2011/12/21 08:49am

Thank you!

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

#5665

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

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

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 :

table:not(.jqplot-table-legend):not(.jqplot-highlighter)

And it works fine now.

Anyway, thanks for sharing this. Good work!

#1985

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)

<?php
Yii::import('application.extensions.jqplot.JqplotWidget');
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 :

<?php
echo '[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]';
?>

#83

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.

Please login to leave your comment.