This commit takes all sub-module-specific code out of the core charts module,...

This commit takes all sub-module-specific code out of the core charts module, making the module more extensible. It also improves the libraries.yml files and removes unused code from various parts of the site.

charts.api.php

@@ -102,15 +102,6 @@ function hook_chart_CHART_ID_alter(&$chart) {
  *   all charts may have a $chart_id.
  */
 function hook_chart_definition_alter(&$definition, $chart) {
-  if ($chart['#chart_library'] === 'google') {
-    $definition['options']['titleTextStyle']['fontSize'] = 20;
-  }
-  if ($chart['#chart_library'] === 'c3') {
-    $definition['options']['titleTextStyle']['fontSize'] = 20;
-  }
-  elseif ($chart['#chart_library'] === 'highcharts') {
-    $definition['title']['style']['fontSize'] = 20;
-  }
 }
 
 /**
@@ -132,16 +123,16 @@ function hook_chart_definition_CHART_ID_alter(&$chart) {
  * hook may be used as a #chart_library property on $chart renderables.
  */
 function hook_charts_info() {
-  $info['my_charting_library'] = array(
+  $info['my_charting_library'] = [
     'label' => t('New charting library'),
     // Specify a callback function which will be responsible for accepting a
     // $chart renderable and printing a chart on the page.
     'render' => '_my_charting_library_render',
     // Specify the chart types your library is capable of providing.
-    'types' => array('area', 'bar', 'column', 'line', 'pie', 'scatter'),
+    'types' => ['area', 'bar', 'column', 'line', 'pie', 'scatter'],
     // If your callback function is in a separate file, specify it's location.
     // 'file' => 'includes/my_charting_library.inc',
-  );
+  ];
   return $info;
 }
 
@@ -165,7 +156,7 @@ function hook_charts_info_alter(&$info) {
  * all charting libraries.
  */
 function hook_charts_type_info() {
-  $chart_types['bar'] = array(
+  $chart_types['bar'] = [
     'label' => t('Bar'),
     // If this chart supports both an X and Y axis, set this to
     // CHARTS_DUAL_AXIS. If only a single axis is supported (e.g. pie), then
@@ -178,7 +169,7 @@ function hook_charts_type_info() {
     // For bar/area/other charts that support stacking of series, set this value
     // to TRUE.
     'stacking' => TRUE,
-  );
+  ];
   return $chart_types;
 }
 

charts.libraries.yml

-charts:
-  version: 1.x
-  js:
-    js/charts.admin.js: {}
-  dependencies:
-    - core/jquery
-    - core/jquery.once
-    - core/drupal
-    - core/drupalSettings

charts.module

@@ -6,6 +6,7 @@
  */
 
 use Drupal\charts\Util\Util;
+use Drupal\charts\Charts\ModuleSelector;
 
 /**
  * {@inheritdoc}
@@ -73,8 +74,7 @@ function template_preprocess_views_view_charts(&$variables) {
 
   if (0 < count($attachmentView)) {
     $data = Util::viewsData($view, $valueField, $labelField, $color, $attachmentChartTypeOption[$i]);
-  }
-  else {
+  } else {
     $data = Util::viewsData($view, $valueField, $labelField, $color, $attachmentChartTypeOption[$i] = NULL);
   }
 
@@ -91,43 +91,6 @@ function template_preprocess_views_view_charts(&$variables) {
   }
   $seriesData = array_merge($seriesData, $seriesDataAttachment);
 
-  // Handles the toggling from one library to another.
-  switch ($library) {
-    case 'google':
-      Util::checkMissingLibrary('charts_google', '/vendor/google/loader.js');
-      $googleData = charts_google_render_charts($categories, $seriesData);
-      $googleOptions = charts_google_create_charts_options($options, $seriesData, $attachmentDisplayOptions);
-      $googleChartType = charts_google_create_chart_type($options);
-      $variables['chart_type'] = 'google';
-      $variables['attributes']['class'][0] = 'charts-google';
-      $variables['attributes']['id'][0] = $chartId;
-      $variables['content_attributes']['data-chart'][] = $googleData;
-      $variables['attributes']['google-options'][1] = json_encode($googleOptions);
-      $variables['attributes']['google-chart-type'][2] = json_encode($googleChartType);
-
-      break;
-
-    case 'highcharts':
-      Util::checkMissingLibrary('charts_highcharts', '/vendor/highcharts/highcharts.js');
-      $highchart = charts_highcharts_render_charts($options, $categories, $seriesData, $attachmentDisplayOptions);
-      $variables['chart_type'] = 'highcharts';
-      $variables['content_attributes']['data-chart'][] = json_encode($highchart);
-      $variables['attributes']['id'][0] = $chartId;
-      $variables['attributes']['class'][] = 'charts-highchart';
-
-      break;
-
-    case 'c3':
-      Util::checkMissingLibrary('charts_c3', '/vendor/cthree/c3.min.js');
-      $c3 = charts_c3_render_charts($options, $categories, $seriesData, $chartId, $attachmentDisplayOptions);
-      $variables['chart_type'] = 'c3';
-      $variables['content_attributes']['data-chart'][] = json_encode($c3);
-      $variables['attributes']['id'][0] = $chartId;
-      $variables['attributes']['class'][] = 'charts-c3';
-      break;
-
-    default:
-      // Not handled.
-  }
+  $moduleSelector = new ModuleSelector($library, $categories, $seriesData, $options, $attachmentDisplayOptions, $variables, $chartId);
 
 }

charts.services.yml

@@ -4,3 +4,6 @@ services:
 
   charts.charts_attachment:
     class: Drupal\charts\Services\ChartAttachmentService
+
+  charts.views_variable:
+    class: Drupal\charts\Services\ViewsDataService

includes/charts.pages.inc

@@ -218,7 +218,6 @@ function charts_cast_element_integer_values(&$element) {
 function charts_settings_form($form, $defaults = array(), $field_options = array(), $parents = array()) {
   // Ensure all defaults are set.
   $options = array_merge(charts_default_settings(), $defaults);
-  $form['#attached']['library'][] = "charts/charts.admin";
 
   // Get a list of available chart libraries.
   $charts_info = charts_info();

js/charts.admin.js

-/**
- * @file
- * Scripting for administrative interfaces of Charts module.
- */
-(function ($) {
-  'use strict';
-
-  Drupal.behaviors.chartsAdmin = {
-    attach: function (context, settings) {
-      // Change options based on the chart type selected.
-      $(context).find('.form-radios.chart-type-radios').once('charts-axis-inverted', function () {
-
-        // Manually attach collapsible fieldsets first.
-        if (Drupal.behaviors.collapse) {
-          Drupal.behaviors.collapse.attach(context, settings);
-        }
-
-        var xAxisLabel = $('fieldset.chart-xaxis .fieldset-title').html();
-        var yAxisLabel = $('fieldset.chart-yaxis .fieldset-title').html();
-
-        $(this).find('input:radio').change(function () {
-          if ($(this).is(':checked')) {
-            var groupingField = $(this).closest('form').find('.charts-grouping-field').val();
-
-            // Flip X/Y axis fieldset labels for inverted chart types.
-            if ($(this).attr('data-axis-inverted')) {
-              $('fieldset.chart-xaxis .fieldset-title').html(yAxisLabel);
-              $('fieldset.chart-xaxis .axis-inverted-show').closest('.form-item').show();
-              $('fieldset.chart-xaxis .axis-inverted-hide').closest('.form-item').hide();
-              $('fieldset.chart-yaxis .fieldset-title').html(xAxisLabel);
-              $('fieldset.chart-yaxis .axis-inverted-show').closest('.form-item').show();
-              $('fieldset.chart-yaxis .axis-inverted-hide').closest('.form-item').hide();
-            }
-            else {
-              $('fieldset.chart-xaxis .fieldset-title').html(xAxisLabel);
-              $('fieldset.chart-xaxis .axis-inverted-show').closest('.form-item').hide();
-              $('fieldset.chart-xaxis .axis-inverted-hide').closest('.form-item').show();
-              $('fieldset.chart-yaxis .fieldset-title').html(yAxisLabel);
-              $('fieldset.chart-yaxis .axis-inverted-show').closest('.form-item').hide();
-              $('fieldset.chart-yaxis .axis-inverted-hide').closest('.form-item').show();
-            }
-
-            // Show color options for single axis settings.
-            if ($(this).attr('data-axis-single')) {
-              $('fieldset.chart-xaxis').hide();
-              $('fieldset.chart-yaxis').hide();
-              $('th.chart-field-color, td.chart-field-color').hide();
-              $('div.chart-colors').show();
-            }
-            else {
-              $('fieldset.chart-xaxis').show();
-              $('fieldset.chart-yaxis').show();
-              if (groupingField) {
-                $('th.chart-field-color, td.chart-field-color').hide();
-                $('div.chart-colors').show();
-              }
-              else {
-                $('th.chart-field-color, td.chart-field-color').show();
-                $('div.chart-colors').hide();
-              }
-            }
-          }
-        });
-
-        // Set the initial values.
-        $(this).find('input:radio:checked').triggerHandler('change');
-      });
-
-      // React to the setting of a group field.
-      $(context).find('.charts-grouping-field').once('charts-grouping', function () {
-        $(this).change(function () {
-          var $form;
-          $form = $(this).closest('form');
-
-          // Hide the entire grouping field row, since no settings are applicable.
-          var value = $(this).val();
-          $form.find('#chart-fields tr').show();
-          if (value) {
-            var $labelField = $form.find('.chart-label-field input[value="' + value + '"]');
-            $labelField.closest('tr').hide();
-            if ($labelField.is(':checked')) {
-              $form.find('input[name="style_options[label_field]"][value=""]').attr('checked', 'checked').triggerHandler('change');
-            }
-          }
-          // Restripe the table after hiding/showing rows.
-          $form.find('#chart-fields tr:visible')
-            .removeClass('odd even')
-            .filter(':even').addClass('odd').end()
-            .filter(':odd').addClass('even');
-
-          // Recalculate shown color fields by triggering the chart type change.
-          $form.find('.form-radios.chart-type-radios input:radio:checked').triggerHandler('change');
-        }).triggerHandler('change');
-      });
-
-      // Disable the data checkbox when a field is set as a label.
-      $(context).find('td.chart-label-field input').once('charts-axis-inverted', function () {
-        var $radio = $(this);
-        $radio.change(function () {
-          if ($radio.is(':checked')) {
-            $('.chart-data-field input').show();
-            $('.chart-field-color input').show();
-            $('input.chart-field-disabled').remove();
-            $radio.closest('tr').find('.chart-data-field input').hide().after('<input type="checkbox" name="chart_field_disabled" disabled="disabled" class="chart-field-disabled" />');
-            $radio.closest('tr').find('.chart-field-color input').hide();
-          }
-        });
-        $radio.triggerHandler('change');
-      });
-
-    }
-  };
-}(jQuery));

modules/charts_c3/charts_c3.libraries.yml

@@ -29,7 +29,5 @@ c3:
   js:
     vendor/cthree/c3.min.js: {}
   dependencies:
-        - core/jquery
-        - core/jquery.once
-        - core/drupal
+        - charts_c3/charts_c3
         - charts_c3/d3
\ No newline at end of file

modules/charts_c3/charts_c3.module

@@ -5,111 +5,13 @@
  * Charts module integration with C3 library.
  */
 
-use Drupal\charts_c3\Settings\CThree\ChartType;
-use Drupal\charts_c3\Settings\CThree\CThree;
-use Drupal\charts_c3\Settings\CThree\ChartTitle;
-use Drupal\charts_c3\Settings\CThree\ChartData;
-use Drupal\charts_c3\Settings\CThree\ChartColor;
-use Drupal\charts_c3\Settings\CThree\ChartAxis;
-
 /**
  * Implements hook_charts_info().
  */
 function charts_c3_charts_info() {
-  $info['c3'] = array(
+  $info['c3'] = [
     'label' => t('C3 Charts'),
-    'types' => array('area', 'bar', 'column', 'line', 'pie', 'scatter'),
-  );
+    'types' => ['area', 'bar', 'column', 'line', 'pie', 'scatter'],
+  ];
   return $info;
 }
-
-/**
- * @param $options
- * @param array $categories
- * @param array $seriesData
- * @param $chartId
- * @param array $attachmentDisplayOptions
- *
- * @return CThree
- */
-function charts_c3_render_charts($options, $categories = array(), $seriesData = array(), $chartId, $attachmentDisplayOptions = []) {
-
-  $noAttachmentDisplays = count($attachmentDisplayOptions);
-  $yAxis = [];
-  $types = [];
-  //sets secondary axis from the first attachment only
-  if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0){
-    $yAxis[$seriesData[1]['name']] = 'y2';
-  }
-
-  for ($i = 1; $i <= count($attachmentDisplayOptions); $i++){
-    if ($attachmentDisplayOptions[$i - 1]['style']['options']['type'] == 'column')
-      $types[$seriesData[$i]['name']] = 'bar';
-    else
-      $types[$seriesData[$i]['name']] = $attachmentDisplayOptions[$i - 1]['style']['options']['type'];
-  }
-  $c3Data = array();
-  for ($i = 0; $i < count($seriesData); $i++) {
-    $c3DataTemp = $seriesData[$i]['data'];
-    array_unshift($c3DataTemp, $seriesData[$i]['name']);
-    array_push($c3Data, $c3DataTemp);
-  }
-
-  $c3Chart = new ChartType();
-  $c3Chart->setType($options['type']);
-  $c3ChartTitle = new ChartTitle();
-  $c3ChartTitle->setText($options['title']);
-  $chartAxis = new ChartAxis();
-  $c3 = new CThree();
-  $bindTo = '#' . $chartId;
-  $c3->setBindTo($bindTo);
-  //$c3->setChart($c3Chart);
-  //$c3->setLabels($options['data_labels']);
-  $c3->setTitle($c3ChartTitle);
-  $chartData = new ChartData();
-  if ($noAttachmentDisplays > 0){
-    $chartData->setLabels(FALSE);
-  }
-  if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0){
-    $chartData->axes = $yAxis;
-    $showSecAxis['show'] = true;
-    $showSecAxis['label'] = $attachmentDisplayOptions[0]['style']['options']['yaxis_title'];
-    $chartAxis->y2 = $showSecAxis;
-  }
-  $chartData->setType($options['type']);
-  $c3->setData($chartData);
-  if ($options['type'] == 'bar') {
-    $chartAxis->setRotated(TRUE);
-    array_unshift($categories, 'x');
-    array_push($c3Data, $categories);
-    $chartData->setColumns($c3Data);
-  }
-  else {
-    if ($options['type'] == 'column') {
-      $chartData->setType('bar');
-      $chartAxis->setRotated(FALSE);
-      array_unshift($categories, 'x');
-      array_push($c3Data, $categories);
-      $chartData->setColumns($c3Data);
-    }
-    else {
-      array_unshift($categories, 'x');
-      array_push($c3Data, $categories);
-      $chartData->setColumns($c3Data);
-    }
-  }
-  $chartData->types = $types;
-
-  $c3->setAxis($chartAxis);
-
-  $chartColor = new ChartColor();
-  $seriesColors = array();
-  for ($i = 0; $i < count($seriesData); $i++) {
-    $seriesColor = $seriesData[$i]['color'];
-    array_push($seriesColors, $seriesColor);
-  }
-  $chartColor->setPattern($seriesColors);
-  $c3->setColor($chartColor);
-
-  return $c3;
-}

modules/charts_c3/src/Charts/C3ChartsRender.php

+<?php
+
+namespace Drupal\charts_c3\Charts;
+
+use Drupal\charts\Util\Util;
+use Drupal\charts_c3\Settings\CThree\ChartType;
+use Drupal\charts_c3\Settings\CThree\CThree;
+use Drupal\charts_c3\Settings\CThree\ChartTitle;
+use Drupal\charts_c3\Settings\CThree\ChartData;
+use Drupal\charts_c3\Settings\CThree\ChartColor;
+use Drupal\charts_c3\Settings\CThree\ChartAxis;
+
+class C3ChartsRender {
+
+  public function __construct($categories, $seriesData, $options, $attachmentDisplayOptions, &$variables, $chartId) {
+
+    Util::checkMissingLibrary('charts_c3', '/vendor/cthree/c3.min.js');
+    $c3 = $this->charts_c3_render_charts($options, $categories, $seriesData, $chartId, $attachmentDisplayOptions);
+    $variables['chart_type'] = 'c3';
+    $variables['content_attributes']['data-chart'][] = json_encode($c3);
+    $variables['attributes']['id'][0] = $chartId;
+    $variables['attributes']['class'][] = 'charts-c3';
+  }
+
+  /**
+   * @param $options
+   * @param array $categories
+   * @param array $seriesData
+   * @param $chartId
+   * @param array $attachmentDisplayOptions
+   *
+   * @return CThree
+   */
+  private function charts_c3_render_charts($options, $categories = [], $seriesData = [], $chartId, $attachmentDisplayOptions = []) {
+
+    $noAttachmentDisplays = count($attachmentDisplayOptions);
+    $yAxis = [];
+    $types = [];
+    //sets secondary axis from the first attachment only
+    if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0) {
+      $yAxis[$seriesData[1]['name']] = 'y2';
+    }
+
+    for ($i = 1; $i <= count($attachmentDisplayOptions); $i++) {
+      if ($attachmentDisplayOptions[$i - 1]['style']['options']['type'] == 'column')
+        $types[$seriesData[$i]['name']] = 'bar';
+      else
+        $types[$seriesData[$i]['name']] = $attachmentDisplayOptions[$i - 1]['style']['options']['type'];
+    }
+    $c3Data = [];
+    for ($i = 0; $i < count($seriesData); $i++) {
+      $c3DataTemp = $seriesData[$i]['data'];
+      array_unshift($c3DataTemp, $seriesData[$i]['name']);
+      array_push($c3Data, $c3DataTemp);
+    }
+
+    $c3Chart = new ChartType();
+    $c3Chart->setType($options['type']);
+    $c3ChartTitle = new ChartTitle();
+    $c3ChartTitle->setText($options['title']);
+    $chartAxis = new ChartAxis();
+    $c3 = new CThree();
+    $bindTo = '#' . $chartId;
+    $c3->setBindTo($bindTo);
+    //$c3->setChart($c3Chart);
+    //$c3->setLabels($options['data_labels']);
+    $c3->setTitle($c3ChartTitle);
+    $chartData = new ChartData();
+    if ($noAttachmentDisplays > 0) {
+      $chartData->setLabels(FALSE);
+    }
+    if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0) {
+      $chartData->axes = $yAxis;
+      $showSecAxis['show'] = true;
+      $showSecAxis['label'] = $attachmentDisplayOptions[0]['style']['options']['yaxis_title'];
+      $chartAxis->y2 = $showSecAxis;
+    }
+    $chartData->setType($options['type']);
+    $c3->setData($chartData);
+    if ($options['type'] == 'bar') {
+      $chartAxis->setRotated(TRUE);
+      array_unshift($categories, 'x');
+      array_push($c3Data, $categories);
+      $chartData->setColumns($c3Data);
+    } else {
+      if ($options['type'] == 'column') {
+        $chartData->setType('bar');
+        $chartAxis->setRotated(FALSE);
+        array_unshift($categories, 'x');
+        array_push($c3Data, $categories);
+        $chartData->setColumns($c3Data);
+      } else {
+        array_unshift($categories, 'x');
+        array_push($c3Data, $categories);
+        $chartData->setColumns($c3Data);
+      }
+    }
+    $chartData->types = $types;
+
+    $c3->setAxis($chartAxis);
+
+    $chartColor = new ChartColor();
+    $seriesColors = [];
+    for ($i = 0; $i < count($seriesData); $i++) {
+      $seriesColor = $seriesData[$i]['color'];
+      array_push($seriesColors, $seriesColor);
+    }
+    $chartColor->setPattern($seriesColors);
+    $c3->setColor($chartColor);
+
+    return $c3;
+  }
+
+}

