How To Visualize Data In MeteorJS

Meteor is a powerful platform for building responsive web and mobile applications. It uses modular components, full-stack reactivity, and data on the wire.

It is a full-stack framework where you can build real-time web applications for desktop and mobile platforms. Even a beginner can quickly build something impressive and useful and that is why advanced developers do appreciate the flexibility of MeteorJS. It uses MongoDB for the database as its own build and test tools. It also uses the distributed data protocol and publish-subscribe pattern which helps in propagating change in data to clients without and synchronized code written by a developer. You can also extend it with external packages like Atmosphere, or MPM.

Let’s take a look at what Meteor requires to function properly –
Chocolatey – Install Chocolatey. For Installing it with cmd.exe, execute the following command in the terminal:@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe"-NoProfile-InputFormat None-ExecutionPolicy Bypass-Command"iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))"&&SET"PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

MeteorJS – To install MeteorJS, execute the following command in the terminal:choco install meteor

FusionCharts – To install FusionCharts module, execute the following command in the terminal:meteor npm install fusioncharts--save

FusionMaps – To install FusionMaps module, execute the following command in the terminal:meteor npm install fusionmaps

Creating Project

Once you’ve installed Meteor, create a project. Run the following command in the terminal:meteor create myapp

The above command will create a new folder named myapp with all the files that a Meteor app needs.

To run the newly created app, execute the following commands:cd myappmeteor

The above command will take us to a page in a browser – http://localhost:3000/

Let’s move on to the next phase of the process to edit the HTML and JS file to render FusionMaps.

Code Modification

Edit HTML file: Replace the existing html code with the code given below:

1

2

3

4

5

6

7

8

9

10

11

12

<head>

<title>Fusioncharts MeteorJS Integration</title>

</head>

<body>

<h1>Fusioncharts Integration with MeteorJS</h1>

{{> fusioncharts}}

</body>

<template name="fusioncharts">

<div></div>

</template>

Importing dependencies:- In the JS file, replace the existing js code with the code given below to import the required dependency:

1

2

3

4

5

6

7

8

9

10

11

12

import{Template}from'meteor/templating';

//Loadthemapsmodule

importFusionChartsfrom'fusioncharts';

importFusionMapsfrom'fusionmaps';

importMapsfrom'fusionmaps/fusioncharts.maps';

importFintThemefrom'fusioncharts/themes/fusioncharts.theme.fint';

importWorldfrom'fusionmaps/maps/fusioncharts.world';

importCountriesfrom'fusionmaps/maps/fusioncharts.worldwithcountries';

//importtheHTML

import'./main.html';

Passing dependency: – Now we need to pass the dependency using the following code:

1

2

3

4

5

//passing dependency

Maps(FusionMaps);

FintTheme(FusionCharts);

World(FusionMaps);

Countries(FusionMaps);

Create instance: – Next, we will create the instance of the template fusioncharts using the following code-