This extension is jqplot
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.
good, but it could be extended
It's a nice plugin, however it could be really nice to extend it with:
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.
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]]]'; ?>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!
Re: Need to customize css?
Similarly, in jquery.jqplot.css:
~~~
[css]
table.jqplot-table-legend, table.jqplot-highlighter {
width: auto;}
~~~
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.
Thank you!
Very nice plugin, does what it says on the tin.
Thanks!
Thanks a lot for this great plugin!
pie charts don't render well
Data Labels don't render without error.
Uncaught TypeError: Object # has no method 'u2p'
Short form for widget call
There is no need to write out the words application and extension. The first line works also like this:
$this->widget('ext.jqplot.JqplotGraphWidget', ...thanks for the ext!
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.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.