FusionTime Methods

FusionTime offers wide variety of methods for controlling the chart behaviour ranging from exporting, loading data, resizing, set binning of the time-series charts etc. Find the comprehensive list of methods below.

setBinning

Overrides the binning rules followed by the chart with the binning rules provided to this API. If some time unit is missing from the input binning rules, then the default multipliers for that time unit will be used by the chart. If any incorrect multipliers are provided to a unit, they will be ignored.

Parameters

millisecond

number

[+]

All the multipliers applicable for the millisecond unit.

second

number

[+]

All the multipliers applicable for the second unit.

minute

number

[+]

All the multipliers applicable for the minute unit

hour

number

[+]

All the multipliers applicable for the hour unit.

day

number

[+]

All the multipliers applicable for the day unit.

month

number

[+]

All the multipliers applicable for the month unit.

year

number

[+]

All the multipliers applicable for the year unit.

Example

//DataStore: In-browser store of tabular data
var dataStore = new FusionCharts.DataStore();
new FusionCharts({
    type: "timeseries",
    renderAt: "container",
    id: "binning-API-methods",
    width: "100%",
    height: 600,
    dataSource: {
      caption: {
        text: "Sales Analysis"
      },
      subcaption: {
        text: "Grocery"
      },
      yAxis: [{
        plot: {
          value: "Grocery Sales Value",
          "type": "column"
        },
        format: {
          prefix: "$"
        },
        title: "Sale Value"
      }],
//Fetch the data and schema to create the DataTable
      data: dataStore.createDataTable(data, schema)
    }

  }).render()
})

//Set Binning Method
document.getElementById("setBin").addEventListener("click", function() {
  FusionCharts.items["binning-API-methods"].setBinning({
    "year": [1],
    "month": [2],
    "day": [2],
    "minute": []
  })
  document.getElementById("showMessage").innerHTML = "Current bin is now set to 1-year, 2-months & 2-day";
});

//Get Binning Method
document.getElementById("getBin").addEventListener("click", function() {

  var bin = FusionCharts.items["binning-API-methods"].getBinning();
  document.getElementById("showMessage").innerHTML = "Current Bin : " +
    bin.year + "-" + "year" + ((bin.year == 1) ? " " : "s") + ", " +
    bin.month + "-" + "month" + ((bin.month == 1) ? " " : "s") + " & " +
    bin.day + "-" + "day" + ((bin.day == 1) ? " " : "s");

});

getBinning

Returns the binning rules that are being followed by the chart. If any custom binning rules are in effect, the returned rules will take into account the modifications made by them as well.

Parameters

millisecond

number

[+]

All the multipliers applicable for the millisecond unit.

second

number

[+]

All the multipliers applicable for the second unit.

minute

number

[+]

All the multipliers applicable for the minute unit

hour

number

[+]

All the multipliers applicable for the hour unit.

day

number

[+]

All the multipliers applicable for the day unit.

month

number

[+]

All the multipliers applicable for the month unit.

year

number

[+]

All the multipliers applicable for the year unit.

Example

//DataStore: In-browser store of tabular data
var dataStore = new FusionCharts.DataStore();
new FusionCharts({
    type: "timeseries",
    renderAt: "container",
    id: "binning-API-methods",
    width: "100%",
    height: 600,
    dataSource: {
      caption: {
        text: "Sales Analysis"
      },
      subcaption: {
        text: "Grocery"
      },
      yAxis: [{
        plot: {
          value: "Grocery Sales Value",
          "type": "column"
        },
        format: {
          prefix: "$"
        },
        title: "Sale Value"
      }],
//Fetch the data and schema to create the DataTable
      data: dataStore.createDataTable(data, schema)
    }

  }).render()
})

//Set Binning Method
document.getElementById("setBin").addEventListener("click", function() {
  FusionCharts.items["binning-API-methods"].setBinning({
    "year": [1],
    "month": [2],
    "day": [2],
    "minute": []
  })
  document.getElementById("showMessage").innerHTML = "Current bin is now set to 1-year, 2-months & 2-day";
});