modules/charts_c3/src/Settings/CThree/ChartAxis.php

@@ -4,7 +4,7 @@ namespace Drupal\charts_c3\Settings\CThree;
 
 class ChartAxis implements \JsonSerializable {
   private $rotated = FALSE;
-  private $x = array('type' => 'category');
+  private $x = ['type' => 'category'];
 
   /**
    * @return mixed

modules/charts_c3/src/Settings/CThree/ChartColor.php

@@ -3,7 +3,7 @@
 namespace Drupal\charts_c3\Settings\CThree;
 
 class ChartColor implements \JsonSerializable {
-  private $pattern = array();
+  private $pattern = [];
 
   /**
    * @return mixed

modules/charts_c3/src/Settings/CThree/ChartData.php

@@ -3,7 +3,7 @@
 namespace Drupal\charts_c3\Settings\CThree;
 
 class ChartData implements \JsonSerializable {
-  private $columns = array();
+  private $columns = [];
   private $type;
   private $labels = TRUE;
   private $x = 'x';

modules/charts_google/charts_google.libraries.yml

@@ -6,7 +6,6 @@ charts_google:
         - core/jquery
         - core/jquery.once
         - core/drupal
-        - core/drupalSettings
 
 google:
   remote: https://www.gstatic.com/charts/loader.js
@@ -17,3 +16,5 @@ google:
       gpl-compatible: false
   js:
     vendor/google/loader.js: {}
+  dependencies:
+        - charts_google/charts_google

modules/charts_google/charts_google.module

@@ -13,111 +13,13 @@ use Drupal\charts_google\Settings\Google\ChartArea;
  * Implements hook_charts_info().
  */
 function charts_google_charts_info() {
-  $info['google'] = array(
+  $info['google'] = [
     'label' => t('Google Charts'),
     'render' => '_charts_google_render',
-    'types' => array('area', 'bar', 'column', 'line', 'pie', 'scatter'),
+    'types' => ['area', 'bar', 'column', 'line', 'pie', 'scatter'],
     'file' => 'charts_google.inc',
-  );
+  ];
   return $info;
 }
 
-/**
- * Creates a JSON Object formatted for Google charts to use
- * @param array $categories
- * @param array $seriesData
- *
- * @return json|string
- */
-function charts_google_render_charts($categories = array(), $seriesData = array()) {
-
-  $dataTable = array();
-  for ($j = 0; $j < count($categories); $j++) {
-    $rowDataTable = [];
-    for ($i = 0; $i < count($seriesData); $i++) {
-      $rowDataTabletemp = $seriesData[$i]['data'][$j];
-      array_push($rowDataTable, $rowDataTabletemp);
-    }
-    array_unshift($rowDataTable, $categories[$j]);
-    array_push($dataTable, $rowDataTable);
-  }
-
-  $dataTableHeader = array();
-  for ($r = 0; $r < count($seriesData); $r++) {
-    array_push($dataTableHeader, $seriesData[$r]['name']);
-  }
-
-  array_unshift($dataTableHeader, 'label');
-  array_unshift($dataTable, $dataTableHeader);
-
-  return json_encode($dataTable);
-}
-
-/**
- * @param $options
- * @param array $seriesData
- * @param array $attachmentDisplayOptions
- * @return GoogleOptions object with chart options or settings to be used by google visualization framework
- */
-function charts_google_create_charts_options($options, $seriesData = array(), $attachmentDisplayOptions = []) {
-  $chartSelected = [];
-  $seriesTypes = array();
-  $firstVaxis = array('minValue'=> 0, 'title' => $options['yaxis_title']);
-  $secondVaxis = array('minValue'=> 0);
-  $vAxes = array();
-  array_push($vAxes, $firstVaxis);
-  //sets secondary axis from the first attachment only
-  if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0){
-    $secondVaxis['title'] = $attachmentDisplayOptions[0]['style']['options']['yaxis_title'];
-    array_push($vAxes, $secondVaxis);
-  }
-  array_push($chartSelected, $options['type']);
-  for ($i = 0; $i < count($attachmentDisplayOptions); $i++){
-    $attachmentChartType = $attachmentDisplayOptions[$i]['style']['options']['type'];
-    if ($attachmentChartType == 'column')
-      $attachmentChartType = 'bars';
-    if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0 && $i == 0){
-      $seriesTypes[$i + 1] = array('type' => $attachmentChartType, 'targetAxisIndex' => 1);
-    }
-    else
-      $seriesTypes[$i + 1] = array('type' => $attachmentChartType);
-    array_push($chartSelected, $attachmentChartType);
-  }
-
-  $chartSelected = array_unique($chartSelected);
-  $googleOptions = new GoogleOptions();
-  if (count($chartSelected) > 1){
-    $parentChartType = $options['type'];
-    if ($parentChartType == 'column')
-      $parentChartType = 'bars';
-    $googleOptions->seriesType = $parentChartType;
-    $googleOptions->series = $seriesTypes;
-  }
-  $googleOptions->setTitle($options['title']);
-  $googleOptions->vAxes = $vAxes;
-  //$vAxis['title'] = $options['yaxis_title'];
-  //$googleOptions->setVAxis($vAxis);
-  $chartArea = new ChartArea();
-  $chartArea->setWidth(400);
-  // $googleOptions->setChartArea($chartArea);
-  $seriesColors = array();
-  for ($i = 0; $i < count($seriesData); $i++) {
-    $seriesColor = $seriesData[$i]['color'];
-    array_push($seriesColors, $seriesColor);
-  }
-  $googleOptions->setColors($seriesColors);
 
