FusionTime Methods

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");

});

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");

});

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);
      }); 

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);
      }); 

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);

  }) }

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);

  }) }

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");
});

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);
});

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);
  })
});

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();
  
  })
});

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);
}

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"); 
});

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);
});

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);

});

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");
});

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");
});

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);

});

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);

});

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

}
}

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);
});
});

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);

});

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);

});

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);
});
});

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);


});

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

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);

});

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);
});

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