Creating Bar Charts and Point Charts Using HTML5 and SVG

Introduction

Scalable Vector Graphics (SVG) is an XML based vector image format for 2D graphics developed by the World Wide Web Consortium (W3C) in 1999. SVG images and their behaviors are defined in XML text files, which means they can be searched, indexed, scripted and compressed. Since XML files can be created and edited with any text editor, SVG images can also be created and edited with any text editor. All famous web browsers like Internet Explorer, Google Chrome, Mozilla Firefox, Safari and Opera support at least some degree of SVG rendering.

The following are some advantages of using SVG graphics:

• is Text-based
• is open source
• is written in XML format
• is an official W3C graphics standard
• is dynamic and updateable
• is cross-browser compatible
• can be animated

In addition, SVG images:

• are scalable
• can be printed at any resolution with great image quality
• can be zoomed to any level without loosing clarity

With the change of technology, web development has changed very much. End-users demand better UI functionality in their web application on both the browser and other mobile devices with some brilliant animations and graphics. With the introduction of some of the new features provided in HTML5, we can accomplish these requirements easily.

HTML5 supports inline Scalable Vector Graphics (SVG). As we know SVG is not a new feature and was introduced in 1999, but now HTML5 supports it with the <svg> tag. SVGs are awesome and can be compressed and scaled.

Creating Charts using SVG

The following is the procedure to create a chart using SVG.

Step 1

Open Visual Studio 2012/2013/2015 Preview or any other HTML5 editor. We are using Visual Studio 2015 Preview. Now create a new ASP.NET application by selecting the ASP.NET Web Application template and name your new project and select your preferred location.

Now select Empty project template.

In this project add a HTML page and name it "SVGChart.html".

Step 2

In this "SVGChart.html" page add the following HTML code to the body section:

As we can see, we have defined a <svg> element in the preceding markup code. We will use this element as a container for the elements required for drawing the charts.

Step 3

Let's create a student exam data chart based upon the following array. We can store the data in an array as shown below:

Step 4

For the purpose of plotting the charts, we need to define both the X axis and Y axis and set the dimensions for them by declaring the following variables:

Step 5

Let us define the chart dimensional properties for height and width as shown below:

Step 6

The Line elements must be added to the SVG dynamically to draw the X and Y axis as shown below:

Step 7

After drawing the X and Y axis we need to define markers on them. Using our stored data in an array, we need to have RollNo on the x-axis and Marks on the y-axis. To display markers we need to read the stored data array and add accordingly TextNode in the SVG dynamically as shown below:

Step 8

We need to complete the process of drawing the axis and markers by calling the drawXYAxis() function twice, once for the X axis and once for the Y axis and the function drawMarkers() for adding markers on them:

Step 9

We need to add rectangles in the SVG to generate the Bar Charts and similarly we need an ellipses in SVG to generate Point Charts. We have defined drawRectangleForChart() and drawEllipse() methods for adding both as shown below.

Step 10

To generate the dimension for the rectangle and ellipse, we need to read the RollNo and marks for each rollno from the studentexamdata array. We need to set the coordinates by the height of the rectangle and the dimensions and the dimension of the ellipse as shown below:

Step 11

We need to clear the chart because the Chart dimension with markers and axis are children of SVG, so we are using a method clear() to clear the chart as shown below:

Step 12

Let us create a method drawBarChart() to allow the end users to select the type of chart, either Bar Chart or Point Chart, that they want to draw.

The preceding method subscribes to the click event of the radio button after reading the svg element from the Document Object Model (DOM). The code will be executed and the chart will be created based upon the chart type selection.

Now we will the method to the load event of the windows as shown:

window.onload = drawBarChart;

Output 

Let's load the page into a browser and we will be able to see the following picture:

Now select the Bar Chart Radio Button:

Now select the Point Chart Radio Button:

Please find the attached Zip folder to download the source code program built using Visual Studio 2015 Preview. 

Summary

In this article we learned how to create a Bar Chart and Point Chart in HTML5 using SVG.