The technologies used in this framework are highly responsive to data manipulation on charts.
The new charting frameworks uses following third-party client side libraries:
These technologies are configured to work with the current Viewpoint Portal. Hammer.js is used to provide support for chart balloons on mobile platforms.
The following scales are supported on both the Axis:
Other basic features like coloring, grid-lines, rendering area, rendering data points, configuring min-max are supported.
The framework is flexible enough to provide native D3 chart object if required, to add special features on D3 charts.
Special features added by viewpoint include:
Data for the views can be provided as a Backbone model or as raw data in chartConfig.
A chart by default takes the size of the container in which its rendered. The client for the chartView can also provide 'width' and 'height' options for the chart if it needs to be rendered with specific dimensions.
If the size of chart container changes (resize), the chart needs to be re-rendered to fit the new container size. Whenever new data is available from the server (refresh), the charts will update its crossfilter with new data and re-draw the chart.
In 15.11, most of the portlets with charts were converted to use our backbone views. The new chart stack is not implemented in any old style portlets.
There are two ways in which the chart views can be constructed. It can be directly configured as childView or it can be extended to add other views/functionality into that view. If the chart is configured as a childView, then it is the parent view's responsibility to fetch the data and pass it to the chart as a 'chartData' option to the view. When the view is extended, the data is to be fetched by the extending view and can directly use it as its chartData variable.
There are 2 categores of charts, simple dc-based charts with 1 series and no thresholds can use the streamlined barChartView or lineChartView.
Charts with multiple series or with thresholds need to use the more involved compositeChartView.js, which uses an array of sub-charts.
Chart configuration options are documented in baseChartView.js.