//Get Binning Method
document.getElementById("getBin").addEventListener("click", function() {

  var bin = FusionCharts.items["binning-API-methods"].getBinning();
  document.getElementById("showMessage").innerHTML = "Current Bin : " +
    bin.year + "-" + "year" + ((bin.year == 1) ? " " : "s") + ", " +
    bin.month + "-" + "month" + ((bin.month == 1) ? " " : "s") + " & " +
    bin.day + "-" + "day" + ((bin.day == 1) ? " " : "s");

});

setCurrentBin

Sets the provided unit and multiplier as the current binning in the chart by adjusting spread of time on the focus canvases. The provided multiplier must be a valid multiplier for the given time unit (as per the currently active binning rules in the chart). If it is not, then there is no visible effect of calling this method. If the multiplier is not provided, it is assumed to be 1. If the unit is not provided, there should be no visible effect of calling this method.

Parameters

unit

string

[+]

The unit of time to be represented in each bin - millisecond, second, minute, hour, day, month or year.

multiplier

number

[+]

The multiplier for the unit to be represented in each bin.

Example

//DataStore: In-browser store of tabular data
var dataStore = new FusionCharts.DataStore();
var ftChart = new FusionCharts({
          type: "timeseries",
          renderAt: "container",
          width: 800,
          height: 500,
          dataSource: {
            caption: {
              text: "Sales Analysis"
            },
            subcaption: {
              text: "Grocery"
            },
            yAxis: [{
              plot: {
                value: "Grocery Sales Value",
                "type": "column"
              },
              format: {
                prefix: "$"
              },
              title: "Sale Value"
            }],
            // Fetch the data and schema to create the DataTable
            data: dataStore.createDataTable(data, schema)
          }
        }).render();
       //getBin() fetches the current Bin for the chart
        function getBin() {
          var bin = ftChart.getCurrentBin();
          document.getElementById("showMessage").innerHTML = "Current Bin : " + bin.multiplier + " " + bin.unit + ((bin.multiplier == 1) ? "" : "s");
        };
       //setBin3() sets the multiplier to 3 for the chart
        function setBin3() {
          ftChart.setCurrentBin({
            "unit": "day",
            "multiplier": "3"
          });
          document.getElementById("showMessage").innerHTML = "Current bin is now set to 3 days";
        };
       //setBin5() sets the multiplier to 5 for the chart
        function setBin5() {
          ftChart.setCurrentBin({
            "unit": "day",
            "multiplier": "5"
          });
          document.getElementById("showMessage").innerHTML = "Current bin is now set to 5 days";
        };
        document.getElementById("getBin").addEventListener("click", getBin);
        document.getElementById("setBin3").addEventListener("click", setBin3);
        document.getElementById("setBin5").addEventListener("click", setBin5);
      }); 

getCurrentBin

Provides information about the binning applied in the chart when the method was invoked.

Parameters

unit

string

[+]

The unit of time to be represented in each bin - millisecond, second, minute, hour, day, month or year.

multiplier

number

[+]

The multiplier for the unit to be represented in each bin.

Example

//DataStore: In-browser store of tabular data
var dataStore = new FusionCharts.DataStore();
var ftChart = new FusionCharts({
          type: "timeseries",
          renderAt: "container",
          width: 800,
          height: 500,
          dataSource: {
            caption: {
              text: "Sales Analysis"
            },
            subcaption: {
              text: "Grocery"
            },
            yAxis: [{
              plot: {
                value: "Grocery Sales Value",
                "type": "column"
              },
              format: {
                prefix: "$"
              },
              title: "Sale Value"
            }],
            // Fetch the data and schema to create the DataTable
            data: dataStore.createDataTable(data, schema)
          }
        }).render();
       //getBin() fetches the current Bin for the chart
        function getBin() {
          var bin = ftChart.getCurrentBin();
          document.getElementById("showMessage").innerHTML = "Current Bin : " + bin.multiplier + " " + bin.unit + ((bin.multiplier == 1) ? "" : "s");
        };
       //setBin3() sets the multiplier to 3 for the chart
        function setBin3() {
          ftChart.setCurrentBin({
            "unit": "day",
            "multiplier": "3"
          });
          document.getElementById("showMessage").innerHTML = "Current bin is now set to 3 days";
        };
       //setBin5() sets the multiplier to 5 for the chart
        function setBin5() {
          ftChart.setCurrentBin({
            "unit": "day",
            "multiplier": "5"
          });
          document.getElementById("showMessage").innerHTML = "Current bin is now set to 5 days";
        };
        document.getElementById("getBin").addEventListener("click", getBin);
        document.getElementById("setBin3").addEventListener("click", setBin3);
        document.getElementById("setBin5").addEventListener("click", setBin5);
      }); 

