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
All the multipliers applicable for the millisecond unit.
All the multipliers applicable for the second unit.
All the multipliers applicable for the minute unit
All the multipliers applicable for the hour unit.
All the multipliers applicable for the day unit.
All the multipliers applicable for the month unit.
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
All the multipliers applicable for the millisecond unit.
All the multipliers applicable for the second unit.
All the multipliers applicable for the minute unit
All the multipliers applicable for the hour unit.
All the multipliers applicable for the day unit.
All the multipliers applicable for the month unit.
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
The unit of time to be represented in each bin - millisecond, second, minute, hour, day, month or year.
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
The unit of time to be represented in each bin - millisecond, second, minute, hour, day, month or year.
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
The UNIX timestamp corresponding to the time at which to start the time selection visible on the focus canvases.
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
The UNIX timestamp corresponding to the time at which to start the time selection visible on the focus canvases.
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
Chart width to set, in pixels or percentage
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
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 is called only when getSVGString() completes its execution.
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
Width of the exported image (of the charts)
Height of the exported image (of the charts)
The configuration required for the chart(s) being exported can be provided in this object using the attributes given below:
charts :{Valid FusionCharts ID, to attach the chart on the main image
x-coordinate for positioning the exported image
y-coordinate for positioning the exported image
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.
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.
The configuration required for the exported image's background can be provided in this object using the attributes given below:
background :{Background color for the exported image
Background image for the exported images
Transparency of the background image
Starting x-coordinate for positioning the background image
Starting y-coordinate for positioning the background image
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.
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.
Set to _self to open the exported image in the same window
Set to _blank to open the exported image in a new window
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
Default file name (excluding the extension) for the exported image
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
List of formats in which the chart can be exported
The formats are separated using the | (pipe) character.
Name of the JavaScript function that is called when the export process finishes
Set to 1 to enable client-side exporting
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 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 thedataSourceattribute of the FusionTime constructor.
Parameters
Data to be passed to the chart
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
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
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.
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 (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.
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 (name) of the event whose listener(s) has to be removed
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 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
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.
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.
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
Callback function executed when the FusionTime framework is ready
Argument to be passed to the callback 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.
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
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
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);
});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 :{Hides all buttons on the chart
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 :{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 |
File name for the chart being exported, excluding the extension. The extension is automatically appended depending on the value of exportFormat parameter.
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).
URL of the export server
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.
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.
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 message to be displayed
Boolean value to indicate whether the message will be shown on an overlay button or on the chart.
If set to true, the modal can be closed by clicking. Defaults to false.
Applicable only if
modalis 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();
//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
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.
Method for inserting the chart's DOM element within the containerElement. Click here to read more about the DOM insert modes.
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 chartDispose
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
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.
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);
});FeedData
Adds data to the chart in real-time.
Example
// update date
const getNextRandomDate = d => new Date(new Date(d).getTime() + 1000);
const fd = (d) => {
var e = new Date(d.getTime()- (d.getTimezoneOffset())*60000).toISOString()
var f = e.split(".")[0]
var g = f.split("T")
var h = g.join(" ")
return h
}
// random data generator
const randBetween = (min, max) => {
const ceilMin = Math.ceil(min);
return (
Math.floor(Math.random() * (Math.floor(max) - ceilMin + 1)) + ceilMin
);
};
// Fusioncharts data store
const dataStore = new FusionCharts.DataStore().createDataTable(data, schema);
// time series chart instance
const realtimeChart = new FusionCharts({
type: "timeseries",
renderAt: "chart-container",
width: "100%",
height: "600",
dataSource: {
data: dataStore,
yAxis: { plottype: "area" },
series: "City"
}
});
let lastTimeStr = data[data.length - 1][0];
realtimeChart.addEventListener(
"rendered",
({
sender: realtimeChart
}) => {
lastTimeStr = getNextRandomDate(lastTimeStr);
console.log("new lastTimeStr:",lastTimeStr)
let newDate = new Date(lastTimeStr);
console.log("newDate without format:",newDate)
let formattedNewDate = fd(newDate);
console.log("new Date first time:",formattedNewDate)
let incrementor = setInterval(() => {
console.log("formattedNewDate before randomizing:",formattedNewDate);
newDate = getNextRandomDate(formattedNewDate);
formattedNewDate =fd(newDate);
realtimeChart.feedData([
[formattedNewDate, randBetween(13, 45), "Kuala Lumpur"],
[formattedNewDate, randBetween(13, 45), "Panama City"]
]);
}, 1000);
});
realtimeChart.render();