Stadium
  • Home
  • Academy
  • How it works
    • Designer
    • Application Manager
    • Application users and roles
    • Designing applications
    • User API
  • Features
    • Application
    • Create a Form
    • Embedded Files
    • Events
    • Expression Editor
    • Pages
    • Preview
    • Publish
    • Scripts and Event Handlers
    • Session Variables
    • Settings
    • Styles
    • StyleSheet
    • Templates
    • Types
    • Validations Cheat Sheet
  • Connectors
    • Database Connector
    • File System Connector
    • Web Service Connector
  • Controls
    • Button
    • Chart
    • Checkbox
    • Checkbox List
    • Container
    • Data Grid
    • Date Picker
    • Drop Down
    • Flexbox
    • Grid
    • Image
    • Label
    • Link
    • Menu
    • Panel
    • Radio Button List
    • Repeater
    • Table
    • Text Box
    • Upload File
  • Actions
    • Async
    • Call Web Service
    • Decision (If/Else)
    • Display Message Box
    • Download File
    • For Each
    • Java Script
    • Navigate To Page
    • Notification
    • Set Value
    • Variable
    • While
  • Release Notes
    • 6.12.3272
    • 6.12.3270
    • 6.12.3268
    • 6.12.3264
    • 6.11.3223
    • 6.11.3221
    • 6.11.3220
    • 6.11.3218
    • 6.11.3210
    • 6.10.3155
    • 6.10.3151
    • 6.9.3102
    • 6.8.3100
    • 6.7.3096
    • 6.6.3082
    • 6.6.3081
    • 6.6.3080
    • 6.6.3075
    • 6.5.3055
    • 6.4.3036
    • 6.4.3034
    • 6.4.3033
    • 6.3.3019
    • 6.2.2999
    • 6.2.3001
    • 6.1.2990
    • 6.0.2972
    • 6.0.2970
    • 6.0.2969
Powered by GitBook
On this page
  • How to create a Stadium chart
  • How to load data from a database into your chart

Was this helpful?

  1. Controls

Chart

PreviousButtonNextCheckbox

Last updated 8 months ago

Was this helpful?

We use the eCharts charting engine to generate Stadium Charts. Go for examples of charts that can be used in Stadium.


How to create a Stadium chart

  1. Drag a Chart control onto the design canvas.

  2. In the Properties section, click on the Chart Editor icon (next to the Option field).

  3. Create your chart: Options -

    • Type the code for an eChart compliant chart in the Chart Editor.

      OR

    • Click the relevant link in the Chart Editor to generate a basic line, column or pie chart.

      OR

    • Paste the option object of a chart that you created on into the Chart Editor.

    For this option, do the following:

    1. On the eCharts examples page, click on the chart that you want to use, e.g. Basic Line Chart.

    2. Copy the chart's option object and paste it into the Stadium Chart Editor.


How to load data from a database into your chart

  1. Create your chart as per the steps above, but don't provide values for the source in the object option, i.e. source: []

  • Set the Target property to be your chart's option object

  • Set the Value property to be the same content as your chart's option object, but now include the source value to reference your SQL query (e.g. source: ~.northwind_Query1.Results)

Add a and create a SQL query to fetch your data.

Add your SQL query to the that will load your chart with data (e.g. a page load or button click).

Add a action to the event handler:

database Connector
event handler
SetValue
here
eCharts