Develop with FastTrack

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 }
            }
        }
    }
]

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' },
                },
            ],
        }
    ]
  }
 
  return (
    <div className="App">
      <div style={{width: '480px'}}>
        <TwoLayersChart
          data={exampleData}
          config={BulletChartConfig}
          chartType="bullet"
          settings={{
            bulletChartProps: {
              chartSeriesItemProps: {
                color: '#fff',
                data: [
                  [
                    52,
                    55
                  ]
                ]
              },
              chartSeriesLabelsProps: {
                font: 'bold 12pt sans-serif',
                position: 'center'
              },
              chartTitleProps: {
                text: 'Range'
              },
              chartTooltipProps: {
                render: () => {}
              },
              chartValueAxisItemProps: {
                max: 100,
                min: 0
              }
            }
          }}
          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;

Example rendering

The code in Display a bullet chart from search results renders this:

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' },
                },
            ],
        }
    ]
  }
 
  return (    
    <div className="App">
      <div style={{width: '480px'}}>
        <TwoLayersChart
          data={exampleData}
          chartType="polar"
          config={PolarChartConfig}
          settings={{
            polarChartProps: {
              chartProps: {
                  height: 500,
                  width: 500
              },
              chartseriesLabelProps: {
                  position: '',
                  content: ''
              },
              chartXAxisItemProps: {
                  startAngle: '-90',
                  majorUnit: '30'
              },
              chartYAxisItemProps: {
                  visible: false
              }
            }
          }}
          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;

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"
          settings={{
            scatterPlotChartProps: {
              chartTitleProps: {
                text: 'Scatter Example'
              }
            }
          }}
          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;

Example rendering

The example code renders this: