What is Vis.js?

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data.

The library consists of the following components:

DataSet. A flexible key/value based data set. Add, update, and remove items. Subscribe on changes in the data set. A DataSet can filter and order items, and convert fields of items.
DataView. A filtered and/or formatted view on a DataSet.
Network. Display a network (force directed graph) with nodes and edges (previously called Graph).
Graph2d. Plot data on a timeline with lines or barcharts.
Graph3d. Display data in a three dimensional graph.
Timeline. Display different types of data on a timeline.

For accessing, we need to include css and js file.

Example:

<!DOCTYPE HTML>
<html>
<head>
  <script src="components/vis/vis.js"></script>
  <link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
  // ... load a visualization
</script>
</body>
</html>

Refer official site for more reference - http://visjs.org/

What is Canvasjs charts ?

An easy to use HTML5 JavaScript Charting library built on Canvas element. Charts can render across devices including iPhone, iPad, Android, Windows Phone, Desktops, etc. This allows you to create rich dashboards that can work across devices without compromising on maintainability or functionality of your web application.

Canvasjs charts Main benefits

1)Simple API
2)Works across devices and browsers
3)Awesome performance
4)Well Documented
5)Priority Support

It supports 24 different types of JavaScript Charts – including line, column, bar, spline, area, pie, doughnut, stock charts, etc.

Video for chartsjs

https://www.youtube.com/watch?v=RY7bwizAyi0

Importance of SVG and Canvas in HTML5?

In HTML , SVG and Canvas are two important graphics features.It is a Vector graphics technology.

What is Vector Graphics?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics.

Vector graphics range in complexity from simple to moderate to extremely complex. The following are some basic examples.

Simple - Callout in a document or illustration.
Moderate - Illustrations such as charts, diagrams and maps.
Complex - Documents such as those used for engineering.

Canvas

Canvas is a bitmap with an immediate modegraphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

More Information about canvas - http://tech.queryhome.com/51054/about-html5-canvas

SVG

SVG is used to describe Scalable Vector Graphics

SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.

More Information about SVG - http://tech.queryhome.com/50869/about-svg-part-1

A Comparison of Canvas and SVG

Canvas

Pixel-based (canvas is essentially an image element with a drawing API)
Single HTML element similar to in behavior
Visual presentation created and modified programmatically through script
Event model/user interaction is coarse -- at the canvas element only; interactions must be manually programmed from mouse coordinates
API does not support accessibility; markup-based techniques must be used in addition to canvas

SVG

Object Model-based (SVG elements are similar to HTML elements)
Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is object-based at the level of primitive graphic elements -- lines, rectangles, paths
SVG markup and object model directly supports accessibility

Video Tutorial for svg and canvas

https://www.youtube.com/watch?v=_OiVBQY9hG0

Both Canvas and SVG are important components of the HTML5 graphically rich Web.Right now there are a lot of supporting libraries available on web for both svg and canvas. If I name a few Kinetics.js, Fabric.js, Raphael.js, Paper.js and many-many more. These libraries are there to make us work with these two technologies in an easy way.

Images for svg and canvas features

About HTML5 CANVAS ?

HTML5 defines the element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.

A element has no content and no border of its own.

The markup looks like this:

<canvas width="300" height="225"></canvas>

You can have more than one element on the same page.

Each canvas will show up in the DOM, and each canvas maintains its own state.

If you give each canvas an id attribute, you can access them just like any other element.

Example Code:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="background-color:#666;">
</canvas>

</body>
</html>

Output:

WHY DO YOU NEED CANVAS?

Canvas can be used to represent something visually in your browser.

For example:

Simple diagrams
Fancy user interfaces
Animations
Charts and graphs
Embedded drawing applications
Working around CSS limitations

Drawing tools

Rectangles
Arcs
Paths and line drawing
Bezier and quadratic curves

Effects

Fills and strokes
Shadows
Linear and radial gradients
Alpha transparency
Compositing

Transformations

Scaling
Rotation
Translation
Transformation matrix

What is Vis.js?

What is Vis.js?

References

Your comment on this post:

Related Articles

What is Canvasjs charts ?

Canvasjs charts Main benefits

Video for chartsjs

Canvas

SVG

Video Tutorial for svg and canvas

Images for svg and canvas features