`FusionRealtimeChart`

Directory Path: VaahCms/Modules/HRC/Vue/pages/livetrainingcenters/partials/FushionRealTimeChart.vue
Dependency: FusionCharts

Description

A Vue.js component that renders a FusionCharts Realtime Line Dy Chart that displays the heart rate and speed data in real-time. Unfortunately the default configurations and features of FusionCharts did not satisfy our special requirements, so we have made our own few tweaks. They are discussed in the Features section below.

FusionRealtimeChart

Props

Name	Type	Default Value	Description
`width`	String or Number	`'100%'`	The width of the chart container.
`height`	String or Number	`400`	The height of the chart container.
`caption`	String	`''`	The main chart title.
`subcaption`	String	`''`	The chart subtitle.
`heart_rate_data`	String	`null`	The initial heart rate data to be displayed on the chart.
`category_data`	String	`null`	The initial category data to be displayed on the chart.
`initial_data`	Object	`null`	The initial data to be displayed on the chart.
`new_data`	String	`null`	The new data to be fed into the chart.
`speed_unit`	String	`'km/hr'`	The unit of measure for the speed data.
`num_display_sets`	Number or String	`300`	The number of sets of data to be displayed on the chart.
`invert_right_y_axis`	Boolean	`false`	If set to `true`, the right y-axis will be inverted.

Events

The following events are emitted by the component:

Event Name	Description
`rendered`	The chart has been rendered.
`renderComplete`	The chart has finished rendering.
`realTimeUpdateComplete`	A real-time update of the chart has been completed.

Methods

The following methods are available on the component:

Method Name	Description
`renderChart`	Renders the FusionCharts Realtime Line Dy Chart.
`getDataSource`	Returns the data source for the chart.
`getRandomData`	Generates random data to feed into the chart.
`setInvertedRightYAxis`	Inverts the right y-axis.
`setRealTimeValueText`	Updates the real-time values on the chart.

Features

OnLoad Configurations

As soon the the onLoad method is triggered, it sets the data_source using getDataSource method that returns the data source as per our requirements. Feel free to check this method out in the component file.
We configure the rendered, renderComplete and realTimeUpdateComplete method as per our requirements

Update Realtime values

Real Time Value

Due to the limitations in FusionCharts we cannot change the format or value in the realtime values displayed at the bottom. So to achieve what we need, we have made few tweaks of our own.

The setRealTimeValues is called in the realTimeUpdateComplete listener. This ensures that the desired svg component loaded to DOM.
It will find the desired svg element to be updated.
Then it modifies and inserts our custom HTML content to get the desired results.

Inverted Y-Axis

In this project the speed unit can also be in reverse Seconds/Km, Seconds/200m, Seconds/8th of a mile etc,. When such speed unit is selected the axis representing speed must also be in rendered in reverse. Even though by updating the configurations, we can achieve the desired effect when the data is not updating. As soon as the realtime data comes in the inversion does not work.

Expected	What We Get
	.

The solution we came up with is the following:

If the invert_right_y_axis is set to true we convert the data to negative numbers, and pass it via props
The onLoad method calls the renderChart method
In the renderChart method event listener is applied to realTimeUpdateComplete event
In realTimeUpdateComplete event listener if the prop invert_right_y_axis is set to true, then setInvertedRightYAxis is called.
setInvertedRightYAxis method will identiy the y-axis texts and replace the individual texts to positive numbers, since the data was in negative already we get the axis in opposite direction and the chart also renders according to that logic only.

ComponentsGoogleMapsForHorses

ComponentsFushionCompareRealtimeChart