JSFiddle - React, Tailwind, and code Playground
HTML
<body>
{{> chart}}
</body>
<template name="chart">
<div id="container"></div>
</template>
JavaScript
// Code from the server side main.js file
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';
Meteor.methods({
loadData() {
try {
return HTTP.get('https://projectec-edbbb.firebaseio.com/Demo4.json?auth=nDiZHVYp8XIN5d38vGiyhZ7cK5l1ky67dEB9gpAF').data;
} catch (error) {
throw new Meteor.Error('EGETFIREBASE', 'Something broke');
}
},
});
// Code from the client side main.js file
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import Highcharts from 'highcharts';
import './main.html';
require('highcharts-more');
require('highcharts/modules/drilldown')(Highcharts);
require('highcharts/modules/treemap')(Highcharts);
require('highcharts/modules/boost.js')(Highcharts);
Template.chart.onCreated(function chartOnCreated() {
this.result = new ReactiveVar();
Meteor.call('loadData', (err, res) => {
if (err) {
// do something
} else {
console.log(res);
this.result.set(res);
}
});
});
Template.chart.onRendered(function chartOnRendered() {
this.autorun(() => {
const data = this.result.get();
if (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 = {};
...