Basic Chart

It is commonly used in presentations and reports to allow for easy interpretation of complex information. It usually has two axes, one representing the categories and the other showing the values.

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.

Type	Description
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

Chart Event Handlers

Event	Description
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.

Event Handlers

Event	Description
Click	The 'Click' event is fired when user clicks on the chart.

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

Direction	Description
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

Type	Description
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.

Property	Value
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.

Set the visibility

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

Type	Description
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.