-  return $googleOptions;
-}
-
-/**
- * @param $options
- * @return ChartType
- */
-function charts_google_create_chart_type($options) {
-
-  $googleChartType = new ChartType();
-  $googleChartType->setChartType($options['type']);
-
-  return $googleChartType;
-}

modules/charts_google/src/Charts/GoogleChartsRender.php

+<?php
+
+namespace Drupal\charts_google\Charts;
+
+use Drupal\charts\Util\Util;
+use Drupal\charts_google\Settings\Google\GoogleOptions;
+use Drupal\charts_google\Settings\Google\ChartType;
+use Drupal\charts_google\Settings\Google\ChartArea;
+
+class GoogleChartsRender {
+
+  private $googleData;
+  private $googleOptions;
+  private $googleChartType;
+  private $chartId;
+
+  public function __construct($categories, $seriesData, $options, $attachmentDisplayOptions, &$variables, $chartId) {
+    Util::checkMissingLibrary('charts_google', '/vendor/google/loader.js');
+    $this->chartId = $chartId;
+    $this->googleData = $this->charts_google_render_charts($categories, $seriesData);
+    $this->googleOptions = $this->charts_google_create_charts_options($options, $seriesData, $attachmentDisplayOptions);
+    $this->googleChartType = $this->charts_google_create_chart_type($options);
+    $variables['chart_type'] = 'google';
+    $variables['attributes']['class'][0] = 'charts-google';
+    $variables['attributes']['id'][0] = $this->chartId;
+    $variables['content_attributes']['data-chart'][] = $this->googleData;
+    $variables['attributes']['google-options'][1] = json_encode($this->googleOptions);
+    $variables['attributes']['google-chart-type'][2] = json_encode($this->googleChartType);
+  }
+
+  /**
+   * Creates a JSON Object formatted for Google charts to use
+   * @param array $categories
+   * @param array $seriesData
+   *
+   * @return json|string
+   */
+  private function charts_google_render_charts($categories = [], $seriesData = []) {
+
+    $dataTable = [];
+    for ($j = 0; $j < count($categories); $j++) {
+      $rowDataTable = [];
+      for ($i = 0; $i < count($seriesData); $i++) {
+        $rowDataTabletemp = $seriesData[$i]['data'][$j];
+        array_push($rowDataTable, $rowDataTabletemp);
+      }
+      array_unshift($rowDataTable, $categories[$j]);
+      array_push($dataTable, $rowDataTable);
+    }
+
+    $dataTableHeader = [];
+    for ($r = 0; $r < count($seriesData); $r++) {
+      array_push($dataTableHeader, $seriesData[$r]['name']);
+    }
+
+    array_unshift($dataTableHeader, 'label');
+    array_unshift($dataTable, $dataTableHeader);
+
+    return json_encode($dataTable);
+  }
+
+  /**
+   * @param $options
+   * @param array $seriesData
+   * @param array $attachmentDisplayOptions
+   * @return GoogleOptions object with chart options or settings to be used by google visualization framework
+   */
+  private function charts_google_create_charts_options($options, $seriesData = [], $attachmentDisplayOptions = []) {
+    $chartSelected = [];
+    $seriesTypes = [];
+    $firstVaxis = ['minValue' => 0, 'title' => $options['yaxis_title']];
+    $secondVaxis = ['minValue' => 0];
+    $vAxes = [];
+    array_push($vAxes, $firstVaxis);
+    //sets secondary axis from the first attachment only
+    if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0) {
+      $secondVaxis['title'] = $attachmentDisplayOptions[0]['style']['options']['yaxis_title'];
+      array_push($vAxes, $secondVaxis);
+    }
+    array_push($chartSelected, $options['type']);
+    for ($i = 0; $i < count($attachmentDisplayOptions); $i++) {
+      $attachmentChartType = $attachmentDisplayOptions[$i]['style']['options']['type'];
+      if ($attachmentChartType == 'column')
+        $attachmentChartType = 'bars';
+      if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0 && $i == 0) {
+        $seriesTypes[$i + 1] = ['type' => $attachmentChartType, 'targetAxisIndex' => 1];
+      } else
+        $seriesTypes[$i + 1] = ['type' => $attachmentChartType];
+      array_push($chartSelected, $attachmentChartType);
+    }
+
+    $chartSelected = array_unique($chartSelected);
+    $googleOptions = new GoogleOptions();
+    if (count($chartSelected) > 1) {
+      $parentChartType = $options['type'];
+      if ($parentChartType == 'column')
+        $parentChartType = 'bars';
+      $googleOptions->seriesType = $parentChartType;
+      $googleOptions->series = $seriesTypes;
+    }
+    $googleOptions->setTitle($options['title']);
+    $googleOptions->vAxes = $vAxes;
+    //$vAxis['title'] = $options['yaxis_title'];
+    //$googleOptions->setVAxis($vAxis);
+    $chartArea = new ChartArea();
+    $chartArea->setWidth(400);
+    // $googleOptions->setChartArea($chartArea);
+    $seriesColors = [];
+    for ($i = 0; $i < count($seriesData); $i++) {
+      $seriesColor = $seriesData[$i]['color'];
+      array_push($seriesColors, $seriesColor);
+    }
+    $googleOptions->setColors($seriesColors);
+
+    return $googleOptions;
+  }
+
+  /**
+   * @param $options
+   * @return ChartType
+   */
+  private function charts_google_create_chart_type($options) {
+
+    $googleChartType = new ChartType();
+    $googleChartType->setChartType($options['type']);
+
+    return $googleChartType;
+  }
+}

