Rendering Different Charts

// Define the categories representing the labels on the X-axis
const categories =  [
  {
    "category": [
      { "label": "Q1" },
      { "label": "Q2" },
      { "label": "Q3" },
      { "label": "Q4" }
    ]
  }
]
// Construct the dataset comprising multiple series 
const dataset = [
  {
    "seriesname": "Previous Year",
    "data": [
      { "value": "12000" },
      { "value": "10500" },
      { "value": "23500" },
      { "value": "16000" }
    ]
  },
  {
    "seriesname": "Current Year",
    "data": [
      { "value": "24400" },
      { "value": "29800" },
      { "value": "20800" },
      { "value": "26800" }
    ]
  }
]COPY

// STEP 1: Include the dependencies
<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);

//STEP 2- Define the categories representing the labels on the X-axis
const categories = [{
    "category": [{
            "label": "Q1"
        },
        {
            "label": "Q2"
        },
        {
            "label": "Q3"
        },
        {
            "label": "Q4"
        }
    ]
}]
//STEP 3- Construct the dataset comprising multiple series
const dataset = [{
        "seriesname": "Previous Year",
        "data": [{
                "value": "12000"
            },
            {
                "value": "10500"
            },
            {
                "value": "23500"
            },
            {
                "value": "16000"
            }
        ]
    },
    {
        "seriesname": "Current Year",
        "data": [{
                "value": "24400"
            },
            {
                "value": "29800"
            },
            {
                "value": "20800"
            },
            {
                "value": "26800"
            }
        ]
    }
]

// STEP 4: Configure your chart
const dataSource = {
    chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subcaption: "In MMbbl = One Million barrels",
        xaxisname: "Country",
        yaxisname: "Reserves (MMbbl)",
        numbersuffix: "K",
        theme: "fusion"
    },
    categories: categories,
    dataset: dataset
};

export default {
    name: 'app',
    data() {
        return {
            "type": "mscolumn2d",
            "renderAt": "chart-container",
            "width": "550",
            "height": "350",
            "dataFormat": "json",
            dataSource
        }
    }
} <
/script>

//STEP 5: Render the chart
<template>
    <div id = "app">
    <div id = "chart-container">
    <fusioncharts: type = "type": width = "width": height = "height": dataformat = "dataFormat": dataSource = "dataSource">
    </fusioncharts>
    </div>
    </div>
</template>COPY

// Define the categories representing the labels on the X-axis
const categories =  [
  {
    "category": [
        {"label": "Jan"},
        {"label": "Feb"},
        {"label": "Mar"},
        {"label": "Apr"},
        {"label": "May"},
        {"label": "Jun"},
        {"label": "Jul"},
        {"label": "Aug"},
        {"label": "Sep"},
        {"label": "Oct"},
        {"label": "Nov"},
        {"label": "Dec"}
    ]
  }
]
// Construct the dataset comprising multiple series
const dataset = [
  {
    "seriesname": "Actual Revenue",
    "renderAs": "column",
    "data": [
        {"value": "16000"},
        {"value": "20000"},
        {"value": "18000"},
        {"value": "19000"},
        {"value": "15000"},
        {"value": "21000"},
        {"value": "16000"},
        {"value": "20000"},
        {"value": "17000"},
        {"value": "25000"},
        {"value": "19000"},
        {"value": "23000"}
    ]
  },
  {
    "seriesname": "Projected Revenue",
    "renderAs": "line",
    "data": [
        {"value": "15000"},
        {"value": "16000"},
        {"value": "17000"},
        {"value": "18000"},
        {"value": "19000"},
        {"value": "19000"},
        {"value": "19000"},
        {"value": "19000"},
        {"value": "20000"},
        {"value": "21000"},
        {"value": "22000"},
        {"value": "23000"}
    ]
  },
  {
    "seriesName": "Profit",
    "renderAs": "area",
    "data": [
        {"value": "4000"},
        {"value": "5000"},
        {"value": "3000"},
        {"value": "4000"},
        {"value": "1000"},
        {"value": "7000"},
        {"value": "1000"},
        {"value": "4000"},
        {"value": "1000"},
        {"value": "8000"},
        {"value": "2000"},
        {"value": "7000"}
    ]
}
]COPY

// STEP 1: Include the dependencies
<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);

