Using CSS to Create Gartner Magic Quadrant Style Custom Graph
Updated: Jan 20
Introduction
The issue of having dispersed attention has become much more prevalent nowadays. In order to present certain information that is supported by data, it has to be presented in a visually appealing and interesting fashion. This is where visual graphs come into play. Using graphs, data can be presented in a descriptive and clear fashion, offering the intended viewer with the ability to understand the information without getting into the nitty-gritty.
Displaying these types of visual graphs on a web application is not a simple exercise. One way of displaying visual graphs on a web application is to insert the image of a graph rendered using any graphing software. But this approach is not very beneficial as the graph displayed is neither dynamic nor interactive, it is only a static image.
How to Integrate a Dynamic and Interactive Graph on Web Applications?
The shortcomings of the static image approach described above inspired us to look deeper and as a result, we have found two techniques for displaying interactive and dynamic visual graphs on a web application.
The first technique employs the use of JavaScript graphing libraries. There exist many JavaScript graphing libraries that can render an interactive graph having dynamic data directly on a web application.
The second technique is a more unique one in which we only use HTML Elements and CSS styling for creating a dynamic and interactive graph thereby making the graph tailor-made for integration into web applications.
In this blog post, we will go through the process of creating the BVR Quadrant using the second technique that uses only HTML and CSS for creating a dynamic and interactive graph. BVR Quadrant is a Gartner Style Magic Quadrant Graph.
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 a particular category.
A Gartner-style magic quadrant graph may also be used to compare several products or services of a particular category on the basis of some set market factors.
What does the BVR Quadrant Represent?
We can understand the functionality of a Magic Quadrant Graph in detail by taking the help of an example. We have implemented a BVR 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. 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 BVR Quadrant for Web Cams is attached below.
BVR Quadrant for Web Cams
How to Create a BVR Quadrant Graph using only HTML and CSS?
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages and their sub-elements. HTML provides the structure of the page and CSS provides the (visual and aural) layout. We have created the BVR Quadrant graph in a similar manner in which HTML provides the structure of the graph and CSS provides the styling and layout of the graph. Therefore, this type of graph can be referred to as a CSS graph. The following steps were followed while creating the BVR Quadrant as a CSS graph. Some images representing the state of the CSS graph after following each step are also displayed after the steps.
1. An HTML div was chosen to be the boundary and the container for the CSS graph. This div was positioned relative to the viewport and all the elements that needed to be placed inside the plot were positioned absolute to this div and placed using the top, left, right, and bottom attributes with respect to the div.
2. A horizontal line and a vertical line were placed in the center of the div to act as the axes for the CSS graph by using the top and left attributes.
Boundary and Axes of the CSS Graph
3. The annotations were placed at the four corners using the top, left, right, and bottom attributes and styled accordingly.
4. The product marker which contains both the dot and the product label was represented through an HTML <a> tag thereby hyperlinking the whole product marker.
5. The dot and the product label were represented through HTML span tags placed inside the above-described HTML <a> tag.
6. The Product Markers of different products were then placed inside the CSS graph by using the top and left style attributes.
7. The position of the product label with respect to the dot was made dependent on whether the dot is before or after the y-axis.
Corner Annotations and Product Markers Placed inside the CSS Graph
8. Tooltips were placed for Product Markers when on hover state and the styling of Product Markers was also changed for when on hover state.
Product Markers on Hover State
9. The required background image was positioned and sized at the center of the CSS graph by using CSS properties.
10. The x-axes title with arrow lines was placed using the bottom and left attribute w.r.to the graph and the y-axes title with arrow lines was placed using the top and left attribute w.r.to the graph.
Axes Titles and Background Image Placed for the CSS Graph
11. The BVR Quadrant Graph was made mobile responsive by changing the font size, marker size, graph dimensions, and image size depending upon the width of the viewport through CSS Media Queries.
Mobile Responsive View of the CSS Graph
The complete HTML and CSS code that creates the BVR Quadrant as a CSS graph has been hosted on a CodePen whose link is provided below.
In the CodePen, you can see that the graph has an interactive interface. Product Markers are hyperlinked and on hover state, display a tooltip above the marker. The CSS graph is also responsive which can be verified by reducing the width of the output window.
Conclusion
The BVR Quadrant created as a CSS graph has a good enough design and functionality thereby making it suitable 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.
The methodology used to create the BVR Quadrant can also be used to create any type of graph or plot for a web application by making some minor design tweaks in the CSS graph. The structure of HTML and the layout of CSS will remain similar for plotting any other type of graph.
To conclude, we can create an interactive graph having a good user interface by using only HTML and CSS without the need for any JavaScript third-party library. The integration of this graph on a web application will not impact its page speed much as HTML and CSS are the basic elements of any web application.