JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
<textarea name="text" id="text" cols="30" rows="10"></textarea>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
var url = 'https://projectec-edbbb.firebaseio.com/Demo4.json?auth=nDiZHVYp8XIN5d38vGiyhZ7cK5l1ky67dEB9gpAF';
$.getJSON(url,
function(data) {
var points = [],
categoryPoints,
categoryVal,
categoryI = 0,
issueTypePoints,
issueTypeI,
currencyPoints,
currencyI,
periodPoints,
periodI,
ECHoldingPoints,
ECHoldingI,
ECConcentrationPoints,
ECConcentrationI,
ECBPoints,
ECBI,
issueCountryPoints,
issueCountryI,
issueNamePoints,
issueNameI,
ISINPoints,
ISINI,
monthPoints,
monthI,
category,
issueType,
currency,
period,
ECHolding,
ECConcentration,
ECB,
issueCountry,
IssueName,
ISIN,
month,
mil,
causeMil,
causeMilI,
causeName = {};
for (category in data) {
if (data.hasOwnProperty(category)) {
categoryVal = 0;
categoryPoints = {
id: 'id_' + categoryI,
name: category,
color: Highcharts.getOptions().colors[categoryI]
};
issueTypeI = 0;
for (issueType in data[category]) {
if (data[category].hasOwnProperty(issueType)) {
issueTypePoints = {
id: categoryPoints.id + '_' + issueTypeI,
name: issueType,
parent: categoryPoints.id,
};
points.push(issueTypePoints);
currencyI = 0;
for (currency in data[category][issueType]) {
if (data[category][issueType].hasOwnProperty(currency)) {
currencyPoints = {
id: issueTypePoints.id + '_' + currencyI,
name: currency,
parent: issueTypePoints.id
};
...