setTimeSelection

Updates the start and end time of the time selection on the focus canvases. This will also result in a change across all of the chart’s components accordingly.

Parameters

start

string

[+]

The UNIX timestamp corresponding to the time at which to start the time selection visible on the focus canvases.

end

number

[+]

The UNIX timestamp corresponding to the time at which to end the time selection visible on the focus canvases.

Example

//DataStore: In-browser store of tabular data
var dataStore = new FusionCharts.DataStore();
var ftChart = new FusionCharts({
      type: "timeseries",
      renderAt: "container",
      width: 800,
      height: 550,
      dataSource: {
        chart: {},
        caption: {
          text: "Daily Visitors Count of a Website"
        },
        yAxis: [{
          plot: {
            value: "Daily Visitors",
            type: "smooth-area"
          },
          title: "Daily Visitors Count",
          format: {
            suffix: "k"
          }
        }],
      // Fetch the data and schema to create the DataTable
        data: dataStore.createDataTable(data, schema)
      }
    }).render();

  // getSelection() fetches the start and end time
    function getSelection() {
      var s = new Date(ftChart.getTimeSelection().start);
      var e = new Date(ftChart.getTimeSelection().end);
      document.getElementById("test").style.display = "none";
      document.getElementById("setMessage").innerHTML = "Current selection range : " + s.getDate() + "/" + (s.getMonth()+1) + "/" + s.getFullYear() + " to " + e.getDate() + "/" + (e.getMonth()+1) + "/" + e.getFullYear();
    };
   //setSelection() sets the start and end time
    function setSelection() {
      document.getElementById("setMessage").innerHTML = "Select a range from the above range picker";
      document.getElementById("test").style.display = "inline";
      $(function() {
      var smoment = moment([2016, 0, 1]);
      var emoment = moment([2018, 11, 12]);
      $("input[name="daterange"]").daterangepicker({
        opens: "left",
        startDate: smoment,
        endDate: emoment
      }, function(start, end, label) {
       
        var s = new Date([start.format("YYYY"), start.format("MM"), start.format("DD")]);
        var e = new Date([end.format("YYYY"), end.format("MM"), end.format("DD")]);
        
        ftChart.setTimeSelection({
          end: s.getTime(),
          start: e.getTime() 
        });
        
      });
    });
    };
    document.getElementById("getSelection").addEventListener("click", getSelection);
    document.getElementById("setSelection").addEventListener("click", setSelection);

  }) }

getTimeSelection

Provides start and end UNIX timestamps of the visible window of the time axis.

Parameters

start

string

[+]

The UNIX timestamp corresponding to the time at which to start the time selection visible on the focus canvases.

end

number

[+]

The UNIX timestamp corresponding to the time at which to end the time selection visible on the focus canvases.

Example

