Javascript Chart

Description

Adds a Javascript Chart to the component. Javascript Charts use client-side data and can be created and viewed in an offline environment.

Contrasting Javascript Charts with the Chart Control

The Chart controls is a server-side control. The chart is rendered as a bitmap on the server and then the client-displays the bitmap image. Because the Chart control is a server-side control, it is not suited for disconnected applications. Also, since the Chart control is a server-side control, it will be slower than Javascript Charts.

To add a Javascript Chart to a UX component, select the [Javascript Chart] control in the Other Controls section of the UX toolbox.

images/toolbox_jschart.jpg

The Chart control (i.e. the server-side charting control) is available in the Data Controls section of the UX toolbox.

After you add a Javascript Chart to your UX, you can then edit the Javascript Chart properties by clicking the smart field for the Chart properties property.

images/jschartprpsheet.jpg

This will open the Javascript Chart builder, as shown below.

The top half of the screen is where you enter the Javascript code that generates the chart and the bottom half of the screen allows you to get a quick preview of the Chart.

In most cases you will get a quick start by selecting one of the Sample Charts. This will enter the Javascript for the selected chart and you can then tweak the Javascript to get the chart appearance that you want. You will likely also want to base the chart on real data, not the sample data shown in the sample chart.

images/jschartbuilder.jpg

To select a sample chart, click the Select Sample Chart button. This will open up a dialog showing the available sample charts:

images/samplecharts.jpg

Select the sample chart that you want. There are two types of charts available:

Type
Description
RGraph SVG Charts

Charts rendered using the RGraph SVG chart library.

Alpha Anywhere SVG Charts

Charts rendered using Alpha Anywhere's SVG Charting library.

When you select a sample chart, the JavaScript for creating the chart will be added to the builder. For example:

RGraph SVG Chart example
RGraph SVG Chart example

The Javascript shown in the image above is the code to create a chart using the RGraph charting library.

Configuring Javascript Charts

The type of Javascript Chart you create (RGraph SVG Chart or Alpha Anywhere SVG Chart) determines how the chart is configured, as well as the available templates.

RGraph SVG Charts

Information on creating and working with RGraph SVG Javascript Charts

Alpha Anywhere SVG Charts

Information on creating and working with Alpha Anywhere SVG Javascript Charts

Setting Javascript Chart Size to 100%

You can set the Javascript Chart width to 100% (useful when the Chart is shown in a Panel Card). However, setting the Chart's height to 100% is not supported. You must specify an explicit height for the Chart. Also, unlike many other UX controls, Javascript Charts do not have a Fill Container property.

If you set the Javascript Chart width to 100% and the Javascript Chart is contained inside a Panel Card, the Javascript Chart will automatically be resized when the device orientation is changed.

Action Javascript Javascript Chart Actions

The Javascript Chart Action in Action Javascript works with both RGraph SVG and Alpha Anywhere SVG charts and allows you to:

Action
Description
Refresh Data in Chart(s)

Allows you to refresh the data in one or more Charts. If any of the selected Charts have any properties that are set to a Data Series, this action makes an Ajax callback to the server and refreshes the data in all of the referenced Data Series.

Resize a Chart

Resizes a chart. You can specify a new height and width for the Chart using CSS syntax. e.g. '500px'. You can use percentages for the width property, but not the height property. When the Chart is redrawn at its new size, by default, it will use the same draw method that was defined in the Chart settings. For example if the Chart is set to use animation when it is rendered, the Chart's 'draw method' will be 'grow' (or one of the other animation methods supported by RGraph). You might want the Chart to render at its new size without using animation. You can override the default draw method and specify an explicit draw method. For example, if the Chart was defined to use the 'grow' method, you can specify 'draw' to redraw the Chart without using animation.

Redraw a chart

Redraws a Chart. Like the Resize a Chart action, you can override the default 'draw method' when the Chart is redrawn. Typically used when one or more properties in the Chart settings are based on Javascript functions to re-render the Chart with new settings values returned by the Javascript functions.

Set Chart Properties

