`FushionCompareRealtimeChart`

Description

FushionCompareRealtimeChart component that renders a FusionCharts Realtime Line Dy Chart that displays the heart rate and speed data in real-time. This component is different from the FusionRealtimeChart because this can operate on two different sets of data. In our case data between horses of two different training records.

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.

FushionCompareRealtimeChart

Props

Property Name	Type	Default Value	Description
`width`	``String	Number``	`'100%'`
`height`	``String	Number``	`'400'`
`caption`	`String`	`''`	The main title of the chart.
`subcaption`	`String`	`''`	The subtitle of the chart.
`heart_rate_data`	`String`	`null`	The heart rate data for the chart.
`category_data`	`String`	`null`	The category data for the chart.
`initial_data`	`Object`	`null`	The initial data for the chart.
`new_data`	`String`	`null`	The new data for the chart.
`speed_unit`	`String`	`'km/hr'`	The unit for the speed.
`num_display_sets`	``Number	String``	`300`
`invert_right_y_axis`	`Boolean`	`false`	If set to true, the right Y-axis of the chart is inverted.

Events

Event	Arguments	Description
`load`	-	Fires when the chart is initially loaded
`rendered`	$event, args	Fires when the chart has been fully rendered
`renderComplete`	$event, args	Fires when the chart has been fully rendered and real time values have been set
`realTimeUpdateComplete`	$event, args	Fires when a new data point has been appended to the chart and real time values have been updated

Data

Property Name	Type	Default Value	Description
`chart_config`	`Object`	`{}`	Configuration object for the chart.
`chart_initial_data`	`Array`	`[]`	Initial data for the chart.
`data_sender`	`null`	`null`	Reference to the data sender object.
`is_loading`	`Boolean`	`true`	Flag indicating if the chart is loading.
`chart`	`null`	`null`	Reference to the FusionCharts chart object.

Computed

Property Name	Type	Description
`root`	`Object`	Returns the root state from the Vuex store using the `root/state` getter.

Watch

Watched Property	Callback Function	Description
`new_data`	`function(newVal, oldVal)`	Watcher for the `new_data` prop. When the value changes and `data_sender` is available, it feeds the new data to 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.

ComponentsFusionRealtimeChart

ComponentsFusionChartsCompareZoomLineDy