// STEP 2: Prepare the data
const categories = [{
    "category": [{
            "label": "Jan"
        },
        {
            "label": "Feb"
        },
        {
            "label": "Mar"
        },
        {
            "label": "Apr"
        },
        {
            "label": "May"
        },
        {
            "label": "Jun"
        },
        {
            "label": "Jul"
        },
        {
            "label": "Aug"
        },
        {
            "label": "Sep"
        },
        {
            "label": "Oct"
        },
        {
            "label": "Nov"
        },
        {
            "label": "Dec"
        }
    ]
}]
// STEP 3- Construct the dataset comprising combination series
const dataset = [{
        "seriesName": "Actual Revenue",
        "showValues": "1",
        "data": [{
                "value": "16000"
            },
            {
                "value": "20000"
            },
            {
                "value": "18000"
            },
            {
                "value": "19000"
            },
            {
                "value": "15000"
            },
            {
                "value": "21000"
            },
            {
                "value": "16000"
            },
            {
                "value": "20000"
            },
            {
                "value": "17000"
            },
            {
                "value": "25000"
            },
            {
                "value": "19000"
            },
            {
                "value": "23000"
            }
        ]
    },
    {
        "seriesName": "Projected Revenue",
        "renderAs": "line",
        "data": [{
                "value": "15000"
            },
            {
                "value": "16000"
            },
            {
                "value": "17000"
            },
            {
                "value": "18000"
            },
            {
                "value": "19000"
            },
            {
                "value": "19000"
            },
            {
                "value": "19000"
            },
            {
                "value": "19000"
            },
            {
                "value": "20000"
            },
            {
                "value": "21000"
            },
            {
                "value": "22000"
            },
            {
                "value": "23000"
            }
        ]
    },
    {
        "seriesName": "Profit",
        "renderAs": "area",
        "data": [{
                "value": "4000"
            },
            {
                "value": "5000"
            },
            {
                "value": "3000"
            },
            {
                "value": "4000"
            },
            {
                "value": "1000"
            },
            {
                "value": "7000"
            },
            {
                "value": "1000"
            },
            {
                "value": "4000"
            },
            {
                "value": "1000"
            },
            {
                "value": "8000"
            },
            {
                "value": "2000"
            },
            {
                "value": "7000"
            }
        ]
    }
]

// STEP 4: Configure your chart
const dataSource = {
    "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Sales analysis of last year",
        "xAxisname": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "divlineColor": "#999999",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "theme": "fusion"
    },
    categories: categories,
    dataset: dataset
};

export default {
    name: 'app',
    data() {
        return {
            "type": "mscombi2d",
            "renderAt": "chart-container",
            "width": "550",
            "height": "350",
            "dataFormat": "json",
            dataSource
        }
    }
} </script>


//STEP 5: Render the chart
<template>
    <div id = "app">
    <div id = "chart-container">
    <fusioncharts: type = "type": width = "width": height = "height": dataformat = "dataFormat": dataSource = "dataSource">
    </fusioncharts>
    </div>
    </div>
</template>COPY

// Define the category representing the labels on the X-axis
const categories =  [{
    "category": [
      { "label": "Day Start" },
    ]
}]
// Construct the dataset
const dataset = [{
    "data": [
      { "value": "35.27" },
    ]
}]COPY

function addLeadingZero(num) {
    return (num <= 9) ? ("0" + num) : num;
}

function updateData() {
    // Get reference to the chart using its ID(stockRealTimeChart)
    var chartRef = FusionCharts("stockRealTimeChart"),
    // We need to create a querystring format incremental update, containing
    // label in hh:mm:ss format
    // and a value (random).
    currDate = new Date(),
    label = addLeadingZero(currDate.getHours()) + ":" +
    addLeadingZero(currDate.getMinutes()) + ":" +
    addLeadingZero(currDate.getSeconds()),
    // Get random number between 35.25 & 35.75 - rounded to 2 decimal places
    randomValue = Math.floor(Math.random() *50) / 100 + 35.25,
    // Build Data String in format &label=...&value=...
    strData = "&label=" + label + "&value=" + randomValue;
    // Feed it to the chart. chartRef is the instance of the chart.
    chartRef.feedData(strData);
}COPY

// STEP 1: Include the dependencies
<script>
import Vue from "vue";
import VueFusionCharts from "vue-fusioncharts";
import FusionCharts from "fusioncharts";
import RealTimeArea from "fusioncharts/fusioncharts.widgets";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

