How to Interact

Select a chart series, then navigate the chart.

Close
Examples
  • Series
    • Area
    • Line Series
    • Scatter Series
    • Bar Series
    • Stacked Bar Series
    • Analog Gauge Series
    • Function Series
    • Pie Series
    • Doughnut Series
    • Floating Bar Series
    • Trend Series
    • Candlestick Series
    • Error Series
    • Over Under Series
    • Alarm Series
    • Step Series
    • Open High Low Close Series
  • Advanced
    • Filled Bars with Ranges
    • Static Pie Labels
    • Master Detail Charts
    • Custom Point Markers
    • Render Speed Test
Line Chart
Properties Demonstrated
  • color
  • lineWidth
  • title

This is an example of a simple line chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, auto_zoom, auto_find_point_by_x, and show_crosshairs properties. These allow for the custom title, x axis caption, and y axis caption, an auto defined zoom range, the auto selection of points by position of cursor on the x axis, and the display of the x axis crosshairs. The series title was defined as well.

How to Interact Source Code:
    Rendering Source Code...
Area Chart
Properties Demonstrated
  • color
  • lineWidth
  • title

This is an example of a simple area chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, show_options, color, and show_hints properties. These allow for the display of the custom title, x axis caption, and y axis caption, a light brown colored series, and the disabling of the hints. A custom series title is added as well.

How to Interact Source Code:
    Rendering Source Code...
Scatter Chart
Properties Demonstrated
  • pointStyle
  • pointSize

This is an example of a simple scatter chart. It demonstrates use of the custom point styles and sizes. It will contain one series with square points that are 5px by 5px.

How to Interact Source Code:
    Rendering Source Code...
Bar Chart
Properties Demonstrated
  • x_axis_formatter
  • y_axis_formatter
  • useColorArray
  • Text Labels
  • orientation
  • intervalOffset

This chart will force two decimal places when displaying point details in the hint window. It will use a custom set of colors to display each bar in and will display text X values instead of numbers.

How to Interact Source Code:
    Rendering Source Code...
Stacked Bar Chart
Properties Demonstrated
  • intervalOffset

This chart will stretch the bars horizontally to touch each other by taking up 100% of the available width.

How to Interact Source Code:
    Rendering Source Code...
Gauge Chart
Properties Demonstrated
  • needle
  • anchor
  • axis
  • label
  • ranges

The gauge chart will have the following ranges displayed by default: Yellow (70-90) and Red (90-100). It will also will have a 1px wide green needle, a 20px wide light grey anchor, and a bold blue label placed to the left of the anchor. The chart has a light blue axis with a dark blue outer border and no inner border.

How to Interact Source Code:
    Rendering Source Code...
Function Chart
Properties Demonstrated
  • title
  • x_axis_caption
  • y_axis_caption
  • zero planes
  • Series Titles

This is an example of a function chart with multiple series. The properties allow for the custom title, x and y axis captions, and custom formatted x and y zero planes. The series titles are defined as well.

How to Interact Source Code:
    Rendering Source Code...
Pie Chart
Events Demonstrated
  • onPieceNeedsColor

This chart will display custom pie piece colors when the onPieceNeedsColor event is fired.

How to Interact Source Code:
    Rendering Source Code...
Doughnut Chart
Properties Demonstrated
  • show_legend
  • title
  • opacity
  • doughnutOffset
  • position
  • height
  • width

This chart will display two doughnut series, both with differing properties.

How to Interact Source Code:
    Rendering Source Code...
Floating Bar Chart
Properties Demonstrated
  • intervalOffset

This chart has two floating series both with an intervalOffset of 1.

How to Interact Source Code:
    Rendering Source Code...
Trend Chart
Properties Demonstrated
  • Color
  • Linear
  • Power
  • Exponential
  • Logarithmic

This chart features four trends based on four different scatter series data. Use the legend to show and hide the series to get a better look.

How to Interact Source Code:
    Rendering Source Code...
Candlestick Chart
Properties Demonstrated
  • gain
  • loss

This chart will change the gain (+) points to green, and the loss (-) points to orange.

How to Interact Source Code:
    Rendering Source Code...
Error Chart
Properties Demonstrated
  • capSize
  • aveSize

This chart features an error series with altered cap and average sizes.

How to Interact Source Code:
    Rendering Source Code...
Over Under Chart
Properties Demonstrated
  • subcede
  • exceed
  • color
  • opacity

This example compares one series to a base series and creates shaded areas. The color and opacity are controlled. The crosspoints show the point values up to three decimal places.

How to Interact Source Code:
    Rendering Source Code...
Alarm Chart
Properties Demonstrated
  • color
  • opacity
  • fill
  • fillto
  • flag

This example shows a line series with three different alarm levels, the flags are visible and show on the right axis. The alarm levels are filled creating areas of alarm.

How to Interact Source Code:
    Rendering Source Code...
Step Chart
Properties Demonstrated
  • lineWidth
  • drawPoints
  • padding

This example shows a step series with padding and points drawn.

How to Interact Source Code:
    Rendering Source Code...
Open High Low Close Chart
Properties Demonstrated
  • intervalOffset

This chart will stretch the bars horizontally to touch each other by taking up 100% of the available width.

How to Interact Source Code:
    Rendering Source Code...
Filled Bars with Ranges

This chart displays a line series with dates on its x axis and integer values on its y axis. The two shaded regions are dynamically sized and moved with the chart and represent important date ranges.

These ranges are added manually through DIV elements positioned behind the chart.

How to Interact Source Code:
    Rendering Source Code...
Static Pie Labels

This chart contains a PieSeries with a label centered over each piece.

How to Interact Source Code:
    Rendering Source Code...
Master Detail Charts

This set of charts displays the total of two numbers in a line series. The pie charts below represent the breakdown of those numbers for each point in the line. By selecting a point in the top chart, the onAfterSelectPoint method will force the bottom two charts to update their data.

How to Interact
Source Code:
    Rendering Source Code...
Custom Point Markers

This chart displays a line series and implements the onDblClickPoint event to trigger the marking of the clicked point. When a user double clicks a point, or single clicks a point and presses the enter key, the event handler marks/un-marks the point by positioning a custom image which stays in place as the chart is zoomed and moved and point selection changes.

Double click a point below to mark it:

How to Interact Source Code:
    Rendering Source Code...
Too Low
Too High
Filled Bars, Ranges and Custom Markers

This chart displays two overlayed bar series. The first is formatted to appear as a max value and will be filled at each point by the second series. Two DIV elements have been added to mark the normal range of the chart and are positioned over the chart when it is drawn. Custom hints have been added to allow display of a single hint per X axis point which displays only the 'data' value for each point.

.
How to Interact Source Code:
    Rendering Source Code...