From 186fbeee5d891ce07ff689fbe8e7c3c3b38a6936 Mon Sep 17 00:00:00 2001
From: Daniel Cothran <dcothran@jsi.local>
Date: Fri, 10 Mar 2017 18:19:49 -0500
Subject: [PATCH] make it so that multiple charts can exist together on the
same page
---
charts.module | 12 ++-
charts.theme.inc | 38 ----------
modules/charts_c3/charts_c3.module | 8 +-
modules/charts_c3/js/charts_c3.js | 13 ++--
.../charts_c3/src/Settings/CThree/CThree.php | 11 ++-
.../charts_google/charts_google.libraries.yml | 1 +
modules/charts_google/js/charts_google.js | 74 ++++++++++---------
templates/views-view-charts.html.twig | 3 +-
8 files changed, 71 insertions(+), 89 deletions(-)
delete mode 100644 charts.theme.inc
diff --git a/charts.module b/charts.module
index b96b8ed..cfe52ec 100644
--- a/charts.module
+++ b/charts.module
@@ -33,7 +33,9 @@ function template_preprocess_views_view_charts(&$variables) {
$attachmentView = $service->getAttachmentViews();
$view = $variables['view'];
-
+ $viewId = $view->id();
+ $displayId = $view->display_handler->display['id'];
+ $chartId = $viewId . '__' . $displayId;
$categoriesAttachment = array();
$seriesDataAttachment = array();
@@ -79,7 +81,8 @@ function template_preprocess_views_view_charts(&$variables) {
$googleOptions = charts_google_create_charts_options($options, $seriesData);
$googleChartType = charts_google_create_chart_type($options);
$variables['chart_type'] = 'google';
- $variables['attributes']['class'][0] = 'chart-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);
@@ -90,18 +93,21 @@ function template_preprocess_views_view_charts(&$variables) {
$highchart = charts_highcharts_render_charts($options, $categories, $seriesData);
$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':
- $c3 = charts_c3_render_charts($options, $categories, $seriesData);
+ $c3 = charts_c3_render_charts($options, $categories, $seriesData, $chartId);
$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.
}
+
}
diff --git a/charts.theme.inc b/charts.theme.inc
deleted file mode 100644
index 8327b55..0000000
--- a/charts.theme.inc
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-/**
- * @file
- * Theme for Charts views.
- * @param $page
- */
-
-/**
- * Hook attaches assests to pages depending on library selected
- *
- * @param $attachments
- */
-/*function charts_page_attachments(&$attachments)
-{
- $service = \Drupal::service('charts.charts_service');
- $library = $service->getLibrarySelected();
- /*Depending on the library selected, javescript files associated to the selected library will only be attached to
- the template.*/
-
-/* switch($library){
- case 'google':
- $attachments['#attached']['library'][] = 'charts_google/charts_google';
- $attachments['#attached']['library'][] = 'charts_google/google';
- break;
- case 'highcharts':
- $attachments['#attached']['library'][] = 'charts_highcharts/charts_highcharts';
- $attachments['#attached']['library'][] = 'charts_highcharts/highcharts';
- break;
- case 'c3':
- $attachments['#attached']['library'][] = 'charts_c3/charts_c3';
- $attachments['#attached']['library'][] = 'charts_c3/c3';
- break;
-
- default:
-
- }
-}*/
\ No newline at end of file
diff --git a/modules/charts_c3/charts_c3.module b/modules/charts_c3/charts_c3.module
index fe3d703..9f3ce57 100644
--- a/modules/charts_c3/charts_c3.module
+++ b/modules/charts_c3/charts_c3.module
@@ -1,8 +1,10 @@
<?php
+
/**
* @file
* 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;
@@ -21,7 +23,7 @@ function charts_c3_charts_info() {
return $info;
}
-function charts_c3_render_charts($options, $categories = array(), $seriesData = array()) {
+function charts_c3_render_charts($options, $categories = array(), $seriesData = array(), $chartId) {
$c3Data = array();
for ($i = 0; $i < count($seriesData); $i++) {
@@ -35,9 +37,9 @@ function charts_c3_render_charts($options, $categories = array(), $seriesData =
$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);
diff --git a/modules/charts_c3/js/charts_c3.js b/modules/charts_c3/js/charts_c3.js
index 0830593..1809538 100644
--- a/modules/charts_c3/js/charts_c3.js
+++ b/modules/charts_c3/js/charts_c3.js
@@ -8,11 +8,14 @@
Drupal.behaviors.chartsC3 = {
attach: function (context, settings) {
- $('.charts-c3').once().each(function () {
- if ($(this).attr('data-chart')) {
- var c3Chart = $('.charts-c3').attr('data-chart');
- c3.generate(JSON.parse(c3Chart));
- }
+ $('.charts-c3').each(function(param) {
+ var chartId = $(this).attr('id');
+ $('#'+chartId).once().each(function () {
+ if ($(this).attr('data-chart')) {
+ var c3Chart = $(this).attr('data-chart');
+ c3.generate(JSON.parse(c3Chart));
+ }
+ });
});
}
};
diff --git a/modules/charts_c3/src/Settings/CThree/CThree.php b/modules/charts_c3/src/Settings/CThree/CThree.php
index d2e7388..c98a878 100644
--- a/modules/charts_c3/src/Settings/CThree/CThree.php
+++ b/modules/charts_c3/src/Settings/CThree/CThree.php
@@ -4,7 +4,7 @@ namespace Drupal\charts_c3\Settings\CThree;
class CThree implements \JsonSerializable {
private $color;
- private $bindto = '#chart';
+ private $bindto;
private $data;
private $axis;
private $title;
@@ -54,10 +54,17 @@ class CThree implements \JsonSerializable {
/**
* @return string
*/
- public function getBindto() {
+ public function getBindTo() {
return $this->bindto;
}
+ /**
+ * @param mixed $bindto
+ */
+ public function setBindTo($bindto) {
+ $this->bindto = $bindto;
+ }
+
/**
* @return mixed
*/
diff --git a/modules/charts_google/charts_google.libraries.yml b/modules/charts_google/charts_google.libraries.yml
index 72090a0..19ebf46 100644
--- a/modules/charts_google/charts_google.libraries.yml
+++ b/modules/charts_google/charts_google.libraries.yml
@@ -6,6 +6,7 @@ charts_google:
- core/jquery
- core/jquery.once
- core/drupal
+ - core/drupalSettings
google:
remote: https://www.gstatic.com/charts/loader.js
diff --git a/modules/charts_google/js/charts_google.js b/modules/charts_google/js/charts_google.js
index b381ffe..1822e70 100644
--- a/modules/charts_google/js/charts_google.js
+++ b/modules/charts_google/js/charts_google.js
@@ -9,46 +9,48 @@
attach: function (context, settings) {
google.charts.load('current', {packages: ['corechart']});
- var dataTable;
- var googleChartOptions;
- var googleChartType;
+ $('.charts-google').each(function(param) {
+ var chartId = $(this).attr('id');
+ $('#'+chartId).once().each(function () {
+ if ($(this).attr('data-chart')) {
+ var dataTable = $(this).attr('data-chart');
+ var googleChartOptions = $(this).attr('google-options');
+ var googleChartType = $(this).attr('google-chart-type');
+ google.charts.setOnLoadCallback(draw(googleChartType, dataTable, googleChartOptions));
+ }
+ });
+ function draw(chartType, dataTable,googleChartOptions) {
- $('.chart-google').once().each(function () {
- if ($(this).attr('data-chart')) {
- dataTable = $(this).attr('data-chart');
- googleChartOptions = $(this).attr('google-options');
- googleChartType = $(this).attr('google-chart-type');
- google.charts.setOnLoadCallback(drawChart);
- }
+ return function () {
+ var data = google.visualization.arrayToDataTable(JSON.parse(dataTable));
+ var googleChartTypeObject = JSON.parse(chartType);
+ var googleChartTypeFormatted = googleChartTypeObject.type;
+ var chart;
+ switch (googleChartTypeFormatted) {
+ case 'BarChart':
+ chart = new google.visualization.BarChart(document.getElementById(chartId));
+ break;
+ case 'ColumnChart':
+ chart = new google.visualization.ColumnChart(document.getElementById(chartId));
+ break;
+ case 'PieChart':
+ chart = new google.visualization.PieChart(document.getElementById(chartId));
+ break;
+ case 'ScatterChart':
+ chart = new google.visualization.ScatterChart(document.getElementById(chartId));
+ break;
+ case 'AreaChart':
+ chart = new google.visualization.AreaChart(document.getElementById(chartId));
+ break;
+ case 'LineChart':
+ chart = new google.visualization.LineChart(document.getElementById(chartId));
+ }
+ chart.draw(data, JSON.parse(googleChartOptions));
+ }
+ }
});
- function drawChart() {
- var data = google.visualization.arrayToDataTable(JSON.parse(dataTable));
- var googleChartTypeObject = JSON.parse(googleChartType);
- var googleChartTypeFormatted = googleChartTypeObject.type;
- var chart;
- switch (googleChartTypeFormatted) {
- case 'BarChart':
- chart = new google.visualization.BarChart(document.getElementById('chart'));
- break;
- case 'ColumnChart':
- chart = new google.visualization.ColumnChart(document.getElementById('chart'));
- break;
- case 'PieChart':
- chart = new google.visualization.PieChart(document.getElementById('chart'));
- break;
- case 'ScatterChart':
- chart = new google.visualization.ScatterChart(document.getElementById('chart'));
- break;
- case 'AreaChart':
- chart = new google.visualization.AreaChart(document.getElementById('chart'));
- break;
- case 'LineChart':
- chart = new google.visualization.LineChart(document.getElementById('chart'));
- }
- chart.draw(data, JSON.parse(googleChartOptions));
- }
}
};
}(jQuery));
diff --git a/templates/views-view-charts.html.twig b/templates/views-view-charts.html.twig
index f740559..2481122 100644
--- a/templates/views-view-charts.html.twig
+++ b/templates/views-view-charts.html.twig
@@ -11,5 +11,4 @@
{% else %}
Unconfigured charts
{% endif %}
-<div {{ attributes }} {{ content_attributes }} id="chart"
- style="width:100%; height:400px;"></div>
+<div {{ attributes }} {{ content_attributes }} style="width:100%; height:400px;"></div>
--
GitLab