//DataStore: In-browser store of tabular data
var dataStore = new FusionCharts.DataStore();
var ftChart = new FusionCharts({
      type: "timeseries",
      renderAt: "container",
      width: 800,
      height: 550,
      dataSource: {
        chart: {},
        caption: {
          text: "Daily Visitors Count of a Website"
        },
        yAxis: [{
          plot: {
            value: "Daily Visitors",
            type: "smooth-area"
          },
          title: "Daily Visitors Count",
          format: {
            suffix: "k"
          }
        }],
      // Fetch the data and schema to create the DataTable
        data: dataStore.createDataTable(data, schema)
      }
    }).render();

  // getSelection() fetches the start and end time
    function getSelection() {
      var s = new Date(ftChart.getTimeSelection().start);
      var e = new Date(ftChart.getTimeSelection().end);
      document.getElementById("test").style.display = "none";
      document.getElementById("setMessage").innerHTML = "Current selection range : " + s.getDate() + "/" + (s.getMonth()+1) + "/" + s.getFullYear() + " to " + e.getDate() + "/" + (e.getMonth()+1) + "/" + e.getFullYear();
    };
   //setSelection() sets the start and end time
    function setSelection() {
      document.getElementById("setMessage").innerHTML = "Select a range from the above range picker";
      document.getElementById("test").style.display = "inline";
      $(function() {
      var smoment = moment([2016, 0, 1]);
      var emoment = moment([2018, 11, 12]);
      $("input[name="daterange"]").daterangepicker({
        opens: "left",
        startDate: smoment,
        endDate: emoment
      }, function(start, end, label) {
       
        var s = new Date([start.format("YYYY"), start.format("MM"), start.format("DD")]);
        var e = new Date([end.format("YYYY"), end.format("MM"), end.format("DD")]);
        
        ftChart.setTimeSelection({
          end: s.getTime(),
          start: e.getTime() 
        });
        
      });
    });
    };
    document.getElementById("getSelection").addEventListener("click", getSelection);
    document.getElementById("setSelection").addEventListener("click", setSelection);

  }) }

resizeTo

Resizes the chart to the specified width and height. The values for the width and height are passed, in pixels or percentage, as parameters to this function. If the function is called without any parameters, it returns the current value of the chart width and height.

This function is useful in controlling the chart dimensions based on changes in the dimensions of a resizable dialog box. It is also useful in resizing charts for responsive layouts, based on device orientation change.

When the chart dimensions are set in percentage, the chart partially redraws itself when the chart container is resized. The chart uses a very low-profile polling, at an interval of 300 ms to check whether the container has effectively resized.

Parameters

width

number or percent

[+]

Chart width to set, in pixels or percentage

height

number or percent

[+]

Chart height to set, in pixels or percentage

Example

FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	        renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {}
	}).render();

	//Resize the chart
	myChart.resizeTo("100%", "500");
});

lockResize

Allows users to controls whether the chart will be dynamically resizable or not when rendered using percent height and width.

Parameters

state

boolean

[+]

Setting this parameter to true will lock the automatic percentage-based resizing. If resize is already locked, sending false unlocks it.

Example

FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {}
	}).render();//Locking the automatic percentage-based resizing. If resize is already locked, sending false unlocks it.
	myChart.lockResize(true);
});

getSVGString

Returns the SVG string of a chart. This function can be called only after the chart has rendered.

Parameters

callBackFN( svgString )

getSVGString-callBack

[+]

callBackFN is called only when getSVGString() completes its execution.

keepImages

keepImages

[+]

To get the images present in the chart from the SVG string, set the parameter of keepImages object to 1.

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "container",
    width: "450",
    height: "350",
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
//Returns the SVG string of the chart
  function svgString() {
   
				myChart.getSVGString(function(svg){
        	document.getElementById("msg").appendChild(        document.createTextNode(svg));
				});
        
    }
    document.getElementById("get").addEventListener("click", svgString);
  })
});

batchExport static function

Exports multiple charts in a single image. This method either takes no arguments or takes an object as an argument.

Parameters

imageWidth

number

[+]

Width of the exported image (of the charts)

Maximum chart width + 10
imageHeight

number

[+]

Height of the exported image (of the charts)

(Total height of all charts + 5) * (number of charts + 1)

The configuration required for the chart(s) being exported can be provided in this object using the attributes given below:

charts :{
id

string

[+]

Valid FusionCharts ID, to attach the chart on the main image

x

number

[+]

x-coordinate for positioning the exported image

5
y

number

[+]

y-coordinate for positioning the exported image

previous chart's y-coordinate + 5
width

number

[+]

Custom width for the exported image

Note: If only one value from the width and the height of the chart is provided, the value of the other is calculated in a way that the aspect ratio is maintained.

Current chart width
height

number

[+]

Custom height for the exported image

Note: If only one value from the width and the height of the chart is provided, the value of the other is calculated in a way that the aspect ratio is maintained.

Current chart height
}