Vue.use(VueFusionCharts, FusionCharts, RealTimeArea, FusionTheme);

//STEP 2 - Chart Data
// Define the categories representing the labels on the X-axis
const categories = [{
    "category": [{
        "label": "Day Start"
    }]
}];
// Construct the dataset comprising multiple series
const dataset = [{
    "data": [{
        "value": "35.27"
    }]
}];

// STEP 3: Configure your chart
const dataSource = {
    "chart": {
        "theme": "fusion",
        "caption": "Real-time stock price monitor",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Time",
        "yAxisName": "Stock Price",
        "numberPrefix": "$",
        "refreshinterval": "5",
        "yaxisminvalue": "35",
        "yaxismaxvalue": "36",
        "numdisplaysets": "10",
        "labeldisplay": "rotate",
        "showRealTimeValue": "0"

    },
    "categories": categories,
    "dataset": dataset
};

export default {
    name: 'app',
    data() {
        return {
            "id": "stockRealTimeChart",
            "type": 'realtimearea',
            "renderAt": 'chart-container',
            "width": '700',
            "height": '400',
            "dataFormat": 'json',
            dataSource,
            "events": {
                "initialized": function() {
                    setInterval(function() {
                        function addLeadingZero(num) {
                            return (num <= 9) ? ("0" + num) : num;
                        }

                        function updateData() {
                            // Get reference to the chart using its ID
                            var chartRef = FusionCharts("stockRealTimeChart"),
                                // We need to create a querystring format incremental update, containing
                                // label in hh:mm:ss format
                                // and a value (random).
                                currDate = new Date(),
                                label = addLeadingZero(currDate.getHours()) + ":" +
                                addLeadingZero(currDate.getMinutes()) + ":" +
                                addLeadingZero(currDate.getSeconds()),
                                // Get random number between 35.25 & 35.75 - rounded to 2 decimal places
                                randomValue = Math.floor(Math.random() *
                                    1) / 100 + 35.25,
                                // Build Data String in format &label=...&value=...
                                strData = "&label=" + label +
                                "&value=" +
                                randomValue;
                            // Feed it to chart.
                            chartRef.feedData(strData);
                        }
                        updateData();
                    }, 3000);
                }
            }
        }
    }
} 
</script>

//STEP 4: Render the chart
<template >
    <div id = "app">
    <div id = "chart-container">
    <fusioncharts: id = "id": type = "type": width = "width": height = "height": dataformat = "dataFormat": dataSource = "dataSource": events = "events">
    </fusioncharts> 
    </div> 
    </div> 
</template>COPY

  // Define the colorVariations of the angular gauge
  const colorRange = {
    "color": [
      {
        "minValue": "0",
        "maxValue": "50",
        "code": "#F2726F"
      },
      {
        "minValue": "50",
        "maxValue": "75",
        "code": "#FFC533"
      },
      {
        "minValue": "75",
        "maxValue": "100",
        "code": "#62B58F"
      }
    ]
  };
  //Set up the dial value
  const dials = {
    "dial": [
      {
        "value": "81"
      }
    ]
  }COPY

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!-- Include fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Include fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    // Define the colorVariations of the angular gauge
    const colorRange = {
    "color": [{
        "minValue": "0",
        "maxValue": "50",
        "code": "#F2726F"
        },{
        "minValue": "50",
        "maxValue": "75",
        "code": "#FFC533"
        },{
        "minValue": "75",
        "maxValue": "100",
        "code": "#62B58F"
        }]
    };
    //Set up the dial value
    const dials = {
        "dial": [
            {"value": "81"}
        ]
    };

    //STEP 3 - Chart Configurations
    var chartConfigurations = {
        type: 'angulargauge', // The gauge type
        width: '450', // Width of the gauge
        height: '250', // Height of the gauge
        dataFormat: 'json', // Data type
        renderAt:'chart-container', //Container where the chart will render
        dataSource: {
            // Gauge Configuration
            "chart": {
                "caption": "Nordstrom's Customer Satisfaction Score for 2017",
                "lowerLimit": "0",
                "upperLimit": "100",
                "showValue": "1",
                "numberSuffix": "%",
                "theme": "fusion",
                "showToolTip": "0"
            },
            // Chart Data
            "colorRange": colorRange,
            "dials": dials
        }
    }

    FusionCharts.ready(function(){
        var fusioncharts = new FusionCharts(chartConfigurations);
    fusioncharts.render();
    });