modules/charts_highcharts/charts_highcharts.libraries.yml

@@ -17,4 +17,4 @@ highcharts:
   js:
     vendor/highcharts/highcharts.js: {}
   dependencies:
-      - core/jquery
+      - charts_highcharts/charts_highcharts

modules/charts_highcharts/charts_highcharts.module

@@ -3,111 +3,18 @@
  * @file
  * Charts module integration with Highcharts library.
  */
-use Drupal\charts_highcharts\Settings\Highcharts\ChartType;
-use Drupal\charts_highcharts\Settings\Highcharts\ChartTitle;
-use Drupal\charts_highcharts\Settings\Highcharts\Xaxis;
-use Drupal\charts_highcharts\Settings\Highcharts\ChartLabel;
-use Drupal\charts_highcharts\Settings\Highcharts\YaxisLabel;
-use Drupal\charts_highcharts\Settings\Highcharts\Yaxis;
-use Drupal\charts_highcharts\Settings\Highcharts\YaxisTitle;
-use Drupal\charts_highcharts\Settings\Highcharts\DataLabelStatus;
-use Drupal\charts_highcharts\Settings\Highcharts\DataLabels;
-use Drupal\charts_highcharts\Settings\Highcharts\PlotOptions;
-use Drupal\charts_highcharts\Settings\Highcharts\Tooltip;
-use Drupal\charts_highcharts\Settings\Highcharts\ChartCredits;
-use Drupal\charts_highcharts\Settings\Highcharts\ChartLegend;
-use Drupal\charts_highcharts\Settings\Highcharts\Highcharts;
+
 
 /**
  * Implements hook_charts_info().
  */
 function charts_highcharts_charts_info() {
-  $info['highcharts'] = array(
+  $info['highcharts'] = [
     'label' => t('Highcharts'),
     'render' => '_charts_highcharts_render',
-    'types' => array('area', 'bar', 'column', 'line', 'pie', 'scatter'),
+    'types' => ['area', 'bar', 'column', 'line', 'pie', 'scatter'],
     'file' => 'charts_highcharts.inc',
-  );
+  ];
 
   return $info;
 }
