Add an example module for people wanting to understand how to use the Charts...

Add an example module for people wanting to understand how to use the Charts module without making use of Views. Also fixes small issue with X-axis title in Highcharts.

charts.module

@@ -29,6 +29,7 @@ function charts_theme($existing, $type, $theme, $path) {
 function template_preprocess_views_view_charts(&$variables) {
 
   $options = $variables['view']->style_plugin->options;
+  drupal_set_message(json_encode($options).'options');
   $attachmentDisplayOptions = [];
 
   $service = \Drupal::service('charts.charts_attachment');

charts_api_example/README.txt

+To see the example, navigate to:
+
+/charts/example/display
+
+Settings for this chart derive from the Charts module's 
+default settings, which are configured here:
+
+/admin/config/content/charts
\ No newline at end of file

charts_api_example/charts_api_example.info.yml

+name: charts_api_example
+type: module
+description: Demonstrates how to use the Charts module without Views.
+core: 8.x
+package: Examples
+dependencies:
+  - charts:charts

charts_api_example/charts_api_example.libraries.yml

+charts_api_examples:
+  version: 1.x
+  js:
+    js/charts_api_example.js: {}
\ No newline at end of file

charts_api_example/charts_api_example.module

+<?php
+
+/**
+ * @file
+ * Contains charts_api_example.module.
+ */
+
+use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\charts\Charts\ModuleSelector;
+
+/**
+ * Implements hook_help().
+ */
+function charts_api_example_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    // Main module help for the charts_api_example module.
+    case 'help.page.charts_api_example':
+      $output = '';
+      $output .= '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('A simple example on how to interact with the Charts Api') . '</p>';
+      return $output;
+
+    default:
+  }
+}
+
+/**
+ * Implements hook_theme().
+ */
+function charts_api_example_theme() {
+  $vars = array(
+    'library' => '',
+    'categories' => '',
+    'seriesData' => '',
+    'options' => '',
+    );
+  return [
+    'charts_api_example' => [
+      'template' => 'charts_api_example',
+      'variables' => $vars,
+    ],
+  ];
+}
+
+/**
+ * Implements template_preprocess_page
+ *
+ * @param $variables
+ */
+function template_preprocess_charts_api_example(&$variables){
+  $moduleSelector = new ModuleSelector($variables['library'], $variables['categories'], $variables['seriesData'], $variables['options'], [], $variables, 'xyz');
+}
\ No newline at end of file

charts_api_example/charts_api_example.routing.yml

+charts_api_example.display:
+  path: '/charts/example/display'
+  defaults:
+    _controller: '\Drupal\charts_api_example\Controller\ChartsApiExample::display'
+    _title: 'How to use the Charts API'
+  requirements:
+    _permission: 'access content'

charts_api_example/composer.json

+{
+  "name": "drupal/charts_api_example",
+  "type": "drupal-module",
+  "description": "How to interact with the Charts Api",
+  "keywords": ["Drupal"],
+  "license": "GPL-2.0+",
+  "homepage": "https://www.drupal.org/project/charts_api_example",
+  "minimum-stability": "dev",
+  "support": {
+    "issues": "https://www.drupal.org/project/issues/charts_api_example",
+    "source": "http://cgit.drupalcode.org/charts_api_example"
+  },
+  "require": { }
+}

charts_api_example/src/Controller/ChartsApiExample.php

+<?php
+
+namespace Drupal\charts_api_example\Controller;
+
+
+use Drupal\charts\Services\ChartsSettingsService;
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+class ChartsApiExample extends ControllerBase implements ContainerInjectionInterface {
+  private $chartSettings;
+
+  public function __construct(ChartsSettingsService $chartSettings) {
+    $this->chartSettings = $chartSettings->getChartsSettings();
+  }
+
+  public function display(){
+
+    $library = $this->chartSettings['library'];
+    $options = [];
+    $options['type'] = $this->chartSettings['type'];
+    $options['title'] = t('Chart title');
+    $options['yaxis_title'] = t('Y-Axis');
+    $options['yaxis_min'] = '';
+    $options['yaxis_max'] = '';
+    $options['xaxis_title'] = t('X-Axis');
+    //sample data format
+    $categories = ["Category 1","Category 2","Category 3","Category 4"];
+    $seriesData = [
+      ["name" => "Series 1", "color" => "#0d233a", "type" => null, "data" => [250, 350, 400, 200]],
+      ["name" => "Series 2", "color" => "#8bbc21", "type" => "column", "data" => [150, 450, 500, 300]],
+      ["name" => "Series 3", "color" => "#910000", "type" => "area",  "data" => [0, 0, 60, 90]]
+    ];
+
+    $element = array(
+      '#theme' => 'charts_api_example',
+      '#library' => $this->t($library),
+      '#categories' => $categories,
+      '#seriesData' => $seriesData,
+      '#options' => $options,
+    );
+    return $element;
+  }
+  public static function create(ContainerInterface $container){
+    return new static(
+      $container->get('charts.settings')
+    );
+  }
+}
\ No newline at end of file