The configuration required for the exported image's background can be provided in this object using the attributes given below:

background :{
bgColor

hexcolor

[+]

Background color for the exported image

#ffffff
bgImage

string

[+]

Background image for the exported images

bgImageAlpha

number

[+]

Transparency of the background image

bgImageX

number

[+]

Starting x-coordinate for positioning the background image

bgImageY

number

[+]

Starting y-coordinate for positioning the background image

bgImageWidth

number

[+]

Width of the background image

Note: If only one value from the width and the height is provided, the value of the other is calculated in a way that the aspect ratio is maintained.

Original width of the image
bgImageHeight

number

[+]

Height of the background image

Note: If only one value from the width and the height is provided, the value of the other is calculated in a way that the aspect ratio is maintained.

Original height of the image
}
exportTargetWindow

string

[+]

Set to _self to open the exported image in the same window

Set to _blank to open the exported image in a new window

_self
exportAction

string

[+]

Set to _save to save the exported image on the server

Set to _download to send back the image to the client as a download

_download
exportFileName

string

[+]

Default file name (excluding the extension) for the exported image

exportHandler

string

[+]

For server-side exporting: Path of the export handler (the ready-to-use scripts provided by FusionTime)

For client-side exporting: DOM ID of the FusionTime Export Component embedded in the web page, along with the chart

_download
exportFormats

string

[+]

List of formats in which the chart can be exported

The formats are separated using the | (pipe) character.

_download
exportCallback

string

[+]

Name of the JavaScript function that is called when the export process finishes

exportAtClientSide

string

[+]

Set to 1 to enable client-side exporting

_download

Example

//batchExport exports multiple charts in a single image
batchExportConfig1 = function() {  
FusionCharts.batchExport({
    "charts": [{
      "id": "chart1",
    }],
    "exportFileName": "batchExport",
    "exportFormat": "jpg",
    "exportAtClientSide": "1"
  })
}
  
FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    id: "chart1",
    renderAt: "container",
    width: "450",
    height: "350",
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
  
  })
});

getChartData

Fetches the data set when a chart has been rendered.

Parameters

format

dataFormats

[+]

Format in which chart data has to be retrieved

Example

<select id="data_format">
     	    <option value="csv">CSV</option>
     	    <option value="json">JSON</option>
     	</select>     	

FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {}
	}).render();

var format = document.getElementById("data_format").value;
//getChartData fetches the data set for a chart
var data = FusionCharts.getChartData(format);
}

setChartData

Sets the data for a chart.

When this function is called on a chart that is already rendered, the chart is instantly updated with the new data. When it is used to set data for a chart before it has rendered, data is initially stored internally and is passed to the chart when it is rendered.

A preferrable alternative to using the setChartData() method is to pass chart data to the dataSource attribute of the FusionTime constructor.

Parameters

data

string or object

[+]

Data to be passed to the chart

format

dataFormats

[+]

Format of the data being passed. If the value for this parameter is not a valid dataFormat, then the default or previously set data format is assumed.

If the data format is already known, then the setJSONData() or the setXMLData() methods can be used.

Example

var year_2018 = {
	//Enter data for year 2018
}

var year_2019 ={
	//Enter data for year 2019
}
FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {

		}
	}).render();

 var year_data = document.getElementById("year").value;
    if (year_data == "2018")
//setChartData sets the data for a chart
    	myChart.setChartData(year_2018, "json");
   			else if (year_data =="2019")
   				myChart.setChartData(year_2019, "json"); 
});

getChartAttribute

Fetches value of chart attributes explicitly applied to the root chart object (or the <chart> node element).

Parameters

attribute

string or array

[+]

To fetch the value of a single attribute, pass the attribute name as a string. For multiple attributes, pass an array of attribute names. Values will be returned in the order of the attribute names in the array.

Example

FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {}
	}).render();