-
-/**
- * Creates a JSON Object formatted for Highcharts to use
- *
- * @param $options
- * @param array $categories
- * @param array $seriesData
- *
- * @param array $attachmentDisplayOptions
- *
- * @return Highcharts object to be used by highcharts javascripts visualization framework
- */
-function charts_highcharts_render_charts($options, $categories = array(), $seriesData = array(), $attachmentDisplayOptions = []) {
-
-  $chart = new ChartType();
-  $chart->setType($options['type']);
-  $chartTitle = new ChartTitle();
-  $chartTitle->setText($options['title']);
-  $chartXaxis = new Xaxis();
-  $chartLabels = new ChartLabel();
-  $chartLabels->setRotation($options['xaxis_labels_rotation']);
-  $chartXaxis->setCategories($categories);
-  $chartTitle->setText($options['title']);
-  $chartXaxis->setTitle($chartTitle);
-  $chartXaxis->setLabels($chartLabels);
-  $yaxisLabels = new YaxisLabel();
-  $chartYaxis = new Yaxis();
-  $yAxes = [];
-  $yAxisTitle = new YaxisTitle();
-  $yAxisTitle->setText($options['yaxis_title']);
-  if (!empty($options['yaxis_min'])){
-      $chartYaxis->min = $options['yaxis_min'];
-  }
-  if (!empty($options['yaxis_max'])){
-      $chartYaxis->max = $options['yaxis_max'];
-  }
-
-  $chartYaxis->setLabels($yaxisLabels);
-  $chartYaxis->setTitle($yAxisTitle);
-  array_push($yAxes, $chartYaxis);
-  // Chart libraries tend to supports only one secondary axis.
-  if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0){
-    $chartYaxisSecondary = new Yaxis();
-    $yAxisTitleSecondary = new YaxisTitle();
-    $yAxisTitleSecondary->setText($attachmentDisplayOptions[0]['style']['options']['yaxis_title']);
-    $chartYaxisSecondary->setTitle($yAxisTitleSecondary);
-    $chartYaxisSecondary->setLabels($yaxisLabels);
-    $chartYaxisSecondary->opposite = 'true';
-
-    if (!empty($attachmentDisplayOptions[0]['style']['options']['yaxis_min'])){
-      $chartYaxisSecondary->min = $attachmentDisplayOptions[0]['style']['options']['yaxis_min'];
-    }
-    if (!empty($attachmentDisplayOptions[0]['style']['options']['yaxis_max'])){
-      $chartYaxisSecondary->max = $attachmentDisplayOptions[0]['style']['options']['yaxis_max'];
-    }
-    array_push($yAxes, $chartYaxisSecondary);
-  }
-  $dataLabelStatus = new DataLabelStatus();
-  $dataLabels = new DataLabels();
-  $dataLabels->setDataLabels($dataLabelStatus);
-  $barPlotOptns = new PlotOptions();
-  $barPlotOptns->setBar($dataLabels);
-  $chartTooltip = new Tooltip();
-  $chartCredits = new ChartCredits();
-  $chartLegend = new ChartLegend();
-
-  $highchart = new Highcharts();
-  $highchart->setChart($chart);
-  $highchart->setTitle($chartTitle);
-  $highchart->setXAxis($chartXaxis);
-  //$highchart->setYAxis($chartYaxis);
-  $highchart->yAxis = $yAxes;
-  $highchart->setTooltip($chartTooltip);
-  $highchart->setPlotOptions($barPlotOptns);
-  $highchart->setCredits($chartCredits);
-  $highchart->setLegend($chartLegend);
-  $highchart->setSeries($seriesData);
-
-  return $highchart;
-}

