TwoLayersChart
The TwoLayersChart widget displays multivariate document information in a variety of charts. The TwoLayersChart widget is based on the KendoReact Chart component. Many of KendoReact Chart settings can be passed to configure the TwoLayersChart. See API, config API, and *ChartProps API.
Supported charts
Bullet chart
![Image of a Bullet chart](../image/1669965519ca5c.png)
Polar chart
![A polar chart.](../image/1669965519f0a6.png)
Scatterplot chart
![A scatterplot chart.](../image/166996551a17d8.png)
Example data
The Bullet chart and Polar chart examples use this search result data:
const exampleData = [ { "index": 1, "uri": "/person/10054.xml", "path": "fn:doc(\"/person/10054.xml\")", "extracted": { "person": { "personId": 10054, "range": { "from": 0, "to": 15 }, "polar": { "time": "08:00", "altitude": 4.9, "azimuth": 92.7 } } } }, { "index": 2, "uri": "/person/10089.xml", "path": "fn:doc(\"/person/10089.xml\")", "extracted": { "person": { "personId": 10089, "range": { "from": 15, "to": 20 }, "polar": { "time": "09:00", "altitude": 6.5, "azimuth": 95.7 } } } }, { "index": 3, "uri": "/person/10093.xml", "path": "fn:doc(\"/person/10093.xml\")", "extracted": { "person": { "personId": 10093, "range": { "from": 20, "to": 50 }, "polar": { "time": "10:00", "altitude": 7.2, "azimuth": 96.4 } } } }, { "index": 4, "uri": "/organization/20001.xml", "path": "fn:doc(\"/organization/20001.xml\")", "extracted": { "organization": { "organizationId": 20001, "range": { "from": 50, "to": 60 }, "polar": { "time": "12:00", "altitude": 8.0, "azimuth": 96.7 } } } }, { "index": 5, "uri": "/organization/20002.xml", "path": "fn:doc(\"/organization/20002.xml\")", "extracted": { "organization": { "organizationId": 20002, "range": { "from": 60, "to": 65 }, "polar": { "time": "13:00", "altitude": 8.3, "azimuth": 97.0 } } } }, { "index": 6, "uri": "/organization/20003.xml", "path": "fn:doc(\"/organization/20003.xml\")", "extracted": { "organization": { "organizationId": 20003, "range": { "from": 65, "to": 100 }, "polar": { "time": "13:30", "altitude": 8.5, "azimuth": 97.7 } } } } ]
Display a bullet chart from search results
The bullet chart is a variation of a bar chart. A bullet chart compares a quantitative measure (such as temperature) against a qualitative range (such as warm, hot, and cold). A symbol marker is used to encode the comparative measure (such as the max temperature a year ago). For more information, see the KendoReact Bullet Chart documentation.
This example React application generates a bullet chart using the TwoLayersChart widget:
import './App.css'; import { TwoLayersChart } from "ml-fasttrack"; function App() { const BulletChartConfig = { entityTypeConfig: { path: 'extracted.*~' }, entities: [ { entityType: 'person', items: [ { maxValue: { path: 'extracted.person.range.to' }, minValue: { path: 'extracted.person.range.from' }, }, ], }, { entityType: 'organization', items: [ { maxValue: { path: 'extracted.organization.range.to' }, minValue: { path: 'extracted.organization.range.from' }, }, ], } ], bulletChartProps: { chartTitleProps: { text: "Range" }, chartSeriesItemProps: { color: '#fff', data: [[52, 55]] }, chartSeriesLabelsProps: {position: 'center', font: 'bold 12pt sans-serif'}, chartValueAxisItemProps: {min: 0, max: 100}, chartTooltipProps: { render: ({point}) => { const {value} = point; return ( <span> Maximum: {value.target} <br/> Average: {value.current} </span> ) } } } } return ( <div className="App"> <div style={{width: '480px'}}> <TwoLayersChart data={exampleData} config={BulletChartConfig} chartType="bullet" style={{ height: 120, width: 500 }} onPlotAreaClick={(e) => console.log("Clicked the plot area: ", e)} onSeriesClick={(e) => console.log("Clicked the series: ", e)} /> </div> </div> ); } export default App;
Code explanation
In the Display a bullet chart from search results example:
The
data
prop receives the search results for the chart.The
config
prop receives a configuration object.The object determines the properties to include in the chart.
The object also includes additional KendoReact Chart settings.
The
chartType
prop specifies the chart type. In the Display a bullet chart from search results example, the chart is a polar chart.For more details about configuration, see the KendoReact Bullet Chart documentation.
Example rendering
The code in Display a bullet chart from search results renders this:
![A bullet chart](../image/166996551a4e37.png)
Display a polar chart from search results
The TwoLayersChart widget can display a polar chart. Polar charts are scatter charts that display two-dimensional data series in polar coordinates. For more information, see the KendoReact Polar Chart documentation.
This React application generates a polar chart with the TwoLayersChart widget:
import './App.css'; import { TwoLayersChart } from "ml-fasttrack"; function App() { const PolarChartConfig = { entityTypeConfig: { path: 'extracted.*~' }, entities: [ { entityType: 'person', items: [ { maxValue: { path: 'extracted.person.range.to' }, minValue: { path: 'extracted.person.range.from' }, }, ], }, { entityType: 'organization', items: [ { maxValue: { path: 'extracted.organization.range.to' }, minValue: { path: 'extracted.organization.range.from' }, }, ], } ], polarChartProps: { chartProps: { height: 500, width: 500 }, chartseriesLabelProps: { position: '', content: '' }, chartXAxisItemProps: { startAngle: '-90', majorUnit: '30' }, chartYAxisItemProps: { visible: false } } } return ( <div className="App"> <div style={{width: '480px'}}> <TwoLayersChart data={exampleData} chartType="polar" config={PolarChartConfig} style={{ height: 500, width: 500 }} onPlotAreaClick={(e) => console.log("Clicked the plot area: ", e)} onSeriesClick={(e) => console.log("Clicked the series: ", e)} /> </div> </div> ); } export default App;
Code explanation
The
data
prop receives the search results for the chart.The
config
prop receives a configuration object.The object determines the properties to include in the chart.
The object also includes additional KendoReact Chart settings.
The
chartType
prop specifies the chart type. In the Display a bullet chart from search results example, the chart is a polar chart.
Example rendering
![A polar chart showing search results.](../image/1669965519f0a6.png)
Display a scatterplot chart from formatted data
You can use the TwoLayersChart widget to display a scatterplot chart, which renders numerical data over two independent axes--X and Y. For more information, see the KendoReact Scatterplot Chart documentation.
The following React application generates a scatterplot chart with the TwoLayersChart widget. This example uses data that is already formatted for display by the widget. The widget expects an array of objects with from
and to
properties. Optionally, the transformData
prop can be set to a transformation function and the data in the data
prop will be transformed prior to being charted.
import './App.css'; import { TwoLayersChart } from "ml-fasttrack"; function App() { const exampleDataFormatted = [{ from: 5, to: 12 }, { from: 2, to: 6 }, { from: 6, to: 9 }] return ( <div className="App"> <div style={{width: '480px'}}> <TwoLayersChart data={exampleDataFormatted} chartType="scatterPlot" style={{ height: 400, width: 400 }} onPlotAreaClick={(e) => console.log("Clicked the plot area: ", e)} onSeriesClick={(e) => console.log("Clicked the series: ", e)} /> </div> </div> ); } export default App;
Code explanation
In the example:
The information to chart is specified with the
data
prop.The
chartType
is set to“scatterplot
”.
Note
For additional configuration information, see API, config API, and *ChartProps API.
Example rendering
The example code renders this:
![A scatterplot with formatted data.](../image/166996551a85c4.png)
API
Prop |
Type |
Description |
---|---|---|
data |
object |
Data to display in the chart. |
config |
object |
Array of entity configuration objects. Each object determines what data to display in a result for an entity type. For additional details, See API, config API, and *ChartProps API. |
chartType |
"bullet" | "polar" | "scatterPlot" |
The chart type to use in order to show data. |
onPlotAreaClick |
function |
Callback function triggered when the chart plot area is clicked. See KendoReact ChartProps. |
onSeriesClick |
function |
Callback function triggered when the chart series is clicked. See KendoReact ChartProps. |
style |
CSSProperties |
CSS styles applied to the chart. |
transformData |
function |
Callback function for transforming data value. |
config API
Prop |
Type |
Description |
---|---|---|
entityTypeConfig |
object |
Entity type configuration object. |
entityTypeConfig.path |
string |
Path to the entity type in the search result. The path is specified using JSONPath. |
entities[] |
object[] |
Array of chart configuration objects for each entity. |
entities[].entityType |
string |
Entity type of the configuration object. |
entities[].items[] |
object[] |
An array of item configuration objects for the data to be charted. An array allows you to chart multiple property values in the data. |
entities[].items[].minValue |
number |
Minimum value for the chart. |
entities[].items[].maxValue |
number |
Maximum value for the chart. |
facet |
object |
Facet configuration object. |
facet.name |
string |
Name of the facet whose values you are displaying in the chart. |
facet.title |
string |
Title of the facet. This value is required for setting facet constraints in the application context. |
bulletChartProps |
object |
Configuration object for bullet chart props. For details, see *ChartProps API. |
polarChartProps |
object |
Configuration object for polar chart props. For details, see *ChartProps API. |
scatterPlotChartProps |
object |
Configuration object for scatterplot chart props. For details, see *ChartProps API. |
*ChartProps API
Prop |
Type |
Description |
---|---|---|
chartProps |
object |
ChartProps for the KendoReact Chart component. |
chartTitleProps |
object |
ChartTitleProps for the KendoReact Chart component. |
chartSeriesProps |
object |
ChartSeriesProps for the KendoReact Chart component. |
chartSeriesItemProps |
object |
ChartSeriesItemProps for the KendoReact Chart component. |
chartSeriesLabelsProps |
object |
ChartSeriesLabelsProps for the KendoReact Chart component. |
chartValueAxisProps |
object |
ChartValueAxisProps for the KendoReact Chart component. |
chartValueAxisItemProps |
object |
ChartValueAxisItemProps for the KendoReact Chart component. |
chartXAxisProps |
object |
ChartXAxisProps for the KendoReact Chart component. |
chartXAxisItemProps |
object |
ChartXAxisItemProps for the KendoReact Chart component. |
chartYAxisProps |
object |
ChartYAxisProps for the KendoReact Chart component. |
chartYAxisItemProps |
object |
ChartYAxisItemProps for the KendoReact Chart component. |
chartTooltipProps |
object |
ChartTooltipProps for the KendoReact Chart component. |