charts_api_example/src/Tests/LoadTest.php

+<?php
+
+namespace Drupal\charts_api_example\Tests;
+
+use Drupal\Core\Url;
+use Drupal\simpletest\WebTestBase;
+
+/**
+ * Simple test to ensure that main page loads with module enabled.
+ *
+ * @group charts_api_example
+ */
+class LoadTest extends WebTestBase{
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = ['charts_api_example'];
+
+  /**
+   * A user with permission to administer site configuration.
+   *
+   * @var \Drupal\user\UserInterface
+   */
+  protected $user;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+    $this->user = $this->drupalCreateUser(['administer site configuration']);
+    $this->drupalLogin($this->user);
+  }
+
+  /**
+   * Tests that the home page loads with a 200 response.
+   */
+  public function testLoad() {
+    $this->drupalGet(Url::fromRoute('<front>'));
+    $this->assertResponse(200);
+  }
+
+}

charts_api_example/templates/charts_api_example.html.twig

+{% set library = 'charts_' ~ chart_type ~ '/' ~ chart_type %}
+{{ attach_library("#{ library }") }}
+<p>Edit charts_api_example.html.twig to delete this message. To change the
+   library used by this file, change the <a href="/admin/config/content/charts">
+        default settings
+    </a>.</p>
+<div {{ attributes }} {{ content_attributes }} style="width:100%; height:400px;"></div>

includes/charts.pages.inc

@@ -440,7 +440,7 @@ function charts_settings_form($form, $defaults = array(), $field_options = array
     '#collapsed' => TRUE,
     '#attributes' => array('class' => array('chart-xaxis')),
   );
-  $form['xaxis']['title'] = array(
+  $form['xaxis']['xaxis_title'] = array(
     '#title' => t('Custom title'),
     '#type' => 'textfield',
     '#default_value' => $options['xaxis_title'],

modules/charts_highcharts/src/Charts/HighchartsChartsRender.php

@@ -7,6 +7,7 @@ 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\XaxisTitle;
 use Drupal\charts_highcharts\Settings\Highcharts\ChartLabel;
 use Drupal\charts_highcharts\Settings\Highcharts\YaxisLabel;
 use Drupal\charts_highcharts\Settings\Highcharts\Yaxis;
@@ -46,8 +47,9 @@ class HighchartsChartsRender implements ChartsRenderInterface {
     $chartLabels = new ChartLabel();
     $chartLabels->setRotation($options['xaxis_labels_rotation']);
     $chartXaxis->setCategories($categories);
-    $chartTitle->setText($options['title']);
-    $chartXaxis->setTitle($chartTitle);
+    $xAxisTitle = new XaxisTitle();
+    $xAxisTitle->setText($options['xaxis_title']);
+    $chartXaxis->setTitle($xAxisTitle);
     $chartXaxis->setLabels($chartLabels);
     $yaxisLabels = new YaxisLabel();
     $chartYaxis = new Yaxis();

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

+<?php
+
+namespace Drupal\charts_highcharts\Settings\Highcharts;
+
+class XaxisTitle extends ChartTitle implements \JsonSerializable {
+
+  private $text;
+
+  /**
+   * @return string
+   */
+  public function getText() {
+    return $this->text;
+  }
+
+  /**
+   * @param string $text
+   */
+  public function setText($text) {
+    $this->text = $text;
+  }
+
+  /**
+   * @return array
+   */
+  public function jsonSerialize() {
+    $vars = get_object_vars($this);
+
+    return $vars;
+  }
+
+}