Hello everyone, my name is Thien, a Fresher Front end developer who is in the process of trail work and accumulated work experience. During the process of working on many projects and learning new technology at ABC Software Solution Vietnam, I experienced many challenges and advanced tasks such as slides, animations, and special gradient backgrounds.
Some specific tasks that Front end Developers often meet
1. Slide
2. Animation
3. Gradient Overlay
4. Graph / Chart
However. One of the things that surprised me and make me spend a lot of time learning about is the horizontal and vertical column graphs. Looking at it, it seems to be just a normal graph like many other graphs, you will probably think that I can use the Chart.JS library to draw it because chart.JS supports a variety of graphs as well as easy to write code implement in the project. But wait, let's look at the graph shown below.
We will see that it has the following special features:
- The columns of the graph have different colors. The first column color is white with 70% transparency. The other column has no transparency.
- The arrow indicating the data increment is located in the middle of the two columns, instead of starting from the top middle of the first column.
- The number representing the data growth is placed at par with the second column, with an up and down arrow indicating the increase or decrease of the data.
OK, after analyzing the graph, we will choose which method or library to install. As before, did I mention the Chart.JS library?. But I do not use Chart.JS because it does not support me to install the graphical interface with the above special characteristics. So I will introduce you to another library that supports more powerful graphs, namely HighChart.JS.
1. What is Highcharts?
Highcharts is a JavaScript library used to support programmers in creating beautiful charts with very rich Settings of colors, and chart types, … Highcharts can meet almost the need of chart requirements in web applications. Highcharts are created by javascript, so they can be easily integrated into websites and interacts well with many programming languages.
2. Set up the HTML interface frame.
index.html
1. General structure
2. The button controls the graph type from vertical to horizontal and vice versa.
3. The div tags have IDs that identify the names of the graph for the Highcharts API to read and render output chart images target to that div element.
3. Initial graphs via Highcharts
Highcharts is a very large set of chart types libraries. So it is divided into many smaller modules. In this example, we only use Highstock, Annotation, ColorAxis, and Accessibility modules.
- Highstock: The main module provides a variety of chart shapes.
- Annotation: An auxiliary module used to create annotations to compare the difference between two data points on the chart.
- ColorAxis: Auxiliary module used to color data point components.
- Accebility: Auxiliary module used to draw arrows showing the increasing and decreasing trend between data points.
index.js
An array of data used to plot 4 different graphs
The general structure of the program consists of the following four parts
4. Configuration and coding to creating chart shape
In this step I will not talk about everything in detail, but I will only talk about the most special parts of the chart.
1. Kinds of API objects that we will use
Chart: Configure the chart style, background color and font.
Color Axis: Config fill color for data points, the larger the data point, the darker color, and vice versa, the smaller the data point, the lighter color.
Plot Options: Configure the display number associated with the unit per data point. Common units of measurement can be length, currency, time.
- Series: Mảng dữ liệu dùng để vẽ đồ thị:
⛳ In addition, it also contains data comparing the increase and decrease between two data points located to the left and right of the arrow (the keyword is flags).
🪧 The comparison calculation will be done in the data array section API.
Defs: Draw arrows showing the increasing or decreasing trend between two data points in the chart.
2. Configure the position of the beginning and the end of the arrow to be centered between two data points
- This is one of the hardest parts of chart design. Nó đòi hỏi ta phải áp dụng công thức tính toán để dịch chuyển vị trí mũi tên theo ý muốn
- Going into the shapes property, we will have the following important sub-properties:
- Points: The position of the starting point and the end point of the arrow
- The function getPointStartCustom() will help us calculate the starting coordinates of the arrow
- The function getPointEndCustom() will help us calculate the end coordinates of the arrow
- Type = path indicates the arrow is a straight line
- Fill: Color of the arrow name
- Stroke: Color of arrow outline
- Opacity: Darkness of arrow
- Stroke Width: Thickness of arrow border
- Points: The position of the starting point and the end point of the arrow
3. For horizontal graphs, there will also have many properties similar to vertical graphs, but we need to change the following two properties to suit with horizontal graphs:
Example image
Series:
Annotations
5. Conclusion
- With the huge and diverse Highcharts library. You can unleash your creativity and design more professional charts / graphs.
- The chart design example above that I mentioned is a pretty important part of a project I worked on.
- Thank you for reading this article.
6. References document
- Code examples are available for your reference
http://www.highcharts.com/demo/
- All configurations, properties, and specifications are provided in the documentation. of Highcharts visit the following link.
