How to use the fusioncharts/fusioncharts.charts function in fusioncharts

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import maps from 'fusioncharts/fusioncharts.maps';
import worldMap from 'fusionmaps/maps/fusioncharts.worldwithcountries';
import TM from 'fusioncharts/themes/fusioncharts.theme.zune';
import $ from 'jquery';


// Load the charts, maps, worldwithcountries module pass FusionCharts as dependency
charts(FusionCharts);
maps(FusionCharts);
worldMap(FusionCharts);

var GTDDashboard = function (options) {

    var _reduce;
    var _countBy;

    /***
    ** Function to convert data in CSV to JSON
    ***/
    var csvToJson = function (csvData) {

        var rows=csvData.split("\n"),
            jsonData=[],
            headers=rows[0].split(","),

import React from 'react';
import ReactDOM from 'react-dom';
import react_fc from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import maps from 'fusioncharts/fusioncharts.maps';
import worldMap from 'fusionmaps/maps/fusioncharts.worldwithcountries';
import TM from 'fusioncharts/themes/fusioncharts.theme.zune';
import $ from 'jquery';


// Load the charts, maps, worldwithcountries module pass FusionCharts as dependency
charts(FusionCharts);
maps(FusionCharts);
worldMap(FusionCharts);

var GTDDashboard = function (options) {

    var _reduce;
    var _countBy;

    /***
    ** Function to convert data in CSV to JSON
    ***/
    var csvToJson = function (csvData) {

        var rows=csvData.split("\n"),
            jsonData=[],
            headers=rows[0].split(","),

$('document').ready(function() {
	// Load the chart module and pass FusionCharts as parameter
	// after the window with a document is ready.
	Charts(FusionCharts);

	// Render chart using insertFusionCharts method
	$('#chart-container').insertFusionCharts({
		type: "Column2D",
		dataFormat: 'json',
		dataSource: { data: [{value: 500}, {value: 300}, {value: 300}]}
	});

	// Convert HTML table to chart using convertToFusionCharts method
	$("#dataTable").convertToFusionCharts({
		    type: "mscolumn2d",
		    width: "700",
		    height: "350",
		    dataFormat: "htmltable",
		    renderAt: "chart-container2"
		}, {

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import TM from 'fusioncharts/themes/fusioncharts.theme.ocean';

// Load the charts module pass FusionCharts as dependency
charts(FusionCharts);

FusionCharts.ready(function () {
    var myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$",
            theme: "ocean"
        },
        data:[{
            label: "Bakersfield Central",
            value: "880000"
        },
        {
            label: "Garden Groove harbour",
            value: "730000"

import React from 'react';
import ReactDOM from 'react-dom';
import react_fc from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import TM from 'fusioncharts/themes/fusioncharts.theme.fint';

// Load the charts module pass FusionCharts as dependency
charts(FusionCharts);

FusionCharts.ready(function () {
    var myDataSource = {
        "chart": {
            "caption": "Sales figures for top 4 chocolate brands - FY2013-2014",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Brand",
            "yAxisName": "Amount (In USD)",
            "yAxisMaxValue": "120000",
            "numberPrefix": "$",
            "theme": "fint",
            "chartBottomMargin": "70",
            "PlotfillAlpha": "0",
            "placeValuesInside": "0",
            "rotateValues": "0",
            "valueFontColor": "#333333"

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import TM from 'fusioncharts/themes/fusioncharts.theme.ocean';

// Load the charts module pass FusionCharts as dependency
charts(FusionCharts);

FusionCharts.ready(function () {

    var myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$",
            theme: "ocean"
        },
        data:[
        {
            label: "Bakersfield Central",
            value: "880000"
        },
        {

import React from 'react';
import ReactDOM from 'react-dom';
import react_fc from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import TM from 'fusioncharts/themes/fusioncharts.theme.ocean';

// Load the charts module pass FusionCharts as dependency
charts(FusionCharts);

FusionCharts.ready(function () {

    var myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$",
            theme: "ocean"
        },
        data:[
        {
            label: "Bakersfield Central",
            value: "880000"
        },
        {

import React from 'react';
import ReactDOM from 'react-dom';
import react_fc from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import oceanIgnore from'fusioncharts/themes/fusioncharts.theme.ocean';

// Load the charts module pass FusionCharts as dependency
charts(FusionCharts);

var myDataSource = {
		chart: {
		  	caption: "Harry's SuperMart",
		  	subCaption: "Top 5 stores in last month by revenue",
		  	numberPrefix: "$",
		  	theme: "ocean"
		},
		data:[
			{
			  	label: "Bakersfield Central",
			  	value: "880000"
			},
			{
			  	label: "Garden Groove harbour",
			  	value: "730000"

import React from 'react';
import ReactDOM from 'react-dom';
import react_fc from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import TM from 'fusioncharts/themes/fusioncharts.theme.ocean';

// Load the charts module pass FusionCharts as dependency
charts(FusionCharts);

FusionCharts.ready(function () {
    var myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$",
            theme: "ocean"
        },
        data:[{
            label: "Bakersfield Central",
            value: "880000"
        },
        {
            label: "Garden Groove harbour",
            value: "730000"

import React from 'react';
import ReactDOM from 'react-dom';
import react_fc from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import maps from 'fusioncharts/fusioncharts.maps';
import usaMap from 'fusioncharts/maps/fusioncharts.usa';
import TM from 'fusioncharts/themes/fusioncharts.theme.fint';


// Load the charts, maps, usaMap module pass FusionCharts as dependency
charts(FusionCharts);
maps(FusionCharts);
usaMap(FusionCharts);

FusionCharts.ready(function () {
    var myDataSource = {
        "chart": {
            "theme": "fint",
            "caption": "Shipping Volume and Costs",
            "subcaption": "Harry's SuperMart Distribution Network - Last Month",
            "showMarkerLabels":"0",
            "numberSuffix": "%",
            //Changing connector hover color
            "connectorHoverColor": "#f8bd19",
            //Changing connector hover thickness
            "connectorHoverThickness": "3",
            //Enabling entity hover effect