</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>COPY

// Define the colorVariations of the angular gauge
const colorRange = {
    "minvalue": "0",
    "code": "#FFE0B2",
    "gradient": "1",
    "color": [{
        "minvalue": "0.5",
        "maxvalue": "1.0",
        "color": "#FFD74D"
    }, {
        "minvalue": "1.0",
        "maxvalue": "2.0",
        "color": "#FB8C00"
    }, {
        "minvalue": "2.0",
        "maxvalue": "3.0",
        "color": "#E65100"
    }]
};
//Set up the Map's data
const data = [{
    "id": "NA",
    "value": ".82",
    "showLabel": "1"
}, {
    "id": "SA",
    "value": "2.04",
    "showLabel": "1"
}, {
    "id": "AS",
    "value": "1.78",
    "showLabel": "1"
}, {
    "id": "EU",
    "value": ".40",
    "showLabel": "1"
}, {
    "id": "AF",
    "value": "2.58",
    "showLabel": "1"
}, {
    "id": "AU",
    "value": "1.30",
    "showLabel": "1"
}];COPY

// STEP 1: Include the dependencies
<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import FusionMaps from 'fusioncharts/maps/es/fusioncharts.world';
import World from 'fusioncharts/fusioncharts.maps'
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, FusionMaps, World, FusionTheme);
//STEP 2 - Define the dataset and the colorRange of the map
const dataset = [{
    "id": "NA",
    "value": ".82",
    "showLabel": "1"
    }, {
    "id": "SA",
    "value": "2.04",
    "showLabel": "1"
    }, {
    "id": "AS",
    "value": "1.78",
    "showLabel": "1"
    }, {
    "id": "EU",
    "value": ".40",
    "showLabel": "1"
    }, {
    "id": "AF",
    "value": "2.58",
    "showLabel": "1"
    }, {
    "id": "AU",
    "value": "1.30",
    "showLabel": "1"
  }];
const colorrange = {
  "minvalue": "0",
  "code": "#FFE0B2",
  "gradient": "1",
  "color":
  [{
    "minvalue": "0.5",
    "maxvalue": "1.0",
    "color": "#FFD74D"
    }, {
    "minvalue": "1.0",
    "maxvalue": "2.0",
    "color": "#FB8C00"
    }, {
    "minvalue": "2.0",
    "maxvalue": "3.0",
    "color": "#E65100"
  }]
};
// STEP 3: Configure your chart
const dataSource = {
    // Map Configuration
    "chart": {
      "caption": "Average Annual Population Growth",
      "subcaption": " 1955-2015",
      "numbersuffix": "%",
      "includevalueinlabels": "1",
      "labelsepchar": ": ",
      "entityFillHoverColor": "#FFF9C4",
      "theme": "fusion"
    },
    // Aesthetics; ranges synced with the slider
    "colorrange": colorrange,
    // Source data as JSON --> id represents countries of the world.
    "data": dataset
  }
export default {
  name: 'app',
  data() {
    return {
      "type": "world",
      "renderAt": "chart-container",
      "width": "550",
      "height": "350",
      "dataFormat": "json",
      dataSource
    }
  }
}
</script>
//STEP 4: Render the chart
<template>
  <div id="app">
    <div id="chart-container">
      <fusioncharts
      :type="type"
      :width="width"
      :height="height"
      :dataformat="dataFormat"
      :dataSource="dataSource"
      >
      </fusioncharts>
    </div>
  </div>
</template>COPY

<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import FusionMaps from 'fusioncharts/fusioncharts.maps';
import California from 'fusionmaps/maps/fusioncharts.california';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, FusionMaps, California, FusionTheme);

const mapData = [{"id":"001","value":2834},{"id":"003","value":3182},{"id":"005","value":3280},{"id":"007","value":911},{"id":"009","value":292},{"id":"011","value":530},{"id":"013","value":2515},{"id":"015","value":728},{"id":"017","value":1974},{"id":"019","value":848},{"id":"021","value":3278},{"id":"023","value":4463},{"id":"025","value":1198},{"id":"027","value":378},{"id":"029","value":2610},{"id":"031","value":1200},{"id":"033","value":3820},{"id":"035","value":940},{"id":"037","value":3416},{"id":"039","value":4004},{"id":"041","value":1604},{"id":"043","value":4011},{"id":"045","value":3203},{"id":"047","value":3775},{"id":"049","value":2721},{"id":"051","value":3417},{"id":"053","value":1530},{"id":"055","value":412},{"id":"057","value":3434},{"id":"059","value":1670},{"id":"061","value":1274},{"id":"063","value":4339},{"id":"065","value":2073},{"id":"067","value":1018},{"id":"069","value":3967},{"id":"071","value":3401},{"id":"073","value":3307},{"id":"075","value":1938},{"id":"077","value":489},{"id":"079","value":3207},{"id":"081","value":2295},{"id":"083","value":2747},{"id":"085","value":1114},{"id":"087","value":3400},{"id":"089","value":784},{"id":"091","value":1673},{"id":"093","value":4274},{"id":"095","value":4509},{"id":"097","value":3862},{"id":"099","value":1356},{"id":"101","value":4126},{"id":"103","value":1314},{"id":"105","value":1807},{"id":"107","value":4026},{"id":"109","value":3456},{"id":"111","value":1393},{"id":"113","value":1500},{"id":"115","value":2218}];

const colorrange = {
  "minvalue": "0",
  "startlabel": "Low",
  "endlabel": "High",
  "code": "e44a00",
  "gradient": "1",
  "color": [{"maxvalue": "2500", "code": "f8bd19"}, {"maxvalue": "5000", "code": "6baa01"}]
};

const mapConfigs = {
   "type": "california",
   "renderAt": "chart-container",
   "width": "550",
   "height": "350",
   "dataFormat": "json",
   "datasource": {
      // Map Configuration
      "chart": {
        "animation": "0",
        "showbevel": "0",
        "usehovercolor": "1",
        "showlegend": "1",
        "legendposition": "BOTTOM",
        "legendborderalpha": "0",
        "legendbordercolor": "ffffff",
        "legendallowdrag": "0",
        "legendshadow": "0",
        "caption": "Website Visits for the month of March 2018",
        "connectorcolor": "000000",
        "fillalpha": "80",
        "hovercolor": "CCCCCC",
        "theme": "fusion"
      },
      "colorrange": colorrange,
      "data": mapData
    }
}

export default {
  name: 'app',
  data () {
    return mapConfigs
}
}
 </script>
<template>
  <div id="app">
    <div id="chart-container">
    <fusioncharts
     :type="type"
     :width="width"
     :height="height"
     :dataformat="dataformat"
     :datasource="datasource"
>
</fusioncharts>
    </div>
  </div>
</template>COPY

