Building Your First Chart

This tutorial aims to a provide step-by-step guide on how to implement, customize and render a chart with the library. It assumes you have basic knowledge of JavaScript and are absolutely new to MindFusion.Charting for JavaScript. Feel free to skip content you are already familiar with.

I. Set up of The Project

Follow the steps outlined in the Getting Started topic and set up your project either by loading the necessary charting modules (ES6/CommonJs) or by loading the namespaced UMD scripts.

1.1. Loading UMD namespaced scripts

Add the following references to your web page:

HTML

<script src="umd/drawing.js" type="text/javascript"></script>
<script src="umd/controls.js" type="text/javascript"></script>
<script src="umd/common.js" type="text/javascript"></script>
<script src="umd/common-collections.js" type="text/javascript"></script>
<script src="umd/gauges.js" type="text/javascript"></script>
<script src="umd/charting.js" type="text/javascript"></script>

We will write the code for the sample in a separate file called piechart.js, so we need to reference it as well:

JavaScript

<script type="text/javascript" src="piechart.js"></script>

1.2. Using ES6 modules with importmap

JavaScript

<script type="importmap">
{ 
    "imports":
    {
        "@mindfusion/controls":"./esm/controls.js",
        "@mindfusion/drawing":"./esm/drawing.js",
        "@mindfusion/common":"./esm/common.js",
  "@mindfusion/common-collections":"./esm/common-collections.js",
        "@mindfusion/gauges":"./esm/gauges.js",
        "@mindfusion/charting":"./esm/charting.js"
    }
}
</script><script src="piechart.js" type="module"></script>

1.3. Using npm packages

HTML

npm install @mindfusion/charting

2. Adding the canvas element to your HTML page

In your HTML file you should add a code like this in order to initialize the Canvas needed by the chart library to render itself onto:

 

JavaScript

<canvas id="myChart" width="400" height="400"></canvas>

The id would let you access the Canvas later in the *.js file, so be sure to include it.

II. General Settings

1. If You Have Referenced the UMD Chart/Gauge Libraries Directly

We recommend that you add some namespace mappings to make writing code shorter:

JavaScript

var Charting = MindFusion.Charting;
var Controls = Charting.Controls;
var Collections = MindFusion.Common.Collections;
var Drawing = MindFusion.Drawing;

Beside that you don't need to do anything more.

2. If You've Used Modules

Add the necessary imports to your code-behind:

For ES6 Modules

import * as Charting from '@mindfusion/charting';
import * as Gauges from '@mindfusion/gauges';
import * as Drawing from '@mindfusion/drawing';

For CommonJS Modules

const Charting = require('@mindfusion/charting');
const Gauges = require('@mindfusion/gauges');
const { List } = require('@mindfusion/common-collections');

3. Create the Chart

The chart is created with the constructor of the chosen chart type:

JavaScript

var myChart = new Controls.PieChart(document.getElementById('myChart'));

You can look at the Charting.Controls namespace for a reference of the available predefined chart controls. The title and title font are set as follows:

JavaScript

myChart.title = "Corporate Sales";
myChart.theme.titleFontSize = 16;

The chart.theme property is very important for adjusting chart appearance. It contains most of the properties you'll need to customize the look of your chart.

III. Series and Data

Generally charts have series property, which holds a Series with the data, title and labels. Let's assume you are building a pie chart. We create the data with a simple array:

JavaScript

var values = new Collections.List([20, 30, 10, 40, 35]);
var labels = new Collections.List(["January", "March", "May", "July", "September"]);

Then we create a series:

JavaScript

pieChart.series = new Charting.SimpleSeries(values, labels);

Once the chart series is assigned we can draw the chart. To actually render the chart, call:

JavaScript

chart.draw();

The control offers a variety of Series classes which you can use depending on your needs.

IV. Appearance

The appearance of the chart can be changed with direct properties like commonSeriesFills, uniformSeriesFill etc. or with special SeriesStyle objects like PerElementSeriesStyle or PerSeriesStyle. Loading a theme is also an option as well are separate styling properties found on different chart elements. Here we’ll use the properties that are likely to be set in the most common-case scenario. When you use a SeriesStyle object you assign it to the plot of the chart.

For a pie chart we use PerElementSeriesStyle. Let's define the brushes for the pie slices:

JavaScript

var brushes = new Collections.List([
 
        new Drawing.Brush("#193e4e"),
        new Drawing.Brush("#5a7444"),
        new Drawing.Brush("#8eb848"),
        new Drawing.Brush("#678b99"),
        new Drawing.Brush("#a1d0d8"),
        new Drawing.Brush("#c5b28a"),
  
 ]);
 
var seriesBrushes = new Collections.List();
seriesBrushes.add(brushes);

We repeat the code for the strokes:

JavaScript

var strokes = new Collections.List([
 
     new Drawing.Brush("#f2ebcf"),
          
 ]);
 
var seriesStrokes = new Collections.List();
seriesStrokes.add(strokes);

And for the stroke thickness:

JavaScript

var strokeThicknesses = new Collections.List([
 
     10,
          
 ]);
 
var serieStrokeThicknesses = new Collections.List();
serieStrokeThicknesses.add(strokeThicknesses);

JavaScript

myChart.plot.seriesStyle = new PerElementSeriesStyle(seriesBrushes, seriesStrokes, seriesStrokeThicknesses);

All arguments are nested lists, each list is responsible for setting the appearance of the elements in a single series in the chart.

In short this is all you need to know to create a chart with the MindFusion.Charting for JavaScript library. For more advanced and creative scenarios, refer to the other tutorials:

Legend
Grid
Dashboard Layout