Fork me on GitHub

Widgets

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.

Created with Highcharts 4.0.4Chart context menuFruit eatenFruit ConsumptionJaneJohnApplesBananasOranges02468-2Highcharts.com
  1. <?php
  2. $this->widget(
  3. 'yiiwheels.widgets.highcharts.WhHighCharts',
  4. array(
  5. 'pluginOptions' => array(
  6. 'title' => array('text' => 'Fruit Consumption'),
  7. 'xAxis' => array(
  8. 'categories' => array('Apples', 'Bananas', 'Oranges')
  9. ),
  10. 'yAxis' => array(
  11. 'title' => array('text' => 'Fruit eaten')
  12. ),
  13. 'series' => array(
  14. array('name' => 'Jane', 'data' => array(1, 0, 4)),
  15. array('name' => 'John', 'data' => array(5, 7, 3))
  16. )
  17. )
  18. )
  19. );
  20. ?>

Here some examples of what you can do with this cool and tiny lib. For more information please go to JQuery Sparklines site.

Inline
Bar
Pie Chart
Bullet
  1. <div class="row">
  2. <div class="col-md-3">
  3. Inline <?php
  4. $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
  5. 'data' => array(
  6. 10,8,5,7,4,4,1, 10,8,5,7,4,4,1
  7. )
  8. ));
  9. ?>
  10. Bar <?php
  11. $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
  12. 'data' => array(
  13. 10,8,5,7,4,4,1, 10,8,5,7,4,4,1
  14. ),
  15. 'pluginOptions' => array(
  16. 'type' => 'bar', 'barColor' => 'green'
  17. )
  18. ));
  19. ?>
  20. </div>
  21. <div class="col-md-3">
  22. Pie Chart <?php
  23. $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
  24. 'data' => array(
  25. 1,1,2
  26. ),
  27. 'pluginOptions' => array(
  28. 'type' => 'pie',
  29. )
  30. ));
  31. ?>
  32. Bullet <?php
  33. $this->widget('yiiwheels.widgets.sparklines.WhSparklines', array(
  34. 'data' => array(
  35. 10,12,12,9,7
  36. ),
  37. 'pluginOptions' => array(
  38. 'type' => 'bullet'
  39. )
  40. ));
  41. ?>
  42. </div>
  43. </div>

Google Charts provides a perfect way to visualize data. Simple, and very effective widget.

  1. <?php
  2. $this->widget('yiiwheels.widgets.google.WhVisualizationChart', array(
  3. 'visualization' => 'PieChart',
  4. 'data' => array(
  5. array('Task', 'Hours per Day'),
  6. array('Work', 11),
  7. array('Eat', 2),
  8. array('Commute', 2),
  9. array('Watch TV', 2),
  10. array('Sleep', 7)
  11. ),
  12. 'options' => array(
  13. 'title' => 'My Daily Activity'
  14. )
  15. ));
  16. ?>