Growth of hot tech products
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<script src="https://unpkg.com/fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Web" rel="stylesheet">
<style>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
src: local('Roboto Web SemiBold'), local('RobotoWeb-SemiBold'), url(https://fonts.gstatic.com/s/titilliumweb/v5/anMUvcNT0H1YN4FII8wpr6d1JQt-lS5nD-1TJX2NNl0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
<div id="app">
<div id="chart-container">FusionCharts will render here</div>
</div>
JavaScript
var app = new Vue({
el: '#app',
created: function() {
FusionCharts.ready(function () {
var salesChart = new FusionCharts({
type: 'MSColumn2D',
renderAt: 'chart-container',
width: '550',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Growth of hot tech products",
"subcaption": "YoY Sales in USD",
"decimals": "0",
"numberprefix": "$",
"baseFont": "Roboto",
"baseFontSize": "14",
"showAlternateVGridColor": "1",
"alternateVGridAlpha": "5",
"labelFontSize": "15",
"captionFontSize": "20",
"subCaptionFontSize": "16",
"placevaluesinside": "1",
"rotatevalues": "0",
"divlinealpha": "50",
"paletteColors": "#1B5E20, #0091EA",
"plotfillalpha": "80",
"drawCrossLine": "1",
"crossLineColor": "#cc3300",
"crossLineAlpha": "100",
"theme": "ocean"
},
"categories": [{
"category": [
{
"label": "Wearables"
},
{
"label": "Smart Home"
},
{
"label": "4K UHD TV"
},
{
"label": "Smart Speakers"
},
{
"label": "VR"
},
{
"label": "Drones"
}
]
}],
"dataset": [{
"seriesname": "2016",
"data": [{
"value": "43680000"
},
{
"value": "13500000"
},
{
...