Skip to content
Snippets Groups Projects
Commit 186fbeee authored by Daniel Cothran's avatar Daniel Cothran
Browse files

make it so that multiple charts can exist together on the same page

parent 8d7c6bb1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 71 additions and 89 deletions
charts.module
+ 9
− 3
View file @ 186fbeee
......@@ -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.
}
}
charts.theme.inc deleted 100644 → 0
+ 0
− 38
View file @ 8d7c6bb1
<?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
modules/charts_c3/charts_c3.module
+ 5
− 3
View file @ 186fbeee
<?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);
......
modules/charts_c3/js/charts_c3.js
+ 8
− 5
View file @ 186fbeee
......@@ -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));
}
});
});
}
};
......
modules/charts_c3/src/Settings/CThree/CThree.php
+ 9
− 2
View file @ 186fbeee
......@@ -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
*/
......
modules/charts_google/charts_google.libraries.yml
+ 1
− 0
View file @ 186fbeee
......@@ -6,6 +6,7 @@ charts_google:
- core/jquery
- core/jquery.once
- core/drupal
- core/drupalSettings
google:
remote: https://www.gstatic.com/charts/loader.js
......
modules/charts_google/js/charts_google.js
+ 38
− 36
View file @ 186fbeee
......@@ -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));
templates/views-view-charts.html.twig
+ 1
− 2
View file @ 186fbeee
......@@ -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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment