class Chartjs in Charts 8.3
Define a concrete class for a Chart.
Plugin annotation
@Chart(
id = "chartjs",
name = @Translation("Chart.js")
)
Hierarchy
- class \Drupal\Component\Plugin\PluginBase implements DerivativeInspectionInterface, PluginInspectionInterface
- class \Drupal\charts\Plugin\chart\AbstractChart implements ChartInterface, ContainerFactoryPluginInterface uses StringTranslationTrait
- class \Drupal\charts_chartjs\Plugin\chart\Chartjs
- class \Drupal\charts\Plugin\chart\AbstractChart implements ChartInterface, ContainerFactoryPluginInterface uses StringTranslationTrait
Expanded class hierarchy of Chartjs
File
- modules/
charts_chartjs/ src/ Plugin/ chart/ Chartjs.php, line 22
Namespace
Drupal\charts_chartjs\Plugin\chartView source
class Chartjs extends AbstractChart {
/**
* Outputs a type that can be used by Chart.js.
*
* @param array $options
* Options.
*
* @return string $type
* Type.
*
*/
protected function buildChartType($options) {
switch ($options['type']) {
case 'bar':
$type = 'horizontalBar';
break;
case 'column':
$type = 'bar';
break;
case 'spline':
$type = 'line';
break;
case 'donut':
$type = 'doughnut';
break;
case 'area':
$type = 'line';
break;
case 'gauge':
$type = 'linearGauge';
break;
default:
$type = $options['type'];
break;
}
if (isset($options['polar']) && $options['polar'] == 1) {
$type = 'radar';
}
// May need to handle attachment type.
// @todo: need to handle gauge (https://github.com/scottmcculloch/Chart.LinearGauge.js) and scatter.
return $type;
}
/**
* Build the scale color ranges.
*
* @param array $options
* Options.
*
* @return array $scaleColorRanges
* Scale color ranges.
*/
protected function buildGaugeOptions(array $options) {
$scaleColorRanges = [];
$scaleColorRanges[0] = new \stdClass();
$scaleColorRanges[1] = new \stdClass();
$scaleColorRanges[2] = new \stdClass();
// Red.
$scaleColorRanges[0]->start = isset($options['red_from']) ? $options['red_from'] : '';
$scaleColorRanges[0]->end = isset($options['red_to']) ? $options['red_to'] : '';
$scaleColorRanges[0]->color = '#ff000c';
// Yellow.
$scaleColorRanges[1]->start = isset($options['yellow_from']) ? $options['yellow_from'] : '';
$scaleColorRanges[1]->end = isset($options['yellow_to']) ? $options['yellow_to'] : '';
$scaleColorRanges[1]->color = '#ffff00';
// Green.
$scaleColorRanges[2]->start = isset($options['green_from']) ? $options['green_from'] : '';
$scaleColorRanges[2]->end = isset($options['green_to']) ? $options['green_to'] : '';
$scaleColorRanges[2]->color = '#008000';
return $scaleColorRanges;
}
/**
* Build the options.
*
* @param array $options
* Options.
*
* @return \Drupal\charts_chartjs\Settings\Chartjs\ChartjsOptions
*/
protected function buildOptions(array $options) {
$chartjsOptions = new ChartjsOptions();
$chartjsScales = new ChartjsScales();
$chartjsStacking = new ChartjsStacking();
$ticks = new ChartjsTicks();
$tickOptions = new ChartjsTickConfigurationOptions();
// Determines if chart is stacked.
if (!empty($options['grouping']) && $options['grouping'] == TRUE) {
$grouping = TRUE;
}
else {
$grouping = FALSE;
}
$chartjsStacking
->setStacking($grouping);
$chartjsScales
->setXAxes([
$chartjsStacking,
]);
$ticks
->setTicks($tickOptions);
$ticks
->setStacked($grouping);
$chartjsScales
->setYAxes([
$ticks,
]);
$chartjsOptions
->setScales($chartjsScales);
$tooltip = new \stdClass();
if ($options['tooltips'] == 'TRUE') {
$tooltip->enabled = TRUE;
}
else {
$tooltip->enabled = FALSE;
}
$chartjsOptions
->setTooltips($tooltip);
// Set Legend.
$chartjsOptions
->setLegend($this
->buildLegend($options));
// Set Title.
$chartjsOptions
->setTitle($this
->buildTitle($options));
return $chartjsOptions;
}
/**
* @param $options
*
* @return \stdClass
*/
protected function buildLegend($options) {
$legend = new \stdClass();
if (isset($options['legend']) && !empty($options['legend_position']) && $options['legend'] == TRUE) {
$legend->display = TRUE;
$legend->position = $options['legend_position'];
}
else {
$legend->display = FALSE;
}
return $legend;
}
/**
* @param $options
*
* @return \stdClass
*/
protected function buildTitle($options) {
$title = new \stdClass();
if (!empty($options['title_position']) && !empty($options['title'])) {
$title->display = TRUE;
$title->position = $options['title_position'];
$title->text = $options['title'];
}
else {
$title->display = FALSE;
}
return $title;
}
/**
* Creates a JSON Object formatted for C3 Charts JavaScript to use.
*
* @param array $options
* Options.
* @param array $categories
* Categories.
* @param array $seriesData
* Series data.
* @param array $attachmentDisplayOptions
* Attachment display options.
* @param array $variables
* Variables.
* @param string $chartId
* Chart ID.
* @param array $customOptions
* Overrides.
*/
public function buildVariables(array $options, array $categories = [], array $seriesData = [], array $attachmentDisplayOptions = [], array &$variables, $chartId, array $customOptions = []) {
// Create new instance of Chart.js.
$chartjs = new ChartjsChart();
$chartjsData = new ChartjsData();
// Useful variables for loops.
$seriesCount = count($seriesData);
$attachmentCount = count($attachmentDisplayOptions);
$noAttachmentDisplays = $attachmentCount === 0;
// Set the chart type.
$chartjs
->setType($this
->buildChartType($options));
// Set the chart labels.
$chartjsData
->setLabels($categories);
// Populate the data object.
$dataset = [];
for ($i = 0; $i < $seriesCount; $i++) {
$dataset[$i] = new \stdClass();
$dataset[$i]->label = $seriesData[$i]['name'];
$dataset[$i]->data = $seriesData[$i]['data'];
$dataset[$i]->backgroundColor = $seriesData[$i]['color'];
// Type is needed here for mixed charts.
$dataset[$i]->type = $this
->buildChartType($seriesData[$i]);
if ($seriesData[$i]['type'] == 'area') {
$dataset[$i]->fill = 'origin';
}
else {
$dataset[$i]->fill = FALSE;
}
if (!empty($options['polar']) && $options['polar'] == 1) {
$dataset[$i]->borderColor = $seriesData[$i]['color'];
$dataset[$i]->type = 'radar';
}
if ($dataset[$i]->type == 'linearGauge') {
$dataset[$i]->offset = ($i + 1) * 10;
}
if ($dataset[$i]->type == 'scatter') {
$data = $dataset[$i]->data;
$scatterDataSet = [];
for ($i = 0; $i < count($data); $i++) {
$scatterData = new \stdClass();
$scatterData->x = $data[$i][0];
$scatterData->y = $data[$i][1];
array_push($scatterDataSet, $scatterData);
}
$dataset[0]->data = $scatterDataSet;
}
}
$chartjsData
->setDatasets($dataset);
$chartjs
->setData($chartjsData);
// Set Gauge settings
if ($options['type'] == 'gauge') {
$chartjs
->setScaleColorRanges($this
->buildGaugeOptions($options));
$range = [];
// $range->startValue = $options['min'].
// $range->endValue = $options['max'].
$range['startValue'] = 1;
$range['endValue'] = 1000;
$chartjs
->setRange($range);
}
$chartjs
->setOptions($this
->buildOptions($options));
/*
* Override Chart.js classes. These will only override what is in
* charts_chartjs/src/Settings/Chartjs/ChartjsChart.php
* but you can use more of the Chart.js API, as you are not constrained
* to what is in this class. See:
* charts_chartjs/src/Plugin/override/ChartjsOverrides.php
*/
foreach ($customOptions as $option => $key) {
$setter = 'set' . ucfirst($option);
if (method_exists($chartjs, $setter)) {
$chartjs
->{$setter}($customOptions[$option]);
}
}
$variables['chart_type'] = 'chartjs';
$variables['content_attributes']['data-chart'][] = json_encode($chartjs);
$variables['attributes']['id'][0] = $chartId;
$variables['attributes']['class'][] = 'charts-chartjs';
}
}
Members
Name | Modifiers | Type | Description | Overrides |
---|---|---|---|---|
AbstractChart:: |
public static | function |
Creates an instance of the plugin. Overrides ContainerFactoryPluginInterface:: |
|
AbstractChart:: |
public | function |
Get Chart Name. Overrides ChartInterface:: |
|
Chartjs:: |
protected | function | Outputs a type that can be used by Chart.js. | |
Chartjs:: |
protected | function | Build the scale color ranges. | |
Chartjs:: |
protected | function | ||
Chartjs:: |
protected | function | Build the options. | |
Chartjs:: |
protected | function | ||
Chartjs:: |
public | function |
Creates a JSON Object formatted for C3 Charts JavaScript to use. Overrides ChartInterface:: |
|
PluginBase:: |
protected | property | Configuration information passed into the plugin. | 1 |
PluginBase:: |
protected | property | The plugin implementation definition. | 1 |
PluginBase:: |
protected | property | The plugin_id. | |
PluginBase:: |
constant | A string which is used to separate base plugin IDs from the derivative ID. | ||
PluginBase:: |
public | function |
Gets the base_plugin_id of the plugin instance. Overrides DerivativeInspectionInterface:: |
|
PluginBase:: |
public | function |
Gets the derivative_id of the plugin instance. Overrides DerivativeInspectionInterface:: |
|
PluginBase:: |
public | function |
Gets the definition of the plugin implementation. Overrides PluginInspectionInterface:: |
3 |
PluginBase:: |
public | function |
Gets the plugin_id of the plugin instance. Overrides PluginInspectionInterface:: |
|
PluginBase:: |
public | function | Determines if the plugin is configurable. | |
PluginBase:: |
public | function | Constructs a \Drupal\Component\Plugin\PluginBase object. | 92 |
StringTranslationTrait:: |
protected | property | The string translation service. | 1 |
StringTranslationTrait:: |
protected | function | Formats a string containing a count of items. | |
StringTranslationTrait:: |
protected | function | Returns the number of plurals supported by a given language. | |
StringTranslationTrait:: |
protected | function | Gets the string translation service. | |
StringTranslationTrait:: |
public | function | Sets the string translation service to use. | 2 |
StringTranslationTrait:: |
protected | function | Translates a string to the current language or to a given language. |