How to configure a chart in vFlow?

vFlow
, ,
1

To configure a chart in vFlow?

Firstly, The chart components includethe area, bar, horizontal bar, combination, line, pie, and scatter. Echart library integrated in the system. “Examples - Apache ECharts”
Steps to configure:

  1. Go to the component section, Select ‘Chart’ from the list of component available.
  2. Add chart named ‘Dashboard_chart’. Enter the desired details and add the data source for your chart data.
  3. Click Additional properties, Thus, you need to select the:
  • Type of the chart - Pie
  • Title - Data details
  • Alignment
  • Label color
  1. In Add data source, you need to select the data source as ‘Mock’ and provide the data path in JSON format.
  2. After you click Submit, go to the Element section and select the element.
  3. Add elements and provide the details:
  • Name - Accounts details
  • Type - CHART (prefilled)
  • Add rest of the desired UI properties.
  • In additional properties: Keep data source as ‘Object’ along with the data path.
  1. You can have multiple elements within one component.
  2. Click Submit to add the element and the chart component.

Sample JSON:

{“title”:{“text”:“Data Details”,“subtext”:“Data”,“left”:“center”},“tooltip”:{“trigger”:“item”},“legend”:{“orient”:“vertical”,“left”:“left”},“series”:[{“name”:“Access From”,“type”:“pie”,“radius”:“40%”,“data”:[{“value”:250,“name”:“Pending leads”},{“value”:750,“name”:“Submitted leads”}]}]}
2

Firstly, The chart components includethe area, bar, horizontal bar, combination, line, pie, and scatter. Echart library integrated in the system. “Examples - Apache ECharts”
Steps to configure:

  1. Go to the component section, Select ‘Chart’ from the list of component available.
  2. Add chart named ‘Dashboard_chart’. Enter the desired details and add the data source for your chart data.
  3. Click Additional properties, Thus, you need to select the:
  • Type of the chart - Pie
  • Title - Data details
  • Alignment
  • Label color
  1. In Add data source, you need to select the data source as ‘Mock’ and provide the data path in JSON format.
  2. After you click Submit, go to the Element section and select the element.
  3. Add elements and provide the details:
  • Name - Accounts details
  • Type - CHART (prefilled)
  • Add rest of the desired UI properties.
  • In additional properties: Keep data source as ‘Object’ along with the data path.

  1. You can have multiple elements within one component.

  2. Click Submit to add the element and the chart component.

Sample JSON:

{“title”:{“text”:“Data Details”,“subtext”:“Data”,“left”:“center”},“tooltip”:{“trigger”:“item”},“legend”:{“orient”:“vertical”,“left”:“left”},“series”:[{“name”:“Access From”,“type”:“pie”,“radius”:“40%”,“data”:[{“value”:250,“name”:“Pending leads”},{“value”:750,“name”:“Submitted leads”}]}]}