Chart data sorting

  • Last update:December 14, 2020
  • I. Overview

    1.1 Problem

    If the chart data is fetched through sql statement, it can be sorted directly in sql. But if you use other methods to get the data, and you want to sort the chart by numerical value, how to do that?

    11.gif


    1.2 Solution

    After obtaining the chart object to be sorted through vanchart.sortChart(sortType) , you can set the chart sorting method. 

    Note:

    • Parameter sortType defines the sort type, and is optional. Values are 1 or -1. Where it is 1 means ascending order, -1 means descending order.

    • If you do not write sortType parameters, the chart will be switched to the opposite sort sequence based on the current sequence.

    • This method does not support mobile terminals.    

    II. Example

    2.1 Report design

    Add a chart and bind the data source to it.

    image.png


    2.2 Add click event

    Place a button above the chart and add a click event to it.

    image (1).png

    Add following JS; For example, sort in ascending order:

    var chart = FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0]; //Get the first chart tab of the chart0 component, which is the default chart
    chart.sortChart(1); //Set sorting type


    2.3 Preview effect

    Click save and preview. You can see that the chart series values are sorted in ascending order after clicking the button:

    11.gif

    III. Download template

    Attachment List


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

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    9s后關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy