React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        This is an example of Dashboard with multiple React charts. The dashboard is represented by four donut charts. The data series is represented by a column chart and a spline chart.
    </title>
    <meta name="description" content="This React Chart demo showcases how to create Dashboards'" />
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>

    <style type="text/css">
        .chart-inner-text {
            fill: #00BAFF;
            color: #00BAFF;
            font-size: 30px;
            font-family: Verdana;
        }
    </style>

</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        This is an example of Dashboard with multiple React charts. The dashboard is represented by four donut charts. The data series is represented by a column chart and a spline chart.
    </div>
    <div id="app"></div>
    <script src="../build/chart_dashboard.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxChart from '../../../jqwidgets-react/react_jqxchart.js';class App extends React.Component {
    render() {
        let data1 =
            [
                { text: 'Used', value: 55 },
                { text: 'Available', value: 9 }
            ];
        let data2 =
            [
                { text: 'Used', value: 37 },
                { text: 'Available', value: 63 }
            ];
        let data3 =
            [
                { text: 'Used', value: 89.3 },
                { text: 'Available', value: 166.7 }
            ];
        let data4 =
            [
                { text: 'Used', value: 47 },
                { text: 'Available', value: 53 }
            ];

        let data5 =
            [
                { hour: 0, latency: 235, requests: 3500 },
                { hour: 1, latency: 231, requests: 3400 },
                { hour: 2, latency: 217, requests: 3350 },
                { hour: 3, latency: 215, requests: 3260 },
                { hour: 4, latency: 225, requests: 3320 },
                { hour: 5, latency: 235, requests: 3400 },
                { hour: 6, latency: 239, requests: 3550 },
                { hour: 7, latency: 255, requests: 4100 },
                { hour: 8, latency: 251, requests: 4200 },
                { hour: 9, latency: 259, requests: 4500 },
                { hour: 10, latency: 265, requests: 4560 },
                { hour: 11, latency: 257, requests: 4500 },
                { hour: 12, latency: 265, requests: 4490 },
                { hour: 13, latency: 261, requests: 4400 },
                { hour: 14, latency: 258, requests: 4350 },
                { hour: 15, latency: 257, requests: 4340 },
                { hour: 16, latency: 255, requests: 4200 },
                { hour: 17, latency: 245, requests: 4050 },
                { hour: 18, latency: 241, requests: 4020 },
                { hour: 19, latency: 239, requests: 3900 },
                { hour: 20, latency: 237, requests: 3810 },
                { hour: 21, latency: 236, requests: 3720 },
                { hour: 22, latency: 235, requests: 3610 },
                { hour: 23, latency: 239, requests: 3550 },
            ];

        let padding = { left: 5, top: 5, right: 5, bottom: 5 };

        let titlePadding = { left: 5, top: 5, right: 5, bottom: 5 };

        let seriesGroups =
            [
                {
                    type: 'donut',
                    useGradientColors: false,
                    series:
                    [
                        {
                            showLabels: false,
                            enableSelection: true,
                            displayText: 'text',
                            dataField: 'value',
                            labelRadius: 120,
                            initialAngle: 90,
                            radius: 60,
                            innerRadius: 50,
                            centerOffset: 0
                        }
                    ]
                }
            ];

        let counter = 0;
        let drawBefore = (renderer, rect) => {
            let value;

            if (counter === 0) {
                value = data1[0].value;
            } else if (counter === 1) {
                value = data2[0].value;
            } else if (counter === 2) {
                value = data3[0].value;
            } else if (counter === 3) {
                value = data4[0].value;
            }

            let sz = renderer.measureText(value, 0, { 'class': 'chart-inner-text' });
            renderer.text(
                value,
                rect.x + (rect.width - sz.width) / 2,
                rect.y + rect.height / 2,
                0,
                0,
                0,
                { 'class': 'chart-inner-text' }
            );

            counter++;
        };

        let xAxis =
            {
                dataField: 'hour',
                displayText: 'Hour',
            };

        let latencyThreshold = 260;

        let seriesGroups2 =
            [
                {
                    type: 'column',
                    valueAxis:
                    {
                        title: { text: 'Request Latency [ms]<br>' },
                        position: 'left'
                    },
                    toolTipFormatSettings: { sufix: ' ms' },
                    series:
                    [
                        {
                            dataField: 'latency',
                            displayText: 'Request latency',
                            colorFunction: (value, itemIndex, serie, group) => {
                                return (value > latencyThreshold) ? '#CC1133' : '#55CC55';
                            }
                        }
                    ],
                    bands:
                    [
                        {
                            minValue: latencyThreshold,
                            maxValue: latencyThreshold,
                            lineWidth: 1,
                            color: 'red'
                        }
                    ]
                },
                {
                    type: 'spline',
                    valueAxis:
                    {
                        title: { text: 'Get Requests per second' },
                        position: 'right'
                    },
                    toolTipFormatSettings: { sufix: ' req/s' },
                    series:
                    [
                        {
                            dataField: 'requests',
                            displayText: 'Get requests',
                            lineColor: '#343F9B',
                            lineWidth: 2
                        }
                    ]
                },
            ];

        return (
            <div>
                <JqxChart ref='myChart1' style={{ width: 400, height: 180, float: 'left' }}
                    title={'Cluster capacity'} description={''} colorScheme={'scheme05'}
                    showLegend={false} enableAnimations={true} padding={padding} showToolTips={true}
                    titlePadding={titlePadding} source={data1} backgroundColor={'#FAFAFA'}
                    seriesGroups={seriesGroups} drawBefore={drawBefore}
                />

                <JqxChart ref='myChart2' style={{ width: 400, height: 180, float: 'left' }}
                    title={'Avg. CPU %'} description={''} colorScheme={'scheme05'}
                    showLegend={false} enableAnimations={true} padding={padding} showToolTips={true}
                    titlePadding={titlePadding} source={data2} backgroundColor={'#FAFAFA'}
                    seriesGroups={seriesGroups} drawBefore={drawBefore}
                />

                <JqxChart ref='myChart3' style={{ width: 400, height: 180, float: 'left' }}
                    title={'Storage capacity [TB]'} description={''} colorScheme={'scheme05'}
                    showLegend={false} enableAnimations={true} padding={padding} showToolTips={true}
                    titlePadding={titlePadding} source={data3} backgroundColor={'#FAFAFA'}
                    seriesGroups={seriesGroups} drawBefore={drawBefore}
                />

                <JqxChart ref='myChart4' style={{ width: 400, height: 180, float: 'left' }}
                    title={'Network utilization %'} description={''} colorScheme={'scheme05'}
                    showLegend={false} enableAnimations={true} padding={padding} showToolTips={true}
                    titlePadding={titlePadding} source={data4} backgroundColor={'#FAFAFA'}
                    seriesGroups={seriesGroups} drawBefore={drawBefore}
                />

                <JqxChart style={{ width: 800, height: 300 }}
                    title={'Get request per second & response latencies'} description={'(Aggregated values for the last 24h)'}
                    showLegend={false} enableAnimations={true} padding={padding} backgroundColor={'#FAFAFA'}
                    titlePadding={titlePadding} source={data5} xAxis={xAxis} showBorderLine={true}
                    seriesGroups={seriesGroups2} colorScheme={'scheme05'}
                />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));