Our component has built-in interactive charts that extend its visualization capabilities. Flexmonster Pivot Charts have pivoting functionality: they allow you to visualize several fields, filter records, and drill through chart segments to see the raw data.
Flexmonster provides seven chart types:
You can try all of these chart types on the Pivot Charts demo.
If you need a chart type that is not in the list, we recommend using one of these 3rd party charting libraries:
To integrate Flexmonster with other charting libraries, see our guide on integrating with any charting library.
Flexmonster Pivot Charts visualize the data subset defined in report.slice. To show a different data subset, change the slice either using the Field List or programmatically with the report.slice object.
To learn more about slice configuration, refer to the guide about the slice.
The component’s default view is the grid. Switching to charts can be done either using the Toolbar or programmatically.
To show the pivot charts using the Toolbar, select the Charts tab:
To show the pivot charts programmatically, set the options.viewType property to "charts":
report: {
dataSource: {
filename: "data.csv"
},
options: {
viewType: "charts"
}
}
To configure Flexmonster Pivot Charts, you can set:
Charts are configured using the options.charts object. It lets you manage such settings as the chart type, chart title, visibility of the UI controls. See the full list of chart configurations: Chart options.
Here is the example of how the chart title can be set:
report: {
options: {
viewType: "charts",
charts: {
title: "Summary chart"
}
}
}
Try a live sample on JSFiddle.
These configurations affect both grid and charts. They let you manage such settings as date/time formatting and the read-only mode. See the full list of component-wide configurations: Component-wide options.
Here is the example that shows how to hide the Field List button:
report: {
options: {
viewType: "charts",
configuratorButton: false
}
}
Check out a live demo on JSFiddle.
The pivot charts' appearance can be customized and adjusted to the user’s needs. See our detailed guide: Customizing the pivot charts.
This section explains how different types of Flexmonster Pivot Charts work:
Flexmonster Pivot Charts include six XY charts:
For XY charts, measures go to the Y-axis (vertical), and row fields go to the X-axis (horizontal). Therefore, one measure and one field in rows are enough for a basic XY chart.
If rows contain several fields, you can expand members by clicking the necessary member name:
See a live sample on JSFiddle.
If the slice contains several measures, you can choose a chart measure using the options.chart.activeMeasure property or via UI:
Check out a live demo on JSFiddle.
When columns are present in the slice, the legend appears below the chart.
If columns have several fields, you can expand a chart segment by clicking the necessary legend item:
Try it yourself on JSFiddle.
Most of the Flexmonster chart types have a similar structure, but the column line chart is built differently. This chart uses two measures: the first measure is a base for a column chart, and the second measure is used for a line chart. See an example on JSFiddle.
Note The options.chart.activeMeasure property isn't supported for the column line chart. Active measures are the first two measures from the slice.
For a basic pie chart, it is enough to have one measure and one field in rows. This field from rows will be a pie chart’s category, and the measure will be the chart’s numeric value.
When rows contain several fields, you can expand members by clicking the necessary legend item:
See a live sample on JSFiddle.
If the slice contains several measures, you can choose a chart measure using the options.chart.activeMeasure property or via UI:
Check out an example on JSFiddle.
When columns are defined in the slice, they are also used for the chart. By default, a pie chart is based on the data from the first member of the first column field. Sorting is considered as well.
You can select a column member for the chart using the options.chart.pieDataIndex property or via UI:
See an example on JSFiddle.
You may be interested in the following articles: