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

Were you able to implement this?
chart example will render here

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.

View all

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

Were you able to implement this?
chart example will render here

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.

View all

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

Were you able to implement this?
chart example will render here

setCurrentBin Parameters

Name Type Description Default Value
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.

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

Were you able to implement this?
chart example will render here

getCurrentBin Returned Values

Name Type Description Default Value
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.

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

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 false unlocks it.

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

Were you able to implement this?
chart example will render here

getSVGString Parameters

Name Type Description Default Value
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.

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

Were you able to implement this?
chart example will render here

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
View all

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

Were you able to implement this?
chart example will render here

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 the dataSource 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.

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

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

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 attributes parameter is a single string value, the value parameter contains the value for that key.

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

Were you able to implement this?
chart example will render here

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.

Click here to read more about the eventListener arguments.

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

getObjectReference Parameters

Name Type Description Default Value
id string

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

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

Were you able to implement this?
chart example will render here

clone Parameters

Name Type Description Default Value
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

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

Were you able to implement this?
chart example will render here

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 fn parameter, in a different scope than the default FusionCharts scope, pass the appropriate class object here.

[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

Were you able to implement this?
chart example will render here

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()).

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

Were you able to implement this?
chart example will render here
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

Were you able to implement this?
chart example will render here

exportChart Parameters

Name Type Description Default Value
options object

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
options.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
options.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
options.exportHandler string

URL of the export server

View all

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

Were you able to implement this?
chart example will render here

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.

Applicable only if modal is set to true.

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

Were you able to implement this?
chart example will render here

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 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.

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

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 option parameter has a single value as the key, this parameter is the value of that key.

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

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

Were you able to implement this?
chart example will render here

setYAxis Parameters

Name Type Description Default Value
data string/object

sets plot type.