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.

<?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.

Inline
Bar
Pie Chart
Bullet
<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'
    )
));
?>
comments powered by Disqus