Skip to content

Latest commit

 

History

History
295 lines (255 loc) · 7.97 KB

README.md

File metadata and controls

295 lines (255 loc) · 7.97 KB
Raw

ChartjsBundle

Adding charts to symfony 2 using Chart.js 2.4.0

Symfony 2 Bundle that allow us to add charts in our projects, using Chart.js 2.4.0 library.

How to use it

Install

composer require fados/chartjs-bundle dev-master

This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.

Then, enable the bundle by adding the following line in the app/AppKernel.php file of your project

   new fados\ChartjsBundle\ChartjsBundle(),

Usage

Configure you config.yml with:

chartjs:
    animation:
        duration: 1000
        easing: easeOutQuart
    layout:
        padding: 0
    legend:
        display: true
        position: 'top'
        fullWidth: true
        reverse: false
        labels:
            boxWidth:	40
            fontSize:	12
            fontStyle:	'normal'
            fontColor:	'#666'
            fontFamily:	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
            padding:	10
            usePointStyle:	false
    title:
        display: false
        position: 'top'
        fontSize: 12
        fontFamily:	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
        fontColor: '#666'
        fontStyle: 'bold'
        padding: 10
        text:	''

This configuration is for the global configuration of Chartjs.

Register the routing in app/config/routing.yml:

# app/config/routing.yml

fados_chartjs:
    resource: "@ChartjsBundle/Resources/Config/routing.xml"

The routing file only have Charts samples

http://localhost/xxx/web/app_dev.php/testchart/mainTest

Publish the assets:

$ php app/console assets:install web

Add the required stylesheet and javascripts to your layout:

jquery on top (jquery library isn't in the assets, you have to add downloading from http://jquery.com/):

    <script src="{{ asset('js/jquery.min.js') }}"></script>

Chart.js Javascript:

    <script src="{{ asset('bundles/charjsbundle/js/Chart.min.js') }}"></script>

You could only add the javascript or use an extension twig, in the template where you wish to display the Chart, add the following twig:

{{ chartjs_canvas('myPieChart',graphica.width,graphica.height,graphica) }}

The first parameter is the Canvas id, its mandatory and must be unique, canvas Width, anvas Height and an array, graphicChart, with an special structure.

Array structure for building charts (fados\ChartjsBundle\Model\ChartBuilderData). Sample:

        $graphicChart = new ChartBuilderData();
        $graphicChart->setType(TypeCharjs::CHARJS_BAR);
        $graphicChart->setLabels(array('Barcelona','New York','Londres','Paris','Berlin','Tokio','El Cairo'));
        $graphicChart->setData(
          array(
              'Profit' => array(23,45,65,12,34,45,88),
              'Cost' => array(13,34,54,11,34,35,48),
          )
        );
        $graphicChart->setBackgroundcolor(
              array(
                  TypeColors::aqua,
                  TypeColors::dark_green
              )
        );
        $graphicChart->setBordercolor(
                array(
                    TypeColors::aqua,
                    TypeColors::dark_green

                )
        );
        $graphicChart->getHeight('150px');
        $graphicChart->getWidth('500px');
        $grafica->setOptions("
                  animation: {
                        duration: 0, // general animation time
                  },
                  hover: {
                      animationDuration: 0, // duration of animations when hovering an item
                  },
                  responsiveAnimationDuration: 0, // animation duration after a resize"
        );

        $grafica->setDatasetConfig('
                      pointStyle: \'star\',
        ');

Controller will be:

 public function barAction()   {
        $grafica = new ChartBuilderData();
        $grafica->setType(TypeCharjs::CHARJS_BAR);
        $grafica->setLabels(array('Barcelona','New York','Londres','Paris','Berlin','Tokio','El Cairo'));
        $grafica->setData(
          array(
              'Profit' => array(23,45,65,12,34,45,88),
              'Cost' => array(13,34,54,11,34,35,48),
          ));
          $grafica->setBackgroundcolor(
              array(
                  TypeColors::aqua,
                  TypeColors::dark_green
              )
          );
          $grafica->setBordercolor(
                array(
                    TypeColors::aqua,
                    TypeColors::dark_green
                )
          );
        $grafica->setHeight('150px');
        $grafica->setWidth('500px');
        $grafica->setTitle('Sample Charjs Bar');
        return $this->render('ChartjsBundle:test:testChart.html.twig',array('grafica'=>$grafica,'title'=>$grafica->getTitle()));
    }

There are a couple of help classes related to colors and Charts type:

ChartsType: Define the Charts that you can render:

    CHARJS_BAR = 'bar';
    CHARJS_HORIZONTALBAR = 'horizontalBar';
    CHARJS_RADAR = 'radar';
    CHARJS_LINE = 'line';
    CHARJS_PIE = 'pie';
    CHARJS_DOUGHNUT = 'doughnut';
    CHARJS_POLAR_AREA = 'polarArea';

TypeColors: Define colors, over 250

 maroon = '128,0,0';
	dark_red = '139,0,0';
	brown = '165,42,42';
	firebrick = '178,34,34';
	crimson = '220,20,60';
	red = '255,0,0';
	tomato = '255,99,71';
	coral = '255,127,80';
	indian_red = '205,92,92';
	light_coral = '240,128,128';
	dark_salmon = '233,150,122';
	salmon = '250,128,114';
	light_salmon = '255,160,122';
	orange_red = '255,69,0';
	dark_orange = '255,140,0';
	orange = '255,165,0';
	gold = '255,215,0';
 ...

You Could build this array by hand or using a service transformer $grafica = $this->get('app.chartjs.transformer_char'), this service, transform database data to an Array data, prepared to be rendered by Chart.js:

public function transform($type,$data,$fieldLabels,$fieldKpi,$options,$fieldData);

Sample:

$grafica = $this->get('app.chartjs.transformer_char')->transform(TypeCharjs::CHARJS_PIE,$data,'kpi','zone',$options,'average')->toArray();

This service has several parameters:

Type of chart: $type => TypeCharjs::CHARJS_BAR (use fados\ChartjsBundle\Utils\TypeCharjs;)

Database Data

$data=>
       0 = {array} [4]
           zone = "Europe"
           kpi = "Number of NIUs"
           average = "1250"
       1 = {array} [4]
           zone = "Asia"
           kpi = "Number of NIUs"
           average = "1225"
       2 = {array} [4]
           zone = "Africa"
           kpi = "Number of NIUs"
           average = "1235"
       }

Labels in the Chrart:

$fieldLabels => 'zone'

Indicator field:

$fieldKpi => 'kpi'

Value Field:

$fieldData => 'average'

Chartjs options:

$options => graphic options

This transform will converto to this structure of array:

         $result {array} [2]
              labels = {array}[3]
                         [0] = Europe
                         [1] = Asia
                         [2] = Africa
              data  = {array}[1]
                   Number of NIUs = {array}[3]
                          [0] = 1250
                          [1] = 1225
                          [2] = 1235

Twig sample

{% extends 'AppBundle:Default:index.html.twig' %}

{% block title %}Sample Chart{% endblock %}

{% block javascript-head %}
    {{ parent() }}
    <script src="{{ asset('js/jquery.min.js') }}"></script>
{% endblock %}

{% block contingut %}
    <div class="container">
        <div class="Absolute-Center centrar">
            <div class="container">
                <h2 style="margin-bottom:20px">Chart</h2>
                <div class="chart">
                <h3>{{ title }}</h3>
                {{ chartjs_canvas('mychar1',grafica.width,grafica.height,grafica) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    <script src="{{ asset('bundles/charjts/js/Chart.min.js') }}"></script>
{% endblock %}