Allows you to explicitly set any of the Chart's properties and then redraw the Chart. Like the Resize a Chart action, you can override the default 'draw method' when the Chart is redrawn after its properties have been set.

Methods

The following methods are available for working with Javascript charts. Methods can be used with both RGraph SVG and Alpha Anywhere SVG charts:

Building Dashboards

Javascript Charts are ideal for 'dashboard' applications. You can design a UX component with multiple Javascript Charts each of which displays data on one of the metrics your dashboard is designed to monitor.

In situations where a large number of users are connected to the dashboard, and where you want to update the dashboards frequently, you can use Alpha Anywhere's Web-sockets feature to create an efficient application. Instead of having the UX component make periodic callbacks to the server to refresh the data shown in the dashboard charts, a scheduled CRON job on the server can update data for the dashboard, then broadcast the data to all of the connected UX components.

Videos

Introduction

Javascript RGraph Charts allow you to create a variety of different chart types using Javascript. Because the charts are created client-side, using Javascript, these types of charts are ideal for disconnected applications where the Chart control cannot be used (as this control type produces charts server-side).

In this video we show how to set up a basic Javascript RGraph Charts.

2017-03-26

Binding RGraph Chart Data to a Javascript Function

The data shown in a Javascript RGraph Chart can be obtained by calling a Javascript function.

In this video show show how to bind the Chart data to a Javascript function.

Download Component

2017-03-26

Binding RGraph Chart Data to Data From a SQL Database - Using a Data Series for RGraph Chart Data

The data shown in a Javascript RGraph Chart can be obtained by querying a SQL database.

In this video show show how to bind the RGraph Chart data to data from a SQL database table by binding the Chart data to the data in a Data Series. The Data Series is populated with data from a SQL database table.

2017-03-26

Binding RGraph Chart Properties to a Javascript Function

Any property of a chart can be made dynamic by binding the property to the result of a Javascript function.

In this video we show how properties of the RGraph Chart (in addition to the Chart data) can be made dynamic.

Download Component

2017-03-26

Action Javascript Methods for Working With Javascript RGraph Charts

Action Javascript exposes several methods for working with Javascript RGraph Charts.

In this video we show how you can use Action Javascript to resize a Javascript RGraph Chart.

Download Component

2017-03-26

Setting an RGraph Chart Property Using Action Javascript vs. Binding an RGraph Chart Property to a Javascript Function

Action Javascript allows you to dynamically change properties (such as the RGraph Chart colors, or title) after the RGraph Chart has been rendered. However, you can also achieve the same result by binding the RGraph Chart properties to Javascript functions.

In this video we contrast the two methods for setting RGraph Chart properties.

Download Component

2017-03-26

Using Action Javascript to Refresh RGraph Chart Data

Action Javascript allows you to refresh the data shown in an RGraph Chart. If the RGraph Chart data is based on a Data Series, an Ajax callback to the server will be made to refresh the data in the Data Series on which the RGraph Chart depends and then the Chart will be redrawn, showing the new data.

In this video we show how Action Scripting is used to refresh the RGraph Chart data.

2017-03-26

In Depth Example - RGraph Chart Based on SQL Data

This example shows an RGraph pie chart populated from a multi-table SQL query against the sample Northwind database. The RGraph Chart is based on a custom Data Series to generate the Chart data. The user can select the country for which the RGraph Chart should be shown from a dropdownbox control.

In this video we show how this RGraph Chart is set up.

Download Component

2017-03-26

Understanding the Structure of the Javascript that Defines a Javascript RGraph Chart

The Javascript used to define a Javascript RGraph Chart has a well defined structure, described in this video.

2017-03-26

Javascript RGraph Chart Events

In this example we show a RGraph Chart with a Tooltip event. After the RGraph Chart is resized, the Tooltip events must be re-registered.

Download Component

2017-03-26

Using Alpha Anywhere Chart Library 2021 Jan 26

In this webinar, we show how to adapt an Alpha Anywhere SVG Chart Template to display a data series from an external data source.

2021-01-26

See Also