multiline chart in dashboard

Hi,
how can i create a multiline chart in dashboard, or where i can find documentation ?

Thanks

Topic

[Yevhen ShyshkinParticipant]

Hello.

Here is example of configuration, controller and data provider.

As for documentation – you can check bundle documentation and configuration format reference.

[fred33Participant]

Hi,
I read the documentation for the dashboard and I understood the march followed by against using graphics really remains very obscure for me. I need a graph with two lines representing the monthly sales for each employee , so connecting a database ….

[Yevhen ShyshkinParticipant]

You should look at the example – e.g. you can debug this widget with real (or demo) data and check what data and format are used there.

[fred33Participant]

I come to you for this problem of multiline chart . In fact I can not have much and I think the management of chart is really not an easy thing in orocrm.
this is not a criticism it’s just that the level of knowledge must be high enough to understand all the mechanisms

[Yevhen ShyshkinParticipant]

Ok, let’s have a closer look at the dashboard multiline widget data. I’ve used a widget from the links before (New Web Customers), and here is what my results are:

1) General widget configuration can be generated automatically based on YAML config using this code (new_magento_customers_chart is a name of a widget):

PHP

$data = $widgetAttributes->getWidgetAttributesForTwig('new_magento_customers_chart');

1	$data = $widgetAttributes->getWidgetAttributesForTwig('new_magento_customers_chart');

And here is real data generated by this method:

Shell

array ( 'widgetName' => 'new_magento_customers_chart', 'widgetLabel' => 'orocrm.magento.dashboard.new_magento_customers_chart.title', 'widgetDescription' => 'orocrm.magento.dashboard.new_magento_customers_chart.description', 'widgetIcon' => 'bundles/orocrmmagento/img/number-magento-customers.png', 'widgetApplicable' => '@orocrm_magento.provider.enitity_state->isEntityCustomerEnabled()', 'widgetConfiguration' => array ( 'title' => array ( 'type' => 'oro_type_widget_title', 'options' => array ( 'label' => 'oro.dashboard.title.label', 'required' => false, ), 'show_on_widget' => false, 'converter_attributes' => array ( ), 'value' => 'orocrm.magento.dashboard.new_magento_customers_chart.title', ), 'dateRange' => array ( 'type' => 'oro_type_widget_date_range', 'options' => array ( 'label' => 'oro.dashboard.date_range.label', ), 'show_on_widget' => true, 'converter_attributes' => array ( ), 'value' => 'more than Jan 1, 2015', ), ), 'widgetEnabled' => true, 'widgetDataItems' => array ( ), )

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

array (   'widgetName' => 'new_magento_customers_chart',   'widgetLabel' => 'orocrm.magento.dashboard.new_magento_customers_chart.title',   'widgetDescription' => 'orocrm.magento.dashboard.new_magento_customers_chart.description',   'widgetIcon' => 'bundles/orocrmmagento/img/number-magento-customers.png',   'widgetApplicable' => '@orocrm_magento.provider.enitity_state->isEntityCustomerEnabled()',   'widgetConfiguration' =>   array (     'title' =>     array (       'type' => 'oro_type_widget_title',       'options' =>       array (         'label' => 'oro.dashboard.title.label',         'required' => false,       ),       'show_on_widget' => false,       'converter_attributes' =>       array (       ),       'value' => 'orocrm.magento.dashboard.new_magento_customers_chart.title',     ),     'dateRange' =>     array (       'type' => 'oro_type_widget_date_range',       'options' =>       array (         'label' => 'oro.dashboard.date_range.label',       ),       'show_on_widget' => true,       'converter_attributes' =>       array (       ),       'value' => 'more than Jan 1, 2015',     ),   ),   'widgetEnabled' => true,   'widgetDataItems' =>   array (   ), )

2) Chart view consists of two parts – chart options and chart data, here is how they should be used:

Shell

$data['chartView'] = $chartViewBuilder ->setOptions($chartOptions) ->setArrayData($items) ->getView()

1 2 3 4

$data['chartView'] = $chartViewBuilder     ->setOptions($chartOptions)     ->setArrayData($items)     ->getView()

Not let’s look at these two parts.

2.1) Chart options define type of a widget and additional parameters required to build this chard (axis, labels etc.) – almost all of these options can be extracted from config too:

Shell

