Chart
By organizing data in a visual format, such as a bar graph or line chart, presenters can effectively convey complex concepts and findings in a clear and concise manner.
Mode
UI Mode
It is the basic chart type which is detailed out in the sections below. Also - the manual is explained separately using 'Basic Chart' page.
ECharts JSON
This is explained on the 'Funnel Chart' page.
Map
The details are given using the 'Geo Map Chart' page.
Data
Provide the JSON content to generate the chart dynamically. Sample data is given blow.
The JSON must have the property and corresponding value attached to the property, also each packet must follow the same template.
[
{
"date": "2021-09",
"department": "Administration",
"spending": 9003,
"budget": 8000
},
{
"date": "2021-09",
"department": "Finance",
"spending": 3033,
"budget": 4000
},
{
"date": "2021-09",
"department": "Sales",
"spending": 9230,
"budget": 8000
},
{
"date": "2021-10",
"department": "Administration",
"spending": 13032,
"budget": 15000
},
{
"date": "2021-10",
"department": "Finance",
"spending": 2300,
"budget": 5000
},
{
"date": "2021-10",
"department": "Sales",
"spending": 7323.5,
"budget": 8000
},
{
"date": "2021-11",
"department": "Administration",
"spending": 13000,
"budget": 16023
},
{
"date": "2021-11",
"department": "Finance",
"spending": 3569.5,
"budget": 3000
},
{
"date": "2021-11",
"department": "Sales",
"spending": 10000,
"budget": 9932
},
{
"date": "2021-12",
"department": "Administration",
"spending": 18033,
"budget": 20000
},
{
"date": "2021-12",
"department": "Finance",
"spending": 4890,
"budget": 4500
},
{
"date": "2021-12",
"department": "Sales",
"spending": 9322,
"budget": 8000
}
]Chart Type
The user has the ability to select the specific kind of chart that they want to view. This option allows the user to customize their viewing experience according to their preferences. The user can choose from a variety of chart types, such as bar graphs, pie charts, and line graphs, to effectively visualize their data.
Bar Chart
This type of chart is commonly used in data analysis to illustrate numerical information in an easily understandable format.
Line Chart
Line charts are effective for showing a gradual progression or decline in values, making them suitable for tracking changes in data over a period of time.
Scatter Chart
These charts consist of points plotted on a grid, where each point represents the intersection of values for the two variables being compared.
Pie Chart
Pie charts are graphical representations that display data in the form of a circle divided into slices. These slices represent different categories or proportions of a whole.
X-axis
The horizontal axis on a bar chart, which is commonly used to represent categories, is known as the x-axis. Pick one of the property-items from the JSON array to associate with the X-axis.
Chart Series
It represents the list of value items to be displayed using Y-axis of the chart. The user can keep one or more items on this list to associate with X-axis meaningfully. The Series Name will have the label for the items getting added to Y-axis and the Data Columns shows the properties from the JSON data packet.
Interaction
Event Handlers
Select
This event is triggered when the user selects a bar or a value item from the chart.
Unselect
This event is fired when the user does the reverse selection on the chart item.
Layout
Title
Provide the title text to describe the content and purpose of the chart in order to give clear context to the viewer.
X-axis Direction
Horizontal
Keeps the x-axis values through horizontal line
Vertical
Keeps the x-axis values through vertical line
X-axis Name
Input a specific label to represent the x-axis on the chart. This will help in clearly identifying and interpreting the data that is being displayed.
X-axis Type
Default
This is the default choice picked depending upon the data provided in the JSON packet.
Category Axis
The category axis in data visualization displays distinct groups of data, in contrast to the continuous scale utilized by the Number or Time axes. For example, in a bar chart illustrating sales figures for each product, the category axis delineates individual products as separate entities, while the number axis conveys the respective sales values associated with each product group.
Value Axis
The numeric axis showcases continuous numerical values, as opposed to the Category axis which showcases distinct categories or groupings of data. This indicates that while categories are evenly spaced, the spacing between values on a numeric axis is determined by their magnitude.
Contrary to utilizing an Axis Interval with one item per value, the numeric axis establishes the range of all values, rounds it up, and attempts to divide the rounded range into evenly spaced intervals.
Time Axis
The time axis functions similarly to the numerical axis as it is utilized for plotting continuous values. It has the capability to accommodate numeric data, including Date objects, with the numbers being interpreted as Javascript timestamps. There are distinctions between the time axis and the numerical axis regarding tick division and label presentation. For instance, one has the option to designate intervals at every 5 minutes, monthly, or on a weekly basis.
Log Axis
If there is a broad range of values, one may opt to utilize a logarithmic axis instead of a linear number axis. This is because the linear scale of the number axis causes equal changes in magnitude to correspond to equal pixel distances.
By contrast, the log axis employs a logarithmic scale, where equal percentage changes in magnitude equate to equal pixel distances. Therefore, the distance in pixels between 10 and 100, as well as 100 and 1000, will be consistent as both intervals signify the same percentage increase. In contrast, if the number axis were employed, the second interval would be ten times larger than the first.
Y-axis Name
Input a specific label to represent the y-axis on the chart. This will help in identifying and interpreting the data that is being displayed against x-axis.
Y-axis Type
Refer to X-axis types above, this will be applicable to Y-axis implementation too.
Y-axis Data Type
Indicates the value of each coordinate. Example: {{value * 100 + "%"}}
In a mathematical context, the value of each coordinate is essential for plotting points accurately on a graph and analyzing the relationships between different points.
Legend Position
Position of the legend refers to the placement of the key that explains the various elements displayed on the chart. It is essential to ensure that viewers can easily understand the information presented.
Bottom
The legend is placed at the bottom of the chart
Right
The legend is placed at the right side of the chart
No legend
The legend display is removed
Hide
This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.
Style
Show Label
It is utilized to display or conceal the numerical data associated with the bars in the graphical representation. This feature can be helpful in providing additional information to the viewer or simplifying the presentation by minimizing distractions.
Bar Chart Type
Basic Bar
This regular bar charts show individual categories as separate bars next to each other for easy comparison.
Stacked Bar
Stacked bar charts display multiple categories within each bar, stacked on top of each other to visually compare the combined totals.
Last updated