Chart

Introduction

The Chart Report Element allows you to visualize data from form data stores or custom SQL queries in various chart formats. This element is part of Joget's extensible Report Element architecture, providing users with various chart options to represent data graphically within their custom reports.

Get started

How to use it

To use the Chart Report Element:

1. In your report designer, find the Chart element in the palette.
2. Drag and drop it onto the report canvas.

Configure Chart properties

Once the Chart element is added, you can configure its properties to customize the data representation.

Edit Chart

Fields to configure:

• Chart Type: Select the type of chart you want to display:

  • Area Chart
  • Bar Chart
  • Bubble Chart
  • Candlestick Chart
  • Donut Chart
  • Open High Low Close Chart (OHLC Chart)
  • Pie Chart
  • XY Chart
• Chart Title: Enter the title to be displayed on the chart.

• Data Store: Select a data store to retrieve data from, such as a form data store or a custom SQL query. See See List Data Store for available data store to use.

Data store & Chart data mapping

Fields to configure:

• Order By: Choose the column to sort in the graph dataset, affecting how the graph is plotted.
• Order:
  
  • ASC
  • DESC
• X-axis Value: Define the label for the X-axis.
• Y-axis Values: Define the dataset for the Y-axis.
• Date Data Format: Specify the date format for date value data retrieved from the data store.

Chart options

Fields to configure:

• X-axis Label: Enter the label for the X-axis.
• X-axis display as:
  • Category
  • Number
  • Date
• Y-axis Label: Enter the label for the Y-axis.
• Y-axis Prefix: Enter a prefix to display before the Y-axis values.
• Show Legend?: Check this option if you want the legend to show in the chart.
• Width (px): Specify the width of the chart.
  
  Example
  640px
• Height (px): Specify the height of the chart.
  
  Example
  480px
• Colors: Define custom colors for the chart series by entering comma-separated values (CSV) of color codes. Optional field.
  
  Example
  #3333FF,#66FF00,#FF9933,#990000
  
  Example
  red,orange,yellow,green,blue,indigo
  
  
  What are the default colors?
  http://stackoverflow.com/questions/18332440/what-are-the-jqplot-default-series-colors
• Alignment: Choose the alignment of the chart:
  • Left
  • Center
  • Right
• Margin Bottom: Set the bottom margin of the chart.
  
  Example
  10px