array ( 'name' => 'multiline_chart', 'label' => 'oro.chart.multiline_chart.label', 'data_schema' => array ( 'label' => array ( 'name' => 'label', 'label' => 'oro.dashboard.chart.month.label', 'required' => true, 'default_type' => 'string', 'type' => 'month', 'field_name' => 'date', 'type_filter' => array ( ), ), 'value' => array ( 'name' => 'value', 'label' => 'orocrm.magento.dashboard.new_magento_customers_chart.customer_count', 'required' => true, 'default_type' => 'integer', 'field_name' => 'cnt', 'type_filter' => array ( ), ), ), 'xaxis' => array ( 'mode' => 'time', 'noTicks' => 12, ), 'template' => 'OroChartsBundle:Chart:multiline.html.twig', 'settings_schema' => array ( ), default_settings' => array ( ), ) '

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

array (   'name' => 'multiline_chart',   'label' => 'oro.chart.multiline_chart.label',   'data_schema' =>   array (     'label' =>     array (       'name' => 'label',       'label' => 'oro.dashboard.chart.month.label',       'required' => true,       'default_type' => 'string',       'type' => 'month',       'field_name' => 'date',       'type_filter' =>       array (       ),     ),     'value' =>     array (       'name' => 'value',       'label' => 'orocrm.magento.dashboard.new_magento_customers_chart.customer_count',       'required' => true,       'default_type' => 'integer',       'field_name' => 'cnt',       'type_filter' =>       array (       ),     ),   ),   'xaxis' =>   array (     'mode' => 'time',     'noTicks' => 12,   ),   'template' => 'OroChartsBundle:Chart:multiline.html.twig',   'settings_schema' =>   array (   ), default_settings' =>   array (   ), )   '

2.2) Chart data is basically a data used to render this chart:

Shell

array ( 'mag1' => array ( 0 => array ( 'date' => '2015-01-01', 'cnt' => 13, ), 1 => array ( 'date' => '2015-02-01', 'cnt' => 2, ), 2 => array ( 'date' => '2015-03-01', 'cnt' => 6, ), 3 => array ( 'date' => '2015-04-01', 'cnt' => 2, ), 4 => array ( 'date' => '2015-05-01', 'cnt' => 5, ), 5 => array ( 'date' => '2015-06-01', 'cnt' => 5, ), 6 => array ( 'date' => '2015-07-01', 'cnt' => 1, ), 7 => array ( 'date' => '2015-08-01', 'cnt' => 5, ), 8 => array ( 'date' => '2015-09-01', 'cnt' => 5, ), 9 => array ( 'date' => '2015-10-01', 'cnt' => 1, ), 10 => array ( 'date' => '2015-11-01', 'cnt' => 3, ), 11 => array ( 'date' => '2015-12-01', ), 12 => array ( 'date' => '2016-01-01', 'cnt' => 1, ), 13 => array ( 'date' => '2016-02-01', ), 14 => array ( 'date' => '2016-03-01', 'cnt' => 11, ), ), 'mag2' => array ( 0 => array ( 'date' => '2015-01-01', 'cnt' => 4, ), 1 => array ( 'date' => '2015-02-01', 'cnt' => 2, ), 2 => array ( 'date' => '2015-03-01', 'cnt' => 40, ), 3 => array ( 'date' => '2015-04-01', 'cnt' => 63, ), 4 => array ( 'date' => '2015-05-01', 'cnt' => 4, ), 5 => array ( 'date' => '2015-06-01', 'cnt' => 2, ), 6 => array ( 'date' => '2015-07-01', 'cnt' => 1, ), 7 => array ( 'date' => '2015-08-01', 'cnt' => 9, ), 8 => array ( 'date' => '2015-09-01', 'cnt' => 3, ), 9 => array ( 'date' => '2015-10-01', 'cnt' => 3, ), 10 => array ( 'date' => '2015-11-01', 'cnt' => 1, ), 11 => array ( 'date' => '2015-12-01', ), 12 => array ( 'date' => '2016-01-01', 'cnt' => 1, ), 13 => array ( 'date' => '2016-02-01', 'cnt' => 3, ), 14 => array ( 'date' => '2016-03-01', 'cnt' => 2, ), ), )

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155

array (   'mag1' =>   array (     0 =>     array (       'date' => '2015-01-01',       'cnt' => 13,     ),     1 =>     array (       'date' => '2015-02-01',       'cnt' => 2,     ),     2 =>     array (       'date' => '2015-03-01',       'cnt' => 6,     ),     3 =>     array (       'date' => '2015-04-01',       'cnt' => 2,     ),     4 =>     array (       'date' => '2015-05-01',       'cnt' => 5,     ),     5 =>     array (       'date' => '2015-06-01',       'cnt' => 5,     ),     6 =>     array (       'date' => '2015-07-01',       'cnt' => 1,     ),     7 =>     array (       'date' => '2015-08-01',       'cnt' => 5,     ),     8 =>     array (       'date' => '2015-09-01',       'cnt' => 5,     ),     9 =>     array (       'date' => '2015-10-01',       'cnt' => 1,     ),     10 =>     array (       'date' => '2015-11-01',       'cnt' => 3,     ),     11 =>     array (       'date' => '2015-12-01',     ),     12 =>     array (       'date' => '2016-01-01',       'cnt' => 1,     ),     13 =>     array (       'date' => '2016-02-01',     ),     14 =>     array (       'date' => '2016-03-01',       'cnt' => 11,     ),   ),   'mag2' =>   array (     0 =>     array (       'date' => '2015-01-01',       'cnt' => 4,     ),     1 =>     array (       'date' => '2015-02-01',       'cnt' => 2,     ),     2 =>     array (       'date' => '2015-03-01',       'cnt' => 40,     ),     3 =>     array (       'date' => '2015-04-01',       'cnt' => 63,     ),     4 =>     array (       'date' => '2015-05-01',       'cnt' => 4,     ),     5 =>     array (       'date' => '2015-06-01',       'cnt' => 2,     ),     6 =>     array (       'date' => '2015-07-01',       'cnt' => 1,     ),     7 =>     array (       'date' => '2015-08-01',       'cnt' => 9,     ),     8 =>     array (       'date' => '2015-09-01',       'cnt' => 3,     ),     9 =>     array (       'date' => '2015-10-01',       'cnt' => 3,     ),     10 =>     array (       'date' => '2015-11-01',       'cnt' => 1,     ),     11 =>     array (       'date' => '2015-12-01',     ),     12 =>     array (       'date' => '2016-01-01',       'cnt' => 1,     ),     13 =>     array (       'date' => '2016-02-01',       'cnt' => 3,     ),     14 =>     array (       'date' => '2016-03-01',       'cnt' => 2,     ),   ), )

And as a result we can see dashboard widget with required information rendered as two lines:

In general – if you feel that you can improve documentation for dashboard widget – we will be happy to accept your pull request to platform or documentation repository.

[fred33Participant]

in no way my knowledge about orocrm are too poor to bring my contribution I am trying to understand the philosophy of orocrm and apply it . I think I understand the operation of the chart it’s just in construction that I have trouble , controller, dataprovider , twig …

[Author]

Replies