Easily Add Charts, Gauges, and Maps to Your Svelte Projects
No matter what your industry or business focus is, there are specific must-have tools that you can exploit to give you a competitive edge. This is especially true today – collecting data is standard practice, and everyone has mechanisms to amass information covering almost every aspect of our businesses. Modern businesses have access to everything from customer and market data to data that describes the processes they use to create or manufacture the products they sell. With this wealth of information at hand, data visualization is critically important as an analytical tool. Effective data visualization enables businesses to present and organize their data in a way that allows anyone, especially decision-makers, to identify and understand patterns and trends in the big picture as they emerge. Depending on the nature of the data, you can display data with several tools, including charts, gauges, maps, plots, and so on. Because of this, a data visualization tool helps businesses develop informed marketing plans, promote sales, and make proactive decisions for the future.
Table of Contents
How do I Using FusionCharts to Achieve Our Data Visualization Goals?
That is where FusionCharts enters the frame. FusionCharts is an extensive library of over 100 charts and graphs, as well as over 2000 maps. It is a complete suite of data visualization tools that makes it simple to integrate various data visualization techniques into your online and mobile apps. FusionCharts takes your apps to the next level with beautiful visuals. In addition, you can get it up and running in no time using SvelteJS directives. Continue reading to learn how to use simple SvelteJS directives to add charts, gauges, and maps to your applications. Learn more about svelte-fusioncharts bindings that allow you to integrate FusionCharts components into your programs. Below are four simple steps that you need to follow to build a Svelte app with a chart, gauge, and map. We’ll display the percentage of land area for each continent, taking the data from enchantedlearning.com. As an example, the chart, gauge, and map appear as seen below. They are displayed one after the other within the rendered app. Gauge (top), Chart (left), and Map (right)
Prerequisites
Your development environment needs the latest npm package manager and node.js 10.9.0 or later. Once you have that setup, you are ready to build your Svelte project integrated with FusionCharts.
Step 1: Create a Svelte Project
Create a folder for your svelte project by typing the following at the command line:
This will create a project folder called svelte-fusionchart-demo with the following directory structure: The directory structure of svelte-fusionchart-demo Your directory contains public, scripts, and src folders. To get moving, you only need to change the code in the App. svelte and main.js files located in the src folder. To do this, type the following at the command line:
cd my-first-svelte-project
npm install
npm install svelte-fusioncharts fusioncharts --save
This installs the required node_modules into your project directory.
Step 2: Add Code to App.svelte
Now we’ll begin adding code for our app. If you don’t need one of the components in this example, you can omit it.
A. Add Imports
In the <script> section of the app.svelte file add the following imports.
// General imports for all fusion charts
import FusionCharts from "fusioncharts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
// Required for charts
import Charts from "fusioncharts/fusioncharts.charts";
// Required for gauges
import Widgets from "fusioncharts/fusioncharts.widgets";
// Required for maps
import Maps from "fusioncharts/fusioncharts.maps";
import World from "fusioncharts/maps/fusioncharts.world";
// Required for all types
import SvelteFC, { fcRoot } from "svelte-fusioncharts";
// FusionCharts should always be first parameter. You can omit
// what is not required
fcRoot(FusionCharts, Charts, Maps, World, Widgets, FusionTheme);
B. Add Data
Add the data of the percentage of the land area of continents from enchantedlearning.com as follows. This will go in the <script> tag.
Also, add the const for captions and sub-captions.
// For captions and subcaptions
const caption = "Percentage of Land Area on Planet Earth";
const subcaption = "Data Source: www.enchantedlearning.com";
C. Add Color Ranges
In the code below, there are four color ranges. You can choose to add more for the slider and the gauge. This will also be placed in the <script> tag.
Open the main.js file in the src folder and add the following to it:
import App from "./App.svelte";
var app = new App({
target: document.body
});
export default app;
Step 4: Run the App
Now you are ready to run the app by typing the following at the console:
npm run dev
You can use localhost in your browser to see the running app. The port for localhost shows on the console when you run the command.
Are There More Options for Data Visualization?
As you can see from this example, FusionCharts opens up a world of visualization options and presentation ideas that you can add to a Svelte project. Explore the Fusion Charts Gallery for more impressive and stunning interactive charts, gauges, and maps that you can customize and integrate into your project. You can also build beautiful and practical dashboards for exploratory data analysis or data visualization. If you want to run the code in this tutorial, you can download it here. Download FusionCharts now and accelerate to building successful apps!