Features
  • Allows to include interactivity between javascript charts.
  • Offers advanced control by giving you access to the complete FusionCharts object (that contains the chart configuration).
  • Allows to include interactivity between javascript charts.
  • Offers advanced control by giving you access to the complete FusionCharts object (that contains the chart configuration).
A Simple Chart
Quick Demo:
Quick Demo:
A Simple Chart
A simple chart with all data embedded into the directive
A Simple TimeSeries
FusionTime
A simple time-series chart with a single series plotted as line
Column chart with time axis
FusionTime
Time-series chart with series plotted as column
Area chart with time axis
FusionTime
Time-series chart with series plotted as are
A 3D Pie Chart
A 3D pie chart using the datasource attribute from component's scope
A simple gauge
A simple gauge to show customer satisfaction score
A Column, Line and Area Combi Chart
A combination chart of column , line and area
Column and line combination on time axis
FusionTime
Two series of data plotted as a combination of column & line on the same y-axis
Plotting multiple series on time axis
FusionTime
A multi-series chart with 2 variables plotted as line on the same y-axis
Plotting two variables (measures)
FusionTime
Plotting 2 different variables in 2 different vertically stacked canvases
Fetch data from JSON URL
Fetch data remotely from a JSON file or URL
Fetch data from XML URL
Fetch data remotely from a XML file or URL
Update chart data
Change the data dynamically and watch the chart update automatically
Update chart attribute
Update the chart with new attributes
Listen to events from chart
Bind event listener to the chart and get the related event data
Percentage Calculation
Hover on a plot to see the percentage value with respect to total
Add drill-down to chart
Use LinkedCharts to quickly add drill-down to charts
Adding a reference line
FusionTime
Adding a static reference line (by value) to indicate targets or threshold
Annotating single data point
FusionTime
Annotating specific data point using data markers on line series
Single event overlay
FusionTime
Plotting an event marker to indicate an event for a specific date
Date range event overlay
FusionTime
Plotting an event marker as a band, to indicate an event that spans a data range
Export multiple charts
Use Batch Export Feature to export multiple charts as a single image/PDF
World Map
World map showing data for different continents
Special Events
Drag a projected column to see its change
Lifecycle events
This sample lists the basic lifecycle events at the time of rendering FusionCharts.
Dynamically add chart event listener
How you can dynamically(runtime) add & remove chart specific events in FusionCharts
Slice data plots
Use Chart specific custom API
Responsive charts
Select any of the dimensions given in the list. The chart adjusts itself to its alloted percentage
Change chart type at run time
Change the chart type dynamically or at runtime
Use annotations
Add custom shapes to highlight a specific data point
Usage of FusionCharts methods (API)
Change a chart attribute by calling FusionCharts setChartAttribute API
Applying a different theme
Choosing from different themes available in FusionCharts Suite
Interactive candlestick chart
FusionTime
Time-series chart plotted as candlestick, with 4 different values for each plot (open, high, low, close)
Quick Start
Setting up the FusionCharts jQuery Plugin
Step 1: Include jquery.min.js to enable jQuery in your project:

jQuery needs to be imported before the FusionCharts jQuery plugin is included in the project. Note that in order to support IE 6/7/8, jQuery 1.x versions need to be used.

Step 2: Include the FusionCharts package
  • Copy fusioncharts.js from the FusionCharts Download Package > js folder in your project
  • Add reference to the file in your code
Step 3: Include the jquery-fusioncharts module
  • Copy fusioncharts.jqueryplugin.js from the FusionCharts Download Package > js folder in your project
  • Add reference to the file in your code
Step 4 (optional): Include the theme file.

This step is optional, the chart will render with the default theme even if the theme file is not included.

This completes the setup and you are now ready to begin using the FusionCharts jQuery plugin.

In addition to using all the existing features, the jQuery plugin lets you do the following:

  • Render jQuery charts that work across PCs (including IE6/7/8), Macs, iPads, iPhones, and Android devices seamlessly
  • Update chart type, data, and individual cosmetic properties at run-time
  • Insert, prepend, and append multiple charts in an existing chart container
  • Customize the look and feel of all elements on the chart
  • Plot charts from data contained in HTML tables
Rendering charts using jQuery

For rendering new charts, you can use the following jQuery methods:

  • insertFusionCharts
  • appendFusionCharts
  • prependFusionCharts
insertFusionCharts Method:

Renders charts inside HTML elements. The HTML elements have to be selected using jQuery selector. In case, multiple HTML elements are selected using the jQuery selector, a chart will be rendered inside each selected HTML element. All existing elements inside the selected elements will be replaced by the rendered charts. This method returns the jQuery selected element to allow chaining with other jQuery methods.

An object of chart configurations (set of key, value pairs) can be passed as parameter. Click here to view complete list of chart configurations.

appendFusionCharts Method:

Renders charts at the end of selected HTML elements. The HTML elements need to be selected using jQuery selector. In case multiple HTML elements are selected, chart will be rendered inside each selected HTML element. All existing elements inside the selected elements will be preserved. The method returns the original jQuery selection to allow chaining of other jQuery methods.

An object of chart configurations (set of key, value pairs) can be passed as parameter. Click here to view complete list of chart configurations.

In the above example, the horizontal linear gauge has been rendered using the insertFusionCharts method. The constructor object is passed as an argument to the insertFusionCharts method

In the above code snippet, the cloneFusionCharts method is used to create a column-chart clone of the existing pie-chart.This method finds all the charts in the selected element and returns of list of their clones.

The cloneFusionCharts method accepts two arguments:

  • An anonymous callback function: An array of cloned charts (in this Array) is passed to this function for further processing
  • A configuration object: An object containing chart configurations which are applied to each cloned chart
prependFuionCharts Method:

Renders and inserts charts at the beginning of selected HTML elements. The HTML elements need to be selected using jQuery selector. In case multiple HTML elements are selected, chart will be rendered inside each selected HTML element. All existing elements inside the selected elements will be preserved. The method returns the original jQuery selection to allow chaining of other jQuery methods.

An object of chart configurations (set of key, value pairs) can be passed as parameter. Click here to view complete list of chart configurations.

Similar to the appendFusionCharts method example, the cloneFusionCharts method is used here to clone the existing pie chart, which is then prepended as a column chart.

There! You have now seen the various methods you can use to render charts using the jQuery plugin.

More detailed information and documentation can be found here.

Support

GitHub Issues | Contact FusionCharts Support

Usage and integration of FusionTime

From fusioncharts@3.13.3-sr.1 You can visualize timeseries data easily with jquery.

Consider the example below for integration of FusionTime
Licensing

jQuery-FusionCharts module is licensed under open-source, distributed under the terms of the MIT/X11 License. You will still need to include FusionCharts in your page, as this project provides no direct functionality. You can download a free evaluation version here. To use in a commercial environment, please purchase a FusionCharts license.

© 2002-2018 InfoSoft Global Private Limited. All Rights Reserved.