<html>
<head>
ย ย ย ย ย ย <title>Visualize Data Trends with Stacked Column Charts – Froala</title>
ย
ย ย ย ย <scriptย src=https://cdn.fusioncharts.com/fusioncharts/froalacharts/froalacharts.js></script>
ย ย ย ย <scriptย src=”https://cdn.fusioncharts.com/fusioncharts/froalacharts/froalacharts.theme.froala.js”></script>
ย ย ย ย ย ย <scriptย type=”text/javascript”>
ย ย ย ย ย ย ย ย varย dataย =ย {
ย ย ย ย ย ย ย ย ย ย ย ย chart:ย {
ย ย ย ย caption:ย “Yearlyย Energyย Productionย Rate”,
ย ย ย ย subcaption:ย ”ย Topย 5ย Developedย Countries”,
ย ย ย ย numbersuffix:ย ”ย TWh”,
ย ย ย ย showsum:ย “1”,
ย ย ย ย plottooltext:
ย ย ย ย ย ย “$labelย producesย <b>$dataValue</b>ย ofย energyย fromย $seriesName”,
ย ย ย ย theme:ย “froala”,
ย ย ย ย drawcrossline:ย “1”
ย ย },
ย ย categories:ย [
ย ย ย ย {
ย ย ย ย ย ย category:ย [
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย label:ย “Canada”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย label:ย “China”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย label:ย “Russia”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย label:ย “Australia”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย label:ย “Unitedย States”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย label:ย “France”
ย ย ย ย ย ย ย ย }
ย ย ย ย ย ย ]
ย ย ย ย }
ย ย ],
ย ย dataset:ย [
ย ย ย ย {
ย ย ย ย ย ย seriesname:ย “Coal”,
ย ย ย ย ย ย data:ย [
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “400”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “830”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “500”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “420”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “790”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “380”
ย ย ย ย ย ย ย ย }
ย ย ย ย ย ย ]
ย ย ย ย },
ย ย ย ย {
ย ย ย ย ย ย seriesname:ย “Hydro”,
ย ย ย ย ย ย data:ย [
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “350”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “620”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “410”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “370”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “720”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “310”
ย ย ย ย ย ย ย ย }
ย ย ย ย ย ย ]
ย ย ย ย },
ย ย ย ย {
ย ย ย ย ย ย seriesname:ย “Nuclear”,
ย ย ย ย ย ย data:ย [
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “210”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “400”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “450”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “180”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “570”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “270”
ย ย ย ย ย ย ย ย }
ย ย ย ย ย ย ]
ย ย ย ย },
ย ย ย ย {
ย ย ย ย ย ย seriesname:ย “Gas”,
ย ย ย ย ย ย data:ย [
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “180”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “330”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “230”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “160”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “440”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “350”
ย ย ย ย ย ย ย ย }
ย ย ย ย ย ย ]
ย ย ย ย },
ย ย ย ย {
ย ย ย ย ย ย seriesname:ย “Oil”,
ย ย ย ย ย ย data:ย [
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “60”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “200”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “200”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “50”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “230”
ย ย ย ย ย ย ย ย },
ย ย ย ย ย ย ย ย {
ย ย ย ย ย ย ย ย ย ย value:ย “150”
ย ย ย ย ย ย ย ย }
ย ย ย ย ย ย ]
ย ย ย ย }
ย ย ]
};
ย ย ย ย ย ย ย ย FroalaCharts.ready(functionย ()ย {
ย ย ย ย ย ย ย ย ย ย FroalaCharts.options.license({
key:’rpI3xgkA3D5B3A4D4I4E3C10A6E2B2E2oyjG1C3C8D4E3D2C2C3I2H1B10D3D1F4D5D3B-8I-8G7B6A6E3tB2C1C1uomB1E6B1C3F3B2A21A14B14A8D8blA-9H4C2B2A1A1A1E7B1E5E4B1C3B9A4e==’,
creditLabel:ย falseย })
ย ย ย ย ย ย ย ย ย ย ย ย newย FroalaCharts({
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย id:ย “chart_1”,
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย type:ย ‘stackedcolumn’,
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย renderAt:ย ‘ft’,
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย width:ย ‘800’,
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย height:ย ‘500’,
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย dataSource:ย data
ย ย ย ย ย ย ย ย ย ย ย ย }).render();
ย ย ย ย ย ย ย ย });
ย ย ย ย </script>
ย
</head>
<divย id=”msg”ย class=”mb-20″>ย Chartย dataย inย theย selectedย formatย willย beย displayedย here.</div>
<body>
ย ย ย ย <divย id=”ft”>FroalaChartย willย renderย here</div>
</body>
</html>