Introduction #

Filters are the most common interactive components in dashboards. SmartChart auto-identifies filter components through special id naming convention (id_select__name__) and handles linkage logic.

Implementation Flow #

Standard Implementation #

Create a filter list dataset:

select xxxx as city from tablename.....
-- Generates: [['city'],[option1],[option2],..]

In the filter dataset’s JS editor:

let dataset=__dataset__;
let table ='<span>Title</span><select id="id_select__name__">';
table = table + '<option value="" selected>----</option>';
for(let i=1;i<dataset.length;i++){
  table = table + '<option>' + dataset[i][0] + '</option>';
}
table = table + '</select></div></div>'
dom__name__.innerHTML=table;

Configure Linkage #

In the target linked dataset (e.g., #0), use parameter in SQL:

select xx, xx, xx from tablename /* where xx = '$pcity' */

Go back to the filter dataset, click title, set linkage to chart #0:

Use commas to link multiple charts: 0, 2, 4

Key Naming Conventions #

__name__ is SmartChart’s magic placeholder, auto-replaced with actual dataset index on save.