modules/charts_highcharts/src/Charts/HighchartsChartsRender.php

+<?php
+
+namespace Drupal\charts_highcharts\Charts;
+
+use Drupal\charts\Util\Util;
+use Drupal\charts_highcharts\Settings\Highcharts\ChartType;
+use Drupal\charts_highcharts\Settings\Highcharts\ChartTitle;
+use Drupal\charts_highcharts\Settings\Highcharts\Xaxis;
+use Drupal\charts_highcharts\Settings\Highcharts\ChartLabel;
+use Drupal\charts_highcharts\Settings\Highcharts\YaxisLabel;
+use Drupal\charts_highcharts\Settings\Highcharts\Yaxis;
+use Drupal\charts_highcharts\Settings\Highcharts\YaxisTitle;
+use Drupal\charts_highcharts\Settings\Highcharts\DataLabelStatus;
+use Drupal\charts_highcharts\Settings\Highcharts\DataLabels;
+use Drupal\charts_highcharts\Settings\Highcharts\PlotOptions;
+use Drupal\charts_highcharts\Settings\Highcharts\Tooltip;
+use Drupal\charts_highcharts\Settings\Highcharts\ChartCredits;
+use Drupal\charts_highcharts\Settings\Highcharts\ChartLegend;
+use Drupal\charts_highcharts\Settings\Highcharts\Highcharts;
+
+class HighchartsChartsRender {
+
+  public function __construct($categories, $seriesData, $options, $attachmentDisplayOptions, &$variables, $chartId) {
+
+    Util::checkMissingLibrary('charts_highcharts', '/vendor/highcharts/highcharts.js');
+    $highchart = $this->charts_highcharts_render_charts($options, $categories, $seriesData, $attachmentDisplayOptions);
+    $variables['chart_type'] = 'highcharts';
+    $variables['content_attributes']['data-chart'][] = json_encode($highchart);
+    $variables['attributes']['id'][0] = $chartId;
+    $variables['attributes']['class'][] = 'charts-highchart';
+
+  }
+
+  /**
+   * Creates a JSON Object formatted for Highcharts to use
+   *
+   * @param $options
+   * @param array $categories
+   * @param array $seriesData
+   *
+   * @param array $attachmentDisplayOptions
+   *
+   * @return Highcharts object to be used by highcharts javascripts visualization framework
+   */
+  private function charts_highcharts_render_charts($options, $categories = [], $seriesData = [], $attachmentDisplayOptions = []) {
+
+    $chart = new ChartType();
+    $chart->setType($options['type']);
+    $chartTitle = new ChartTitle();
+    $chartTitle->setText($options['title']);
+    $chartXaxis = new Xaxis();
+    $chartLabels = new ChartLabel();
+    $chartLabels->setRotation($options['xaxis_labels_rotation']);
+    $chartXaxis->setCategories($categories);
+    $chartTitle->setText($options['title']);
+    $chartXaxis->setTitle($chartTitle);
+    $chartXaxis->setLabels($chartLabels);
+    $yaxisLabels = new YaxisLabel();
+    $chartYaxis = new Yaxis();
+    $yAxes = [];
+    $yAxisTitle = new YaxisTitle();
+    $yAxisTitle->setText($options['yaxis_title']);
+    if (!empty($options['yaxis_min'])) {
+      $chartYaxis->min = $options['yaxis_min'];
+    }
+    if (!empty($options['yaxis_max'])) {
+      $chartYaxis->max = $options['yaxis_max'];
+    }
+
+    $chartYaxis->setLabels($yaxisLabels);
+    $chartYaxis->setTitle($yAxisTitle);
+    array_push($yAxes, $chartYaxis);
+    // Chart libraries tend to supports only one secondary axis.
+    if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0) {
+      $chartYaxisSecondary = new Yaxis();
+      $yAxisTitleSecondary = new YaxisTitle();
+      $yAxisTitleSecondary->setText($attachmentDisplayOptions[0]['style']['options']['yaxis_title']);
+      $chartYaxisSecondary->setTitle($yAxisTitleSecondary);
+      $chartYaxisSecondary->setLabels($yaxisLabels);
+      $chartYaxisSecondary->opposite = 'true';
+
+      if (!empty($attachmentDisplayOptions[0]['style']['options']['yaxis_min'])) {
+        $chartYaxisSecondary->min = $attachmentDisplayOptions[0]['style']['options']['yaxis_min'];
+      }
+      if (!empty($attachmentDisplayOptions[0]['style']['options']['yaxis_max'])) {
+        $chartYaxisSecondary->max = $attachmentDisplayOptions[0]['style']['options']['yaxis_max'];
+      }
+      array_push($yAxes, $chartYaxisSecondary);
+    }
+    $dataLabelStatus = new DataLabelStatus();
+    $dataLabels = new DataLabels();
+    $dataLabels->setDataLabels($dataLabelStatus);
+    $barPlotOptns = new PlotOptions();
+    $barPlotOptns->setBar($dataLabels);
+    $chartTooltip = new Tooltip();
+    $chartCredits = new ChartCredits();
+    $chartLegend = new ChartLegend();
+
+    $highchart = new Highcharts();
+    $highchart->setChart($chart);
+    $highchart->setTitle($chartTitle);
+    $highchart->setXAxis($chartXaxis);
+    //$highchart->setYAxis($chartYaxis);
+    $highchart->yAxis = $yAxes;
+    $highchart->setTooltip($chartTooltip);
+    $highchart->setPlotOptions($barPlotOptns);
+    $highchart->setCredits($chartCredits);
+    $highchart->setLegend($chartLegend);
+    $highchart->setSeries($seriesData);
+
+    return $highchart;
+  }
+}

modules/charts_highcharts/src/Settings/Highcharts/ChartLabel.php

@@ -16,7 +16,7 @@ class ChartLabel implements \JsonSerializable {
    * @param mixed $rotation
    */
   public function setRotation($rotation) {
-    $this->rotation = (int) $rotation;
+    $this->rotation = (int)$rotation;
   }
 
   /**

modules/charts_highcharts/src/Settings/Highcharts/Highcharts.php

@@ -6,7 +6,7 @@ class Highcharts implements \JsonSerializable {
   private $chart;
   private $title;
   private $xAxis;
- // private $yAxis;
+  // private $yAxis;
   private $tooltip;
   private $plotOptions;
   private $legend;
@@ -64,9 +64,9 @@ class Highcharts implements \JsonSerializable {
   /**
    * @param mixed $yAxis
    */
- /* public function setYAxis($yAxis) {
-    $this->yAxis = $yAxis;
-  }*/
+  /* public function setYAxis($yAxis) {
+     $this->yAxis = $yAxis;
+   }*/
 
   /**
    * @return mixed