document.getElementById("chart1").innerHTML = "Current theme: " + myChart.getChartAttribute("theme");
  
//getChartAttribute fetches the value of chart attribute explicitly
  function getAtt() {

       var select = document.getElementById("chart1");
       myChart.setChartAttribute("theme", select.value);
 document.getElementById("current_value").innerHTML = "Current theme: " + myChart.getChartAttribute("theme");

    }
    document.getElementById("theme-type").addEventListener("change", getAtt);
});

setChartAttribute

Updates a chart's attributes with a new attribute-value pair, thus updating the chart's data definition root (the <chart> node in the XML data or the chart object in the JSON data).

Parameters

attributes

object or string

[+]

To set/update multiple attributes at once, an object containing all the key-value pairs is passed. In case of a single value, a string that is the key (the attribute name) is passed.

value

string

[+]

If the attributes parameter is a single string value, the value parameter contains the value for that key.

Example

FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {
		}
	}).render();

//setChartAttribute updates the chart's attributes with new attribute-value
 function setAtt() {
       var select = document.getElementById("chart1");
       myChart.setChartAttribute("theme", select.value);


    }

    document.getElementById("chart1").addEventListener("change", setAtt);

});

addEventListener

Used to attach an event to the chart.

Parameters

type

string or array

[+]

Type (name) of the event to listen to. To register the listener for multiple events in the same registration call, provide all event names as an array.

listener

eventListener

[+]

Function to be exceuted when the event is triggered. If multiple listeners are bound to an event, the listeners are executed in the order of definition, with arguments specific to the triggered event.

Click here to read more about the eventListener arguments.

Example

FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {

		}
	}).render();
//attaching an event to the chart using addEventListener()
	myChart.addEventListener("dataPlotClick", "onDataPlotClick");
});

removeEventListener

Used to remove an event attached to the chart.

Parameters

type

string or array

[+]

Type (name) of the event whose listener(s) has to be removed

listener

function

[+]

Listener function to remove

Example

FusionCharts.ready(function() {
	var myChart = new FusionCharts({
		type: "timeseries",
    	renderAt: "container",
		width: "100%",
		height: 400,
		id: "chart1",
		dataSource: {}
	}).render();
//removing an event attached to the chart
	myChart.removeEventListener("dataPlotClick", "onDataPlotClick");
});

getObjectReference static function

Return the DOM element created by FusionTime in which charts will be rendered <span>

Parameters

id

string

[+]

ID of the chart, whose DOMElement is to be referenced.

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    id: "chart_1",
    type: "timeseries",
    renderAt: "chart-container",
    width: "90%",
    height: 490,
    dataSource: {
      data:fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
   //replaceSVG() replaces the SVG element
function replaceSVG() {
        var chart = FusionCharts.getObjectReference("chart_1");
        chart.innerHTML = "<span class="rep_text">The svg element of the chart is replaced by this text</span>";
    }
//reDrawSVG() redraws the chart
    function reDrawSVG() {
        myChart.render();
    }
    document.getElementById("get_ref").addEventListener("click", replaceSVG);
    document.getElementById("redraw").addEventListener("click", reDrawSVG);

});

clone

Creates a copy of a chart instance, creating a new chart with identical construction properties of the chart being cloned. The cloned chart, assigned an auto-generated ID, is rendered in a container DOM element that is explicitly provided.

Parameters

overrides

object

[+]

Object containing instructions for changes in the cloned chart. For example, passing pieChart.clone({type: 'column2d'}); will clone the pie chart, but set its chart-type as column2d. It accepts all the construction parameters of a new FusionTime instance.

argsOnly

boolean

[+]

Set to true, if a new FusionCharts object is not required. In that case, it causes the function to return a serializable object that can later be passed to create a new FusionTime instance, and therefore, create a clone.

false

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "90%",
    height: 490,
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
//exact_copy() creates a copy of the chart
   function exact_copy() {
        var cloned_chart = myChart.clone();
        console.log(cloned_chart);
        cloned_chart.render("cloned-chart-container");
    }
    document.getElementById("exact_copy").addEventListener("click", exact_copy);

});

ready static function

