4.1.2 WidgetChart

WidgetChart

Located at "/vendor/feiron/felaraframe/src/widgets/lib/fe_Widgets/WidgetChart.php"

This widget is primarily used to render chart within a widget frame. While sharing every behavior from a generic widget, you can further, set the chart types to be line, bar, pie, etc.

Note: This widget uses third-party JS library "morris.js". You can find out more about the JS settings from Morris Chart Office website

To use this widget:

• Simply add the widget into the service container and give it a unique KeyName.
• Set widget specific configurations from the second parameter of "addWidget" method.

$this->app->WidgetManager->addWidget('Unique_Key_Name', [
            'widgetType'=>'WidgetChart',
            'Description' => 'Widget Chart Example as the description',
            'widgetParam'=>[
                    'headers'=>['name','age'],
                    'Widget_header'=>'Sales records for the last <strong>6 Months</strong>',
                    'chartType'=>'line',
                    'WidgetData'=>[
                        ["year" => '2008', "value" => 20],
                        ["year" => '2009', "value" => 10],
                        ["year" => '2010', "value" => 15],
                        ["year" => '2011', "value" => 100],
                        ["year" => '2012', "value" => 150],
                        ["year" => '2013', "value" => 30],
                        ["year" => '2014', "value" => 70]
                    ],
                    'Width'=>'6'
                ]
            ]);

note: "addWidget" takes 2 parameters. First is the key name within the widget list. Second is the widget definition (dictionary format) that;

• sets widget type (default to "widgetGeneric" if left empty) by key "widgetType"
• sets description of the widget when browsed by user by key "Description"
• specify widget parameters to further customize the widget by key "widgetParam". You can write one widget and reuse it with different options!

---

To modify and use this widget:

1. Create a class (in this example we use class name "MyChart") and extend feiron\felaraframe\widgets\lib\fe_Widgets\WidgetChart
2. Define or initialize some default widget settings/parameters within the constructor. Set chart type by parameter "chartType"

Additional settings for the chart widget can be set by using $this->UpdateWidgetSettings() in according to Morris Json Setting option list Lines, Bars, Donuts

Eg: $this->UpdateWidgetSettings(['resize'=>true,'colors'=>['red','green','#0088cc']])

note: Refer to the last section of this chapter for a list of all available widget parameters. note: In addition to all parameters from generic widget, chart specific parameters are:

- HeaderIcon: font-awesome class name. eg: "line-chart"
- chartType: line,bar,pie,etc.
- settingList: json contents to be transferred onto front-end chart js configuration.

3. Define the setData function for the chart to get its data, or define an AJAX route for the chart to retrieve its data.
4. Bind the new widget class to the Widget Resolver.

       $this->app->Widget->bind(\App\lib\SiteWidgets\MyChart::class);
   
5. Add the widget class to the Widget manager.

       $this->app->WidgetManager->addWidget('AChart', ['widgetType' => 'MyChart', 'Description' => 'This is shown to the user when choose a widget to display.']);
   

A complete file looks like follows:

// ... MyChart.php
namespace App\lib\myWidgets;
use feiron\felaraframe\widgets\lib\fe_Widgets\WidgetChart;

class MyChart extends WidgetChart{
    public function __construct($viewParameters){
        $defaultParameters['Width'] = '3';
        $defaultParameters['Widget_header'] = 'This is a testing chart widget';
        $defaultParameters['chartType'] = 'donut';
        parent::__construct(array_merge($defaultParameters, ($viewParameters ?? [])));
        $this->setData(function(){
            return $this->getSalesByStore();
        });
    }
    private function getSalesByStore(){
        return [
                    ["label" => 'Store 1', "value" => 500500],
                    ["label" => 'Store 2', "value" => 154587],
                    ["label" => 'Store 3', "value" => 654488],
                    ["label" => 'Store 4', "value" => 65847]
                ];
    }
}

// ... app/Providers/AppServiceProvider.php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider{
    public function register(){
        $this->app->Widget->bind(\App\lib\myWidgets\MyChart::class);
        $this->app->WidgetManager->addWidget('ChartWidget', ['widgetType' => 'MyChart', 'Description' => 'This is shown to the user when choose a widget to display.']);
    }
}