How to Guides - FusionCharts XT Suite Documentation

Setup

Getting Started

Building Your First Few Charts
- Your First Chart
- Your First Gauge
- Your First Map
- Changing the Size and Type
- Centralizing Themes for Your Charts
- Building a Dashboard
- Using XML as Data Format
More Chart Types
- Multi Series Charts
- Stacked Charts
- Combination Charts
- XY and Bubble Charts
- Zoom Line Charts
- 3D Charts
Adding Interactivity to Your Charts
- Setting Up Drill-down
- Exporting to Images or PDF
- Listening to Events

Configuring Your Chart

Chart Guide

Gauge & Widgets Guide

Angular Gauge
- Introduction
- Simple Gauge Example
- Configuring Gauge Cosmetics
- Configuring Dials
- Configuring Tick Marks
- Adding Trend Points
- Configuring Angles & Origins
- Dynamically Resizing Gauges
- Creating Editable Gauges
- Creating Real-time Gauges
- Logging Real Time Messages
Linear Gauge
- Introduction
- Simple Gauge Example
- Configuring Gauge Cosmetics
- Configuring Tick Marks
- Adding Trend-points
- Creating Editable Gauges
- Real-time Gauges
LED Gauge
- Introduction
- Simple Gauge Example
- Configuring Gauge
- Real-time Gauges
Thermometer Gauge
- Introduction
- Simple Gauge Example
- Configuring Gauge
- Real-time Gauges
Cylinder Gauge
- Introduction
- Simple Gauge Example
- Configuring Gauge
- Real Time Gauges
Bulb Gauge
- Introduction
- Simple Gauge Example
- Configuring Gauge
- Real-time Gauges
Funnel Chart
- Introduction
- Simple Chart Example
- Configuring Chart
Pyramid Chart
- Introduction
- Creating a Simple Pyramid Chart
- Configuring Chart
Spark Charts
- Introduction
- Creating a Spark Line Chart
- Configuring Spark Line Chart
- Creating a Spark Column Chart
- Configuring Spark Column Chart
- Creating Spark Win/Loss Charts
- Configuring Spark Win/Loss Charts
Bullet Graphs
- Introduction
- Creating Bullet Graphs
- Configuring Bullet Graph
Gantt Chart
- Introduction
- Creating a Simple Gantt Chart
- Configuring Cosmetics
- Configuring Task Bars
- Configuring Date Formats
- Adding Scroll to Chart
- Adding Multiple Tasks to a Process
- Creating Time-based Charts
- Adding Milestones to a Chart
- Connecting Tasks on Chart
- Adding Trend-lines
- Events in Gantt Chart

Map Guide

Interactivity

Drill-down
- Creating Simple Drill-down Charts
- Opening Links in Pop-up Windows or Frames
- Setting the Chart as a Hotspot
- Creating and Configuring Linkedcharts
Exporting as Image and PDF
- Introduction
- Configuring Export Feature
- Setup Private Export Server
  - ASP.NET
  - PHP
  - Java
  - Ruby on Rails
Chart Specific Interactivity
- Introduction
- Scrollable Charts
- Legends
- Drag-able Charts

Annotations

Introduction
Creating Annotations
- Introduction
- Creating Text Annotations
- Creating Image Annotations
- Creating Shape Annotations
- Creating Path Annotations
Positioning Annotations Using Absolute Values
Positioning Annotations Using Macros
Grouping Annotations
Controlling Annotations Dynamically
Using Annotation Events
Real-life Use Cases
Annotations References

Advanced Charting

Events
- Introduction
- Listening to Events
- Grouping of Events
Real-time Charts
- Introduction
- Real-time Data Format
- Multiple Datasets and Updates
- Adding Historical Data
- Chart Configuration
- Adding Data Stamp
- Setting Alert Manager
- Setting Message Logger
- Clearing Chart View
- Feeding & Retrieving Data Through API
- Listening to Events
- Troubleshooting
Real-time Gauges
- Introduction
- Setting Up Real-time Gauges
- Setting Alert Manager
- Using Events
- Troubleshooting Real-time Gauges

Using with Server Side Languages

PHP
- Introduction
- Different Ways of Loading Data
- Creating Charts with Data from a Database
Ruby on Rails
- Introduction
- Different Ways of Loading Data
- Creating Charts with Data from a Database
ASP.NET
- Introduction
- Different Ways of Loading Data
- Creating Charts with Data from a Database
- Creating Drill-down Charts

Using with Javascript Libraries

jQuery
- Introduction
- Rendering Charts Using jQuery
- Updating Chart Properties Using jQuery
- Selecting Charts Using jQuery
- Handling Events Using jQuery
- Rendering Charts from HTML Tables
- API Reference
AngularJS
- Introduction
- Creating Charts Using the Angular-FusionCharts Plugin
- Configuring Charts Using the Scope
- Configuring Advanced Features Using AngularJS

How to Guides

Remove an Existing Chart from a Page
Get Reference to Chart Object Once Rendered
Change Chart Properties at Runtime
Using Special Characters in a Chart
Plot Discontinuous Data
Highlight Specific Data Points on Chart
View Data of Existing Chart on Page
Render Thumbnail Versions of Chart
Enable More Than 2 Axes on Chart
Get Formatted Numbers Outside Chart
Get SVG Representation of a Chart
Change Chart Messages

Troubleshooting

Using the FusionCharts Suite XT Debugger

Chart Attributes

Map Reference

Sub-articles