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.
//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");
});
Example
setBinning Parameters
Name | Type | Description | Default Value |
---|---|---|---|
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. |
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.
//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");
});
Example
getBinning Returned Values
Name | Type | Description | Default Value |
---|---|---|---|
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. |
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.
//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);
});
Example
setCurrentBin Parameters
Name | Type | Description | Default Value |
---|---|---|---|
unit | string | The unit of time to be represented in each bin - | |
multiplier | number | The multiplier for the |
getCurrentBin
Provides information about the binning applied in the chart when the method was invoked.
//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);
});
Example
getCurrentBin Returned Values
Name | Type | Description | Default Value |
---|---|---|---|
unit | string | The unit of time to be represented in each bin - | |
multiplier | number | The multiplier for the |
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.
//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);
}) }
Example
setTimeSelection Parameters
Name | Type | Description | Default Value |
---|---|---|---|
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. |
getTimeSelection
Provides start and end UNIX timestamps of the visible window of the time axis.
//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);
}) }
Example
getTimeSelection Returned Values
Name | Type | Description | Default Value |
---|---|---|---|
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. |
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.
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");
});
Example
resizeTo Parameters
Name | Type | Description | Default Value |
---|---|---|---|
width | number/percent | Chart width to set, in pixels or percentage | |
height | number/percent | Chart height to set, in pixels or percentage |
lockResize
Allows users to controls whether the chart will be dynamically resizable or not when rendered using percent height and width.
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);
});
Example
lockResize Parameters
Name | Type | Description | Default Value |
---|---|---|---|
state | boolean | Setting this parameter to true will lock the automatic percentage-based resizing. If resize is already locked, sending |
getSVGString
Returns the SVG string of a chart. This function can be called only after the chart has rendered.
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);
})
});
Example
getSVGString Parameters
Name | Type | Description | Default Value |
---|---|---|---|
callBackFN( svgString ) | getSVGString-callBack | callBackFN is called only when | |
keepImages | keepImages | To get the images present in the chart from the SVG string, set the parameter of |
batchExport
Exports multiple charts in a single image. This method either takes no arguments or takes an object as an argument.
//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();
})
});
Example
batchExport Parameters
Name | Type | Description | Default Value |
---|---|---|---|
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) |
charts | object | 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 | |
charts.x | number | x-coordinate for positioning the exported image | 5 |
getChartData
Fetches the data set when a chart has been rendered.
<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);
}
Example
getChartData Parameters
Name | Type | Description | Default Value |
---|---|---|---|
format | dataFormats | Format in which chart data has to be retrieved |
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 thedataSource
attribute of the FusionTime constructor.
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");
});
setChartData Parameters
Name | Type | Description | Default Value |
---|---|---|---|
data | string/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.
|
getChartAttribute
Fetches value of chart attributes explicitly applied to the root chart
object (or the <chart>
node element).
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);
});
Example
getChartAttribute Parameters
Name | Type | Description | Default Value |
---|---|---|---|
attribute | string/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. |
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).
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);
});
Example
setChartAttribute Parameters
Name | Type | Description | Default Value |
---|---|---|---|
attributes | object/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 |
addEventListener
Used to attach an event to the chart.
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");
});
Example
addEventListener Parameters
Name | Type | Description | Default Value |
---|---|---|---|
type | string/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.
|
removeEventListener
Used to remove an event attached to the chart.
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");
});
Example
removeEventListener Parameters
Name | Type | Description | Default Value |
---|---|---|---|
type | string/array | Type (name) of the event whose listener(s) has to be removed | |
listener | function | Listener function to remove |
getObjectReference
Return the DOM element created by FusionTime in which charts will be rendered <span>
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);
});
Example
getObjectReference Parameters
Name | Type | Description | Default Value |
---|---|---|---|
id | string | ID of the chart, whose |
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.
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);
});
Example
clone Parameters
Name | Type | Description | Default Value |
---|---|---|---|
overrides | object | Object containing instructions for changes in the cloned chart. For example, passing | |
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 |
ready
Accepts a function as an argument and that is executed by FusionTime when the page is ready (library loaded, DOM elements rendered).
//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();
}
}
Example
ready Parameters
Name | Type | Description | Default Value |
---|---|---|---|
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 | [FusionCharts](/api/fusioncharts) |
dataReady
Determines whether a chart will render properly with the data set and returns true or false.
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);
});
});
dataReady Parameters
Name | Type | Description | Default Value |
---|---|---|---|
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 |
hasRendered
Returns true if the chart has rendered successfully, false if it has not.
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);
});
Example
Prints individual charts. It hides all elements on a page except the chart to print and then invokes the page printing function (window.print()
).
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);
});
Example
print Parameters
Name | Type | Description | Default Value |
---|---|---|---|
options | object | Object containing the printing options configured | |
options.hideButtons | boolean | Hides all buttons on the chart | true |
exportChart
Exports a chart as an image or as a PDF document.
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);
});
});
Example
exportChart Parameters
Name | Type | Description | Default Value |
---|---|---|---|
options | object | The | |
options.exportFormat | string | A chart can be exported in one of the following formats: | Export Format | Description | | --------- | :-------------| | | | | png |
options.exportFileName | string | File name for the chart being exported, excluding the extension. The extension is automatically appended depending on the value of | FusionCharts |
options.exportTargetWindow | string | When the | _self |
options.exportHandler | string | URL of the export server |
showChartMessage
Shows a text message on a chart.
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);
});
Example
showChartMessage Parameters
Name | Type | Description | Default Value |
---|---|---|---|
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.
| false |
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.
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
Example
render Parameters
Name | Type | Description | Default Value |
---|---|---|---|
containerElement | string/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 | |
insertMode | DOMInsertModes | Method for inserting the chart's DOM element within the | replace |
callback | renderCallback | Callback function executed after the chart is successfully rendered. If the last parameter to the |
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.
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);
});
Example
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.
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);
});
Example
configure Parameters
Name | Type | Description | Default Value |
---|---|---|---|
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 |
FeedData
Adds data to the chart in real-time.
// 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();
Example
FeedData Parameters
Name | Type | Description | Default Value |
---|---|---|---|
stream | string | Real-time data for charts and gauges. |
getYAxis
Returns the current y-axis options in use.
function update() {
let data = chart.getYAxis()
if (data.plottype === 'column') {
data.plottype = 'area';
} else {
data.plottype = 'column';
}
chart.setYAxis(data)
}
Example
getYAxis Parameters
Name | Type | Description | Default Value |
---|---|---|---|
data | string/object | returns plot type. |
setYAxis
Sets new options and properties for y-axis.
function update() {
let data = chart.getYAxis()
if (data.plottype === 'column') {
data.plottype = 'area';
} else {
data.plottype = 'column';
}
chart.setYAxis(data)
}
Example
setYAxis Parameters
Name | Type | Description | Default Value |
---|---|---|---|
data | string/object | sets plot type. |