All visualizations configs

ChartFactor Toolkit
1

Hello everyone,

I am currently building a dashboard with multiple visualizations and would like to allow users to view and modify the underlying configurations directly within the UI.

My goal is to retrieve the configuration object for each chart so that users can make adjustments and save those changes for later. Does the API provide a specific method to extract the current state/config of a visualization?

Any documentation or examples on how to implement this “edit mode” would be greatly appreciated.

2

Got it, well, you can first at all get all the visualizations you have using this:

cf. getAllVisualizations().forEach(viz => {
    // here you can take the config of each viasualization using:
    const config = viz.getCurrentAQL();
});

With that you will have the query configuration of each visualization

3

Great, but updating that config variable is enough to update the chart? or maybe, do i have to reload it somehow?

4

If you want to update the visualization config dynamically you better set the new values like this:

cf. getAllVisualizations().forEach(viz => {
    const visual = cf.getVisualization(viz. _elementId);
    let newGroup = cf.Attribute("new_group")
        .limit(10)
        .sort("desc", cf.Metric());

    visual.groupby(newGroup)
    visual.execute();
});

that way you can update the group, or if you want the metric, etc.

1 Like
5

Being able to change the query parameters is amazing, thank you, but I really need to change settings like color, bar position, and other small configurations, in real time if possible, is there a way to handle that?

6

Yes, you can use the .set() function just as you do when initially creating a visualization. liek this:

cf.getAllVisualizations().forEach(viz => {
    const visual = cf.getVisualization(viz._elementId);

    // Update the property (e.g., changing a bar chart to horizontal)
    visual.set('orientation', 'horizontal');

    // Re-render the visual without hitting the data source again
    visual.execute(false); 
});

Most properties update the chart automatically when .set() is called. However, if the chart doesn’t refresh visually, calling .execute(false) forces a re-render, passing false into the .execute() function is important here it tells the tool to update the UI without re-running the data query, which saves time and resources