Predictive Charts
Predictive charts let you visualize current data along with predicted/forecasted data within a given value range.
Follow these steps to use predictive charts.
-
Import the chart taglib along with the
PredictiveChartConfig
andMixedDataColumn
classes into your bundle’sinit.jsp
file: -
Add the following Java scriptlet to the top of your
view.jsp
. Add aMixedDataColumn
object—a column that supports both single number values and arrays of three numbers—for each data series. Single number values define existing data. Arrays of numbers are used as the prediction/forecast data and contain three numbers: a minimum value, an estimated value, and a maximum value. The estimated value is rendered solid and surrounded by a highlighted area with borders specified by the minimum and maximum values. This lets you visualize your estimated values, while also giving you an idea of the possible value ranges. Use theaddDataColumn()
method to add each data series:Predictive charts have these properties:
axisXTickFormat: An optional string which specfies the time formatting on the X axis. For more information on which formats can be specified please refer to d3’s time format README. This value is set using the
setAxisXTickFormat()
method.Prediction Date: A date as a string that represents the point in the timeline from when the forecast/prediction is shown. This value is parsed as a Date object in JavaScript and set using the
setPredictionDate()
method.Time Series: A timeline for the data which is displayed on the X axis of the chart. This value is set as an array of dates (
2018-01-01
for example). -
Add the
<chart>
taglib to theview.jsp
, passing the_predictiveChartConfig
as theconfig
attribute’s value:
The area contained within the light-blue rectangle is the point from which the predicted/forecasted values are shown:
Awesome! Now you know how to create predictive charts for your apps.