Accepts a function as an argument and that is executed by FusionTime when the page is ready (library loaded, DOM elements rendered).

Parameters

readyCallback

readyCallback

[+]

Callback function executed when the FusionTime framework is ready

args

*

[+]

Argument to be passed to the callback function

[FusionCharts](/api/fusioncharts)
context

function

[+]

To execute a function, passed using the fn parameter, in a different scope than the default FusionCharts scope, pass the appropriate class object here.

[FusionCharts](/api/fusioncharts)

Example

//ready() checks if the library is loaded and DOM elements are rendered
function ready() {
    var rend = document.getElementById("render");
    rend.hidden = false;
    rend.addEventListener("click", renderChart);


  function renderChart() {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "chart1",
    width: "90%",
    height: 490,
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();

}
}

dataReady

Determines whether a chart will render properly with the data set and returns true or false.

Parameters

available

boolean

[+]

Setting this parameter to true returns the status of the data, irrespective of its compatibility with the chart type. In that case, this function will return false if data provided to the chart triggers the dataLoadError or dataInvalid events

false

Example

FusionCharts.ready(function () {
  var year_2016 = {
    //Enter data for year 2016
}
  var year_2017 = {
    //Enter data for year 2017
}
   var year_2018 = {
    //Enter data for year 2018
}
var year_2019 ={
    //Enter data for year 2019
}
    var myChart = new FusionCharts({
        type: "timeseries",
       renderAt: "container",
        width: "100%",
        height: 400,
        id: "chart1",
        dataSource: year_2018
    });
    function render() {
        var data = document.getElementById("data").value;

        if (data == "2016") {
            myChart.setChartData(year_2016);
        } else if (data == "2017") {
            myChart.setChartData(year_2017);
        } else if (data == "2018") {
            myChart.setChartData(year_2018);
        } else if (data == "2019") {
            myChart.setChartData(year_2019);
       }

        myChart.render();
        var flag = myChart.dataReady();
        var msg = document.getElementById("msg");
        if (flag) {
            msg.innerHTML = "Data valid. Scroll down to view the chart.";
        } else {
            msg.innerHTML = "Data invalid";
        }
    }

    document.getElementById("rend").addEventListener("click", render);
});
});

hasRendered

Returns true if the chart has rendered successfully, false if it has not.

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "90%",
    height: 490,
    dataSource: {
      data:fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  });
   
 var msg = document.getElementById("render_status");
    var flag = myChart.hasRendered();
//to check whether the chart has rendered or not
    if (!flag) {
        msg.innerHTML = "Chart not rendered";

    }
    function render() {
        myChart.render();
        msg.innerHTML = "Chart rendered";
    }

    document.getElementById("render").addEventListener("click", render);

});

print

Prints individual charts. It hides all elements on a page except the chart to print and then invokes the page printing function (window.print()).

Parameters

Object containing the printing options configured

options :{
hideButtons

boolean

[+]

Hides all buttons on the chart

true
}

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "90%",
    height: 490,
    dataSource: {
      data:fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
  //print() invokes the page printing function to print the chart
 function print() {
        myChart.print();
    }   
    document.getElementById("print").addEventListener("click", print);

});

exportChart

Exports a chart as an image or as a PDF document.

Parameters

The exportChart method takes the following parameters:

options :{
exportFormat

string

[+]

A chart can be exported in one of the following formats:

| Export Format | Description |

| --------- | :-------------|

| png| Exports the charts in the high quality lossless PNG format |

| jpg | Exports the chart in the high quality JPEG image format |

| pdf | Exports the chart as a PDF document |

png
exportFileName

string

[+]

File name for the chart being exported, excluding the extension. The extension is automatically appended depending on the value of exportFormat parameter.

FusionCharts
exportTargetWindow

string

[+]

When the exportAction parameter is set to download as , this parameter lets you configure whether the return image or PDF will open in the same window (as an attachment for download), or in a new browser window (_blank).

_self
exportHandler

string

[+]

URL of the export server

exportAction

string

[+]

Specifies whether the exported image will be sent back to the browser as download, or whether it will be saved on to the server.

| Action Value | Description |

| ----------| :------------------------|

| download | The exported chart image or PDF will be downloaded as file. |

| save | The exported chart will be saved on the server.|

For the charts to be saved on the server, you would need to setup your own export handling server.

download
exportCallback

function

[+]

Callback JavaScript function executed when the export process is complete. If this parameter is not assigned a value, then the window.FC_Exported is executed.

FC_Exported
}

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "container",
    width: "90%",
    height: 490,
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
  //export_chart() exports the chart as a pdf or image
   function export_chart() {
        var format = document.getElementById("format").value;
        myChart.exportChart({
            "exportFormat": format
        });
    }
    document.getElementById("export").addEventListener("click", export_chart);
});
});

