Using JavaScript and Custom Graphing Libraries to Create Gartner Style Custom Magic Quadrant Graph
Updated: Jan 13
Introduction
People nowadays are struggling more and more with the problem of having dispersed attention. If you want to present certain information that is backed by some data, it has become necessary to present it in a visual and interesting way that grabs the attention of the intended viewer. This is where visual graphs come into the picture.
Graphs are an excellent tool for visualizing data or for conveying some information that is backed by data. Graphs can display data in a crisp and meaningful manner thereby enabling the intended user to understand the conveyed information without getting into the granular details of such data.
Displaying graphs on a web application is a tricky exercise. A simple way of displaying graphs on a website is to insert an image of a graph rendered using any graphing software but this method restricts the effectiveness of the graph as it is only a static image.
JavaScript Graphing Libraries can be used to overcome the shortcomings of the above-described static image approach. JavaScript Graphing libraries can render an interactive graph directly on the web application. Such a graph can have multiple interactive features like a tooltip, animations, hyperlinking, and other similar dynamic properties present on the web.
What is a Gartner Style Magic Quadrant Graph?
A Gartner-style magic quadrant graph is a two-dimensional scatter plot divided into four quadrants where each quadrant signifies the market position of a product or service in its own specific category.
A Gartner-style magic quadrant graph can also be used to compare several products or services of a specific category on the basis of some set market attributes.
What does the Gartner Style Magic Quadrant measure?
We can understand the functionality of a Magic Quadrant Graph in detail by taking the help of an example. We have implemented a Magic Quadrant Graph that plots 10 products of a specific category on the basis of two market attributes that are price and popularity. The products are plotted in all 4 quadrants which represent the market position of the product present in the respective quadrant.
What do the Four Quadrants Represent?
The four quadrants represent the following market positions.
1. Great Value
A popular product having a relatively less price in its category will lie in this quadrant.
2. Challenger
A product that is not very popular at the moment but is priced on the lower side will lie in this quadrant.
3. Rising Star
A relatively less popular product priced in a premium range will lie in this quadrant.
4. Leader
A highly popular product priced in a premium range will lie in this quadrant.
An image of a sample Magic Quadrant graph is attached below.
BVR Quadrant
Brief About Different JavaScript Graphing Libraries
There are numerous JavaScript Libraries that can be used to create different types of visual graphs and then render them directly on a web application. Graphs rendered through JavaScript can be highly interactive and can also visualize dynamic data.
In this section, we will only discuss the 3 JavaScript graphing libraries that we considered for the implementation of the Magic Quadrant Graph.
1. Google Charts
Google Charts provides a way to visualize data on a web application. It has a number of ready-to-use chart types. The most common way to use Google Charts is with simple JavaScript that you embed in your web page.
Google Charts is easy to use and offers a large variety of different types of graphs. But creating custom graphs with specific design requirements is not an easy task while using Google Charts. Google Charts also does not provide offline access for its charts.
2. Plotly.JS
Plotly.js is a high-level, declarative charting library and ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. It is built on top of d3.js and stack.gl.
Plotly is a very rich library and has outstanding documentation, including a tutorial for each of the chart types. Plotly can render highly dynamic and interactive plots but its library is a bit heavy and can reduce the load speed of your web application.
3. Chart.JS
Chart.js is an HTML5-based JavaScript library for creating animated, interactive, and customizable charts and graphs. Chart.js provides a set of frequently used chart types, plugins, and customization options.
Chart.js is a fairly light library and also has an option for custom plugins which makes it highly customizable.
Which JavaScript Graphing Library did we choose and why?
Web applications usually have stringent design requirements for a component that is to be integrated into their pages like having a consistent color theme and many other design requirements. It was becoming difficult to meet some specific design needs for the graph made using Google Charts which is why we had to drop the Google Charts approach early from our consideration.
Plotly.js renders aesthetic and professional-looking graphs which can visualize complex scientific data. It also integrates a toolbar with the graph that has zoom and filter-out tools thereby making the graph extremely interactive. But all these features come with a cost and make the plotly library heavy thereby reducing the load speed of rendering the graph on web applications. Page Speed is a very important factor for consumer-facing web applications and a component that reduces page speed significantly is not suitable for integration. Therefore, we had to drop the plotly approach from our consideration.
Chart.js provides highly customizable graphs which are interactive enough for visualizing non-scientific general data in a meaningful manner.
Chart.js also has a relatively light library and graphs rendered by it on web applications do not reduce the page speed much. Therefore, we proceeded with the Chart.js approach for creating Gartner-style magic quadrants.
How do you create a 4-quadrant Graph by using Chart.js?
Chart.js renders the graph in an HTML Canvas element. The following steps were followed while creating the Magic Quadrant Graph using the Chart.js library. A portion of the code that was written while following the steps is also mentioned after the steps.
1. Create a Chart.js chart with type as scatter.
2. Define the data that is to be plotted like coordinates, names, and other data like tooltip text.
Var data = [{
x: 5,
y: 4,
label: 'OnePlus 10T',
data:'Google - Pixel 3a with 64GB Memory '
}]
3. Place text annotations and line annotations in the graph as per the requirement.
annotations: {
label1: {
type: 'label',
xValue: -7.2,
yValue: -9.45,
backgroundColor: '#F0F4F8',
content: ['CHALLENGERS'],
borderRadius: 2,
color: '#314863',
padding: {
left: 10,
top: 4,
right: 10,
bottom: 4
},
font: {
weight: 700,
family: 'DM Sans'
}
}
line1: {
type: 'line',
yMin: 10,
yMax: 10,
borderColor: '#A7A7A7',
borderWidth: 1,
}
}
4. Place the axes and axes titles as per the requirement.
scales: {
x:{
ticks:{
display: false
},
grid: {
display: false,
},
min: -10,
max: 10,
title: {
color: '#6A6A6A',
display: true,
text: 'Price',
padding: {
top: 6
}
}
}
5. The specific styling for all the components of the graph will also be done using JavaScript by writing the styles as key-value pairs in the definition of respective components. An example of this can be seen in the code of the above steps.
6. The size of the graph was set using CSS by setting the width and height of the canvas element.
#MQ{
height: 500px;
width: 500px;
}
7. The graph can be resized by writing CSS Media Queries for resizing the canvas element depending on the width of the viewport.
@media screen and (max-width: 500px) {
#MQ{
height: 320px;
width: 320px;
}
}
8. Responsiveness for the graph can be achieved by writing custom functions that change the font size and other parameters depending on the width of the viewport.
if(window.outerWidth < 501){
Chart.defaults.font.size = 9;
p8 = 5.12;
p4 = 2.56;
p20 = 5;
}
9. The scatter points were hyperlinked using the listeners property of chart.js.
var link = [...] // this variable will contain the URL for the Hyperlinks
listeners: {
click: function(context)
{
window.open(link[context.dataIndex], '_blank');
},
enter: function(context, event) {
context.hovered = true;
context.chart.canvas.style.cursor = 'pointer';
return true;
},
leave: function(context, event) {
context.hovered = false;
context.chart.canvas.style.cursor = 'default';
return true;
}
}
10. Many other custom functions were written and some external plugins were also used to achieve the required functionalities from the graph.
The complete JavaScript code written while creating the magic quadrant graph has been hosted on a codepen and displayed below.
As you can see the above-displayed graph has an interactive interface and loads with an aesthetic animation. The tooltip also emerges with animation when you hover over the scatter point.
Conclusion
The graph rendered using the Chart.js library has successfully met the minimum design requirements needed to be represented as a magic quadrant graph. It can convey sufficient information about the market position of a particular product or service in its specific category and thereby guide the intended user toward the optimum product or service that is in conformance with his needs.
To conclude, the chart.js library can render a graph that is sufficiently interactive and has a good user interface. Moreover, the library is light enough to not reduce the loading time of the web application significantly thereby making Chart.js a very good option for rendering interactive graphs on a web application.
By Hrithik Chowdhry