Successfully!

Error!

JS Refresh Data the Chart of a Dashboard

  • Last update:  2020-12-16
  • I. Overview

    The data in the pie chart is linked with those in the report block, so you can modify the data in the report block by clicking one piece in the pie chart

    The data presented in the bar diagram is linked with that in the report block, but when the data in the report block are  modified, the data in the pie chart will not be automatically refreshed. How to realize the automatic refresh?

    We seek to modify the data in the report block by clicking the blocks of the pie chart and realize the automatic refresh of the data in the bar diagram, as shown below:

    II. Solution

    Set a delay between the modification of the data in the report block and the refresh of the data in the chart.

    Get the chart object:

    var c=FR.Chart.WebUtils.getChart("chart1");

    The data in the chart are refreshed:

    c.dataRefresh();

    Create a delay function:

    setTimeout(function() { }, 500);

     

    III. Steps

    3.1 Design the report

    The report is designed as follows:

     


    3.2 Modify the settings of charts/diagrams

    The pie chart is set as follows:

     

    The bar diagram is set as follows:

     


    3.3 Add hyperlinks

    1) Click chart0, select [Special Effect]>[Interaction], and add [Current Form Object]:

     

    2) Configure the following settings: [Form Object: report0], [Parameter: area], and [Value: SERIES]. By such settings, the pie chart will be in linkage with the report block.

    3) Add JavaScript to chart0, as shown below:

    Input the JS code:

    setTimeout(function() {
        var c = FR.Chart.WebUtils.getChart("chart1");
        c.dataRefresh();
    }, 500); 

    3.4 Preview

    IV. Download the template

    Attachment List


    Theme: Dashboard
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback