Basic Integration with ApexCharts
Supports chart rendering using line or bar charts.

Plugin Configuration Information is Split into Two Tabs: Data and Options

Tab: Data

• Connections: Defines which database will be used (Brixy lists);
• Lists: Data for a chart is retrieved from an existing Brixy list. The list may include related tables;
• Element for X axis / Element for Y axis: Choose which elements will be used for the X and Y coordinates of the chart;
• Element where / Where value: You can optionally choose an element for a WHERE condition and enter a corresponding value. This value is optional and can also be passed via Ajax from another page element.

Query example without WHERE condition:

$sql = "SELECT el_val_x as x, el_val_y as y FROM TABLE_NAME";

Query example with WHERE condition:

$sql = "SELECT el_val_x as x, el_val_y as y FROM TABLE_NAME Where el_where = 10";

⚠️ The result set is automatically limited to 1000 rows to prevent performance issues. This applies per chart. If you use multiple charts, it's recommended to keep the total row count below 1000;

• Name: The name of the chart that will be drawn based on the selected elements.

Tab: Options

• Charts Label: General label for the chart set.
  Example: Gold price changes over the years.
• Draw Wrapper Class: Optional. Useful for targeting a specific chart dashboard with Ajax-based filtering when you have multiple dashboards on a single page.
• Draw Onload: Determines whether the charts should render automatically on page load.
  If you plan to pass filtering values dynamically (e.g., dropdown selection), you may want to disable auto-drawing initially.
• Draw Type: Defines the chart type: line or bar.
• X Axis Draw Type: Select the correct data type for the X axis: date or number to ensure proper rendering.

On a single dashboard, you can display charts based on different lists.
The only requirement is that the X and Y coordinates must have matching value types - e.g., all dates or all numbers.

Example

You have a table with the following data columns:
Product, Price, Date (YYYY-MM-DD)

• First Chart:
  • X: Date
  • Y: Price
  • WHERE Element: Product
  • WHERE Value: "Gold"
  • Name: Gold Price
• Second Chart:
  • X: Date
  • Y: Price
  • WHERE Element: Product
  • WHERE Value: "Silver"
  • Name: Silver Price

The dashboard will display two charts showing the price change over time for both products.

Chart Display

Currently, charts can only be rendered using the content plugin.

Example PHP code to render a chart:

<?php
	$dt = [
		'view_mode' => 'visualization',
		'row_id' 	=> 2, //Brixy Visualizations ID
	];
	echo content_system_plugin($dt);
?>

Example JavaScript: Dynamic Filtering via Dropdown

$(document).on('change', '#SELECT_EL_ID', function(){
	const where_value = this.value;
	const chart_wrapper_id = $(this).closest('.brixy_list_wrapper').find('.YOUR_DRAW_WRAPPER_CLASS').attr('id');
	$('#' + chart_wrapper_id + '_trigger_value').val(where_value).trigger('change');
});

This allows you to dynamically filter the chart based on dropdown selection.