showChartMessage

Shows a text message on a chart.

Parameters

text

string

[+]

Text message to be displayed

modal

boolean

[+]

Boolean value to indicate whether the message will be shown on an overlay button or on the chart.

false
cancelable

boolean

[+]

If set to true, the modal can be closed by clicking. Defaults to false.

Applicable only if modal is set to true.

false

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "90%",
    height: 490,
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
 //show() displays a text message on the chart
function show() {

        var mode = document.getElementById("mode");
        var msg = document.getElementById("chart_message").value.trim();
        if (msg !== "" && mode.selectedIndex !== 0) {
            myChart.render();
            if (mode.value == "onchart") {
                myChart.showChartMessage(msg);
            } else if (mode.value == "overlay") {
                myChart.showChartMessage(msg, true);
            } else if (mode.value == "overlaycan") {
                myChart.showChartMessage(msg, true, true);
            }
        }
    }
    document.getElementById("show_message").addEventListener("click", show);


});

render

Renders a chart inside a container element on a page. If the chart is already rendered, it can be re-rendered inside the same container DOM element or a different element.

Parameters

containerElement

string or DOMElement

[+]

Reference or ID of the DOM element inside which the chart is to be rendered. If this argument is not provided, it is assumed that the renderAt attribute is provided during chart creation.

insertMode

DOMInsertModes

[+]

Method for inserting the chart's DOM element within the containerElement. Click here to read more about the DOM insert modes.

replace
callback

renderCallback

[+]

Callback function executed after the chart is successfully rendered. If the last parameter to the render() function is a function, it is treated as a callback.

Example

new FusionCharts({
    type: "timeseries",
    renderAt: "container",
    width: "90%",
    height: 490,
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render(); //render() renders the chart

Dispose

Disposes a chart completely, when called on an instance of FusionCharts. This clears the entire chart object and removes it from the DOM tree structure. When the chart is successfully disposed, chartInstance.disposed is set to true.

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "90%",
    height: 490,
    dataSource: {
      data: fusionTable,
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  }).render();
   
 var status = document.getElementById("state");
    var state = myChart.disposed;

    if (state === undefined) {
        status.innerHTML = "false";
    }
//dis() disposes the chart
    function dis() {
        myChart.dispose();
        status.innerHTML = myChart.disposed;
    }
    document.getElementById("dispose").addEventListener("click", dis);

});

configure

Configures status messages that are displayed while rendering a chart. For example, while a chart's data is being fetched from a remote URL, the chart will display the message Retrieving data. Please wait.

Parameters

option

chartStatusMessages

[+]

To configure a single attribute, specify the attribute (the key) as a string. To configure multiple attributes, this can be an object having key-value pairs of all configuration options.

value

string

[+]

If the option parameter has a single value as the key, this parameter is the value of that key.

Example

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "90%",
    height: 490,
    dataSource: {
      "data": [

            ],
      chart: {
      exportEnabled: 1
      },
      caption: {
        text: "Online Sales of a SuperStore in the US"
      },
      yAxis: {
        "plot": {
          "value": "Sales",
          "type": "line"
        },
      }
    }
  });
   //rendering the chart
 function render() {
//configuring the display message
        myChart.configure({
            "dataEmptyMessage": "No data to load. Please check the data source."
        });
        myChart.render();

    }

    document.getElementById("render").addEventListener("click", render);
});