Component Custom Linkage | Smartchart开发手册

Introduction #

SmartChart has built-in single-select filters, but for multi-select, checkboxes, custom HTML controls and other personalized needs, you need to write some JS code. This chapter introduces how to customize complex filter linkage effects.

Custom Linkage Development Pattern #

Step	Operation	Code
1	Generate HTML control	`dom__name__.innerHTML = ...`
2	Bind event	`$('#id_btn').unbind('click').click(...)`
3	Get control value	`$('#input_id').val()`
4	Set parameter	`ds_setParam('param_name', value)`
5	Refresh dataset	`ds_refresh(index)`

Example #

Create a new chart component, write query:

select distinct H1 as heroname from smartdemo2 limit 10

Edit the chart JS:

let dataset=__dataset__;
let table = '';
for (let i=1;i<dataset.length;i++){
    table = `${table}<label><input name="select__name__" type="checkbox" value="${dataset[i][0]}" />${dataset[i][0]}</label> `;
}
table = table + "<button id='id_select__name__'>Submit</button>";
dom__name__.innerHTML=table;

$('#id_select__name__').click(()=>{
    let res = [];
    $("input[name='select__name__']:checked").each(function(i){
        res.push("'" + $(this).val() + "'");
    });
    let H1 = res.toString();
    ds_setParam('H1',H1);
    ds_refresh(1);
})

Target linked dataset SQL:

select H1 as heroname, sum(qty) as count from smartdemo2
where 1=1
/* and H1 in ($H1) */
group by H1
order by sum(qty) desc

Tips #

If this chart might be linked by others or has auto-refresh, add unbind to prevent duplicate triggers: $('#id_select__name__').unbind('click').click(...)

To cancel linkage and restore initial state, delete the parameter: delete filter_param['H1']

Development Pattern Summary #

// 1. Generate HTML controls
dom__name__.innerHTML = /* your HTML controls */;
// 2. Bind events (use unbind to prevent duplicates)
$('#id_btn').unbind('click').click(() => {
    // 3. Read control values
    let value = $('#input_id').val();
    // 4. Set parameters
    ds_setParam('param_name', value);
    // 5. Refresh target dataset
    ds_refresh(target_index);
});