Charts
Important Highcharts is one of the best HTML5/Javascritp charting libraries on the web. Highcharts JS is free for a non-commercial project but not if you are developing a product that you are going to make money with.
Visit HighCharts site in order to get more information about the different options of this plugin and its license pricing.
- <?php
- $this->widget(
- 'yiiwheels.widgets.highcharts.WhHighCharts',
- array(
- 'pluginOptions' => array(
- 'title' => array('text' => 'Fruit Consumption'),
- 'xAxis' => array(
- 'categories' => array('Apples', 'Bananas', 'Oranges')
- ),
- 'yAxis' => array(
- 'title' => array('text' => 'Fruit eaten')
- ),
- 'series' => array(
- array('name' => 'Jane', 'data' => array(1, 0, 4)),
- array('name' => 'John', 'data' => array(5, 7, 3))
- )
- )
- )
- );
- ?>
Here some examples of what you can do with this cool and tiny lib. For more information please go to JQuery Sparklines site.
- <div class="row">
- <div class="col-md-3">
- Inline <?php
- $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
- 'data' => array(
- 10,8,5,7,4,4,1, 10,8,5,7,4,4,1
- )
- ));
- ?>
- Bar <?php
- $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
- 'data' => array(
- 10,8,5,7,4,4,1, 10,8,5,7,4,4,1
- ),
- 'pluginOptions' => array(
- 'type' => 'bar', 'barColor' => 'green'
- )
- ));
- ?>
- </div>
- <div class="col-md-3">
- Pie Chart <?php
- $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
- 'data' => array(
- 1,1,2
- ),
- 'pluginOptions' => array(
- 'type' => 'pie',
- )
- ));
- ?>
- Bullet <?php
- $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
- 'data' => array(
- 10,12,12,9,7
- ),
- 'pluginOptions' => array(
- 'type' => 'bullet'
- )
- ));
- ?>
- </div>
- </div>
Google Charts provides a perfect way to visualize data. Simple, and very effective widget.
- <?php
- $this->widget('yiiwheels.widgets.google.WhVisualizationChart', array(
- 'visualization' => 'PieChart',
- 'data' => array(
- array('Task', 'Hours per Day'),
- array('Work', 11),
- array('Eat', 2),
- array('Commute', 2),
- array('Watch TV', 2),
- array('Sleep', 7)
- ),
- 'options' => array(
- 'title' => 'My Daily Activity'
- )
- ));
- ?>