const rows = {
    "row": [
        {
            "id": "SGS5",
            "label": "Samsung Galaxy S5"
        },
        {
            "id": "HTC1M8",
            "label": "HTC One (M8)"
        },
        {
            "id": "IPHONES5",
            "label": "Apple iPhone 5S"
        },
        {
            "id": "LUMIA",
            "label": "Nokia Lumia 1520"
        }
    ]
};
const columns = {
    "column": [
        {
            "id": "processor",
            "label": "Processor"
        },
        {
            "id": "screen",
            "label": "Screen Size"
        },
        {
            "id": "price",
            "label": "Price"
        },
        {
            "id": "backup",
            "label": "Battery Backup"
        },
        {
            "id": "cam",
            "label": "Camera"
        }
    ]
};
const dataset =[{
    "data": [
        {
            "rowid": "SGS5",
            "columnid": "processor",
            "value": "8.7",
            "tllabel": "Quad Core 2.5 GHz",
            "trlabel": "OS : Android 4.4 Kitkat"
        },
        {
            "rowid": "SGS5",
            "columnid": "screen",
            "value": "8.5",
            "tllabel": "5.1 inch",
            "trlabel": "AMOLED screen"
        },
        {
            "rowid": "SGS5",
            "columnid": "price",
            "value": "9.3",
            "tllabel": "$600"
        },
        {
            "rowid": "SGS5",
            "columnid": "backup",
            "value": "9.7",
            "tllabel": "29 Hrs",
            "trlabel": "Battery : 2800 MAH"
        },
        {
            "rowid": "SGS5",
            "columnid": "cam",
            "value": "8",
            "tllabel": "16 MP",
            "trlabel": "Front Camera : 2.1 MP"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "processor",
            "value": "9.2",
            "tllabel": "Quad Core 2.3 GHz",
            "trlabel": "OS : Android 4.4 Kitkat"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "screen",
            "value": "8.3",
            "tllabel": "5 inch",
            "trlabel": "LCD screen"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "price",
            "value": "7.3",
            "tllabel": "$600"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "backup",
            "value": "8.8",
            "tllabel": "20 Hrs",
            "trlabel": "Battery : 2600 MAH"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "cam",
            "value": "8.7",
            "tllabel": "4 MP",
            "trlabel": "Front Camera : 5 MP"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "processor",
            "value": "9.1",
            "tllabel": "Dual Core",
            "trlabel": "OS : iOS 7"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "screen",
            "value": "8.6",
            "tllabel": "4 inch",
            "trlabel": "Retina LCD screen"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "price",
            "value": "7.2",
            "tllabel": "$649"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "backup",
            "value": "8.4",
            "tllabel": "10 Hrs",
            "trlabel": "Battery : 1560 MAH"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "cam",
            "value": "9.5",
            "tllabel": "8 MP",
            "trlabel": "Front Camera : 1.2 MP"
        },
        {
            "rowid": "LUMIA",
            "columnid": "processor",
            "value": "8.8",
            "tllabel": "Quad Core 2.2 GHz",
            "trlabel": "OS: Windows Phone 8"
        },
        {
            "rowid": "LUMIA",
            "columnid": "screen",
            "value": "9.1",
            "tllabel": "6 inch",
            "trlabel": "LCD screen"
        },
        {
            "rowid": "LUMIA",
            "columnid": "price",
            "value": "9.7",
            "tllabel": "$470"
        },
        {
            "rowid": "LUMIA",
            "columnid": "backup",
            "value": "9.2",
            "tllabel": "27 Hrs",
            "trlabel": "Battery : 3400 MAH"
        },
        {
            "rowid": "LUMIA",
            "columnid": "cam",
            "value": "8.1",
            "tllabel": "20MP",
            "trlabel": "Front Camera : 1.2 MP"
        }
    ]
}];
const colorRange = {
    "gradient": "0",
    "minvalue": "0",
    "code": "E24B1A",
    "startlabel": "Poor",
    "endlabel": "Good",
    "color": [
        {
            "code": "E24B1A",
            "minvalue": "1",
            "maxvalue": "5",
            "label": "Bad"
        },
        {
            "code": "F6BC33",
            "minvalue": "5",
            "maxvalue": "8.5",
            "label": "Average"
        },
        {
            "code": "6DA81E",
            "minvalue": "8.5",
            "maxvalue": "10",
            "label": "Good"
        }
    ]
};COPY

// STEP 1: Include the dependencies
<script>
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import PowerCharts from "fusioncharts/fusioncharts.powercharts";
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

Vue.use(VueFusionCharts, FusionCharts, PowerCharts, FusionTheme);

//STEP 2 - Define the chart data constituting dataset and colorrange objects

const dataset = [{
  "data": [{
      "rowid": "Samsung Galaxy S5",
      "columnid": "Processor",
      "value": "8.7",
      "tllabel": "Quad Core 2.5 GHz",
      "trlabel": "OS : Android 4.4 Kitkat"
    },
    {
      "rowid": "Samsung Galaxy S5",
      "columnid": "Screen Size",
      "value": "8.5",
      "tllabel": "5.1 inch",
      "trlabel": "AMOLED screen"
    },
    {
      "rowid": "Samsung Galaxy S5",
      "columnid": "Price",
      "value": "9.3",
      "tllabel": "$600"
    },
    {
      "rowid": "Samsung Galaxy S5",
      "columnid": "Battery Backup",
      "value": "9.7",
      "tllabel": "29 Hrs",
      "trlabel": "Battery : 2800 MAH"
    },
    {
      "rowid": "Samsung Galaxy S5",
      "columnid": "Camera",
      "value": "8",
      "tllabel": "16 MP",
      "trlabel": "Front Camera : 2.1 MP"
    },
    {
      "rowid": "HTC One (M8)",
      "columnid": "Processor",
      "value": "9.2",
      "tllabel": "Quad Core 2.3 GHz",
      "trlabel": "OS : Android 4.4 Kitkat"
    },
    {
      "rowid": "HTC One (M8)",
      "columnid": "Screen Size",
      "value": "8.3",
      "tllabel": "5 inch",
      "trlabel": "LCD screen"
    },
    {
      "rowid": "HTC One (M8)",
      "columnid": "Price",
      "value": "7.3",
      "tllabel": "$600"
    },
    {
      "rowid": "HTC One (M8)",
      "columnid": "Battery Backup",
      "value": "8.8",
      "tllabel": "20 Hrs",
      "trlabel": "Battery : 2600 MAH"
    },
    {
      "rowid": "HTC One (M8)",
      "columnid": "Camera",
      "value": "8.7",
      "tllabel": "4 MP",
      "trlabel": "Front Camera : 5 MP"
    },
    {
      "rowid": "Apple iPhone 5S",
      "columnid": "Processor",
      "value": "9.1",
      "tllabel": "Dual Core",
      "trlabel": "OS : iOS 7"
    },
    {
      "rowid": "Apple iPhone 5S",
      "columnid": "Screen Size",
      "value": "8.6",
      "tllabel": "4 inch",
      "trlabel": "Retina LCD screen"
    },
    {
      "rowid": "Apple iPhone 5S",
      "columnid": "Price",
      "value": "7.2",
      "tllabel": "$649"
    },
    {
      "rowid": "Apple iPhone 5S",
      "columnid": "Battery Backup",
      "value": "8.4",
      "tllabel": "10 Hrs",
      "trlabel": "Battery : 1560 MAH"
    },
    {
      "rowid": "Apple iPhone 5S",
      "columnid": "Camera",
      "value": "9.5",
      "tllabel": "8 MP",
      "trlabel": "Front Camera : 1.2 MP"
    },
    {
      "rowid": "Nokia Lumia 1520",
      "columnid": "Processor",
      "value": "8.8",
      "tllabel": "Quad Core 2.2 GHz",
      "trlabel": "OS: Windows Phone 8"
    },
    {
      "rowid": "Nokia Lumia 1520",
      "columnid": "Screen Size",
      "value": "9.1",
      "tllabel": "6 inch",
      "trlabel": "LCD screen"
    },
    {
      "rowid": "Nokia Lumia 1520",
      "columnid": "Price",
      "value": "9.7",
      "tllabel": "$470"
    },
    {
      "rowid": "Nokia Lumia 1520",
      "columnid": "Battery Backup",
      "value": "9.2",
      "tllabel": "27 Hrs",
      "trlabel": "Battery : 3400 MAH"
    },
    {
      "rowid": "Nokia Lumia 1520",
      "columnid": "Camera",
      "value": "8.1",
      "tllabel": "20MP",
      "trlabel": "Front Camera : 1.2 MP"
    }
  ]
}];

const colorrange = {
  "gradient": "0",
  "minvalue": "0",
  "code": "E24B1A",
  "startlabel": "Poor",
  "endlabel": "Good",
  "color": [{
      "code": "E24B1A",
      "minvalue": "1",
      "maxvalue": "5",
      "label": "Bad"
    },
    {
      "code": "F6BC33",
      "minvalue": "5",
      "maxvalue": "8.5",
      "label": "Average"
    },
    {
      "code": "6DA81E",
      "minvalue": "8.5",
      "maxvalue": "10",
      "label": "Good"
    }
  ]
};

// STEP 3: Configure your chart
const dataSource = {
        "chart": {
          "caption": "Top Smartphone Ratings",
          "subcaption": "By Features",
          "xAxisName": "Features",
          "yAxisName": "Model",
          "showPlotBorder": "1",
          "xAxisLabelsOnTop": "1",
          "plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
          //Cosmetics
          "showValues": "1",
          "showBorder": "0",
          "bgColor": "#ffffff",
          "showShadow": "0",
          "usePlotGradientColor": "0",
          "toolTipColor": "#ffffff",
          "toolTipBorderThickness": "0",
          "toolTipBgColor": "#000000",
          "toolTipBgAlpha": "80",
          "toolTipBorderRadius": "2",
          "toolTipPadding": "5",
          "theme": "fusion"
        },
        "dataset": dataset,
        "colorrange": colorrange
      }


export default {
  name: 'app',
  data() {
    return {
      "type": "heatmap",
      "renderAt": "chart-container",
      "width": "550",
      "height": "350",
      "dataFormat": "json",
      dataSource
    }
  }
}
</script>

//STEP 4: Render the chart
<template>
  <div id="app">
    <div id="chart-container">
      <fusioncharts
      :type="type"
      :width="width"
      :height="height"
      :dataformat="dataFormat"
      :dataSource="dataSource"
      >
      </fusioncharts>
    </div>
  </div>
</template>COPY