jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

React UI Components

  • Javascript/jQuery
  • Angular 2
  • React
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

React UI Components

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxScheduler
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxSortable
  • jqxTreeGrid
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxDataTable
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxTreeMap
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxEditor
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxRibbon
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxLayout
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxDockingLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart

jqxChart

  • Line & Area Series
    • Line Series
    • Stacked Line Series
    • 100% Stacked Line Series
    • Line Series Markers
    • Line Serie with Missing Points
    • Line Serie with Conditional Colors
    • Line Serie with Multiple Data Sources
    • Step Line Series
    • Spline Series
    • Area Series
    • Stacked Area Series
    • 100% Stacked Area Series
    • Area Spline Series
  • Column & Bar Series
    • Column Series
    • Column Series with Local Data
    • Stacked Column Series
    • Stacked and Grouped Column Series
    • 100% Stacked Columns
    • Column Serie with Conditional Colors
    • Column Range
    • Bar Series
    • Column Series Spacing
    • Negative Values
    • Negative Bar Series
    • Columns Series with Missing Values
    • Column Series with Labels
  • Pie & Donut Series
    • Pie Series
    • Pie Series Legend
    • Partial Pie Series
    • Donut Series
    • Donut Labels
  • Logarithmic Axis
    • Columns with Logarithmic Axis
    • Columns with base 10 Logarithmic Axis
    • Logarithmic Axis Base Line
    • Percentage Stacked Columns
    • Stacked Columns
    • Logarithmic X Axis
    • Spline Area
    • Columns Range
    • Waterfall Series
    • Stacked Waterfall Series
  • Zooming
    • Date/Time X-Axis Range Selection
    • Non-Date X-Axis Range Selection
  • Waterfall Series
    • Waterfall Series
    • Waterfall with Multiple Series
  • OHLC & Candlestick
    • Candlestick Chart
    • OHLC Chart
  • Polar & Spider Series
    • Polar Chart
    • Partial Polar Chart
    • Polar Series Bands
    • Spider Chart
  • Funnel & Pyramid Series
    • Funnel Chart
    • Stacked Funnel Chart
    • Pyramid Chart
    • Stacked Pyramid Chart
  • Bubble Chart
  • Scatter Chart
  • Multiple Series Types
  • Live Updates
  • Live Updates Every Second
  • Live Updates Performance
  • Color Bands
  • Color Bands X Axis
  • Chart Annotations
  • Dashboard
  • Sparklines
  • Styling & Layout
    • Axis Position
    • Axis Orientation
    • Axis Settings
    • Axis Offset to Value
    • Axis Custom Offsets and Color Bands
    • Axis Custom Offsets
    • Intervals and Steps
    • Right to Left Layout
    • Text Rotation
    • Text Wrapping
    • Alternating Background Color
    • Tooltip Formatting
    • Chart Crosshairs
    • Grid Lines Dash Style
    • Greyscale Series
    • Custom Styling
    • Dark Background
    • Themes
  • Custom Drawing
  • Fluid Size
  • Chart Events
  • Chart RangeSelector Events
  • Export to Image
  • Chart Printing
  • Chart with Grid
  • Chart with Tabs
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'>
        Tasdas
    </title>
    <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="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxresponse.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        asda
    </div>
    <div id="app"></div>
    <script src="../build/chart_liveupdatesperformance.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxChart from '../../../jqwidgets-react/react_jqxchart.js';import JqxDropDownList from '../../../jqwidgets-react/react_jqxdropdownlist.js';import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';class App extends React.Component {
    componentDidMount() {
        this.refs.dropDownColors.on('change', (event) => {
            let value = event.args.item.value;
            this.refs.myChart.colorScheme(value);
            this.refs.myChart.update();
        });
        this.refs.btnPauseResume.on('click', (event) => {
            if (timer) {
                clearInterval(timer);
                this.refs.btnPauseResume.val('Resume');
                timer = undefined;
            }
            else {
                timer = setInterval(timerFunction, this.refreshTimeout());
                this.refs.btnPauseResume.val('Pause');
            }
        });

        let data = this.refs.myChart.source();
        let timerFunction = ()  => {
            data.splice(0, 1);
            data.push({
                key: data[data.length - 1].key + 1,
                value1: (Math.random() * 200) % 200 + 200,
                value2: (Math.random() * 200) % 200 + 500,
                value3: (Math.random() * 200) % 200,
            });
            this.refs.myChart.update();
        };
        let timer = setInterval(timerFunction, this.refreshTimeout());
    }
    refreshTimeout() {
        let timeout = 100;
        let response = new $.jqx.response();
        if (response && response.device) {
            if (response.device.type == 'Tablet') {
                timeout = 150;
            }
            else if (response.device.width < 800 ||
                response.device.height < 500 ||
                response.device.type == 'Phone' ||
                (response.browser.svg == false && response.browser.canvas == false)
            ) {
                timeout = 1000;
            }
        }
        return timeout;
    }
    render() {      
        let data = [];
        let max = 200;
        for (let i = 0; i < 20; i++) {
            data.push({
                key: i,
                value1: (Math.random() * 200) % 200 + 200,
                value2: (Math.random() * 200) % 200 + 500,
                value3: (Math.random() * 200) % 200,
            });
        }

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

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

        let xAxis =
            {
                dataField: 'key',
                unitInterval: 1,
                valuesOnTicks: true,
                gridLines: { visible: false }
            };

        let valueAxis =
            {
                minValue: 0,
                maxValue: 750,
                title: { text: 'Index Value<br>' },
            };

        let seriesGroups =
            [
                {
                    type: 'line',
                    useGradientColors: false,
                    series: [
                        { dataField: 'value1', displayText: 'value1', lineWidth: 2, symbolType: 'circle' }
                    ]
                },
                {
                    type: 'spline',
                    useGradientColors: false,
                    columnsGapPercent: 50,
                    alignEndPointsWithIntervals: true,
                    series: [
                        { dataField: 'value2', displayText: 'value2' }
                    ]
                },
                {
                    type: 'column',
                    useGradientColors: false,
                    columnsGapPercent: 50,
                    alignEndPointsWithIntervals: true,
                    series: [
                        { dataField: 'value3', displayText: 'value3' }
                    ]
                }
            ];

        let colorsSchemesList = ['scheme01', 'scheme02', 'scheme03', 'scheme04', 'scheme05', 'scheme06', 'scheme07', 'scheme08'];
        return (
            <div>
                <JqxChart ref='myChart' style={{ width: 850, height: 500 }}
                    title={'Live updates performance'} description={'Data changes every ' + this.refreshTimeout() + ' milliseconds'}
                    showLegend={true} enableAnimations={false} padding={padding}
                    titlePadding={titlePadding} source={data} xAxis={xAxis}
                    valueAxis={valueAxis} colorScheme={'scheme01'} seriesGroups={seriesGroups}
                />
                <table style={{ width: 680 }}>
                    <tbody>
                        <tr>
                            <td style={{ paddingLeft: 50 }}>
                                <p>Pause / Resume updates:</p>
                                <JqxButton ref='btnPauseResume' value='Pause' width={160} />
                            </td>
                            <td>
                                <p>Select color scheme:</p>
                                <JqxDropDownList ref='dropDownColors'
                                    width={200} height={25} selectedIndex={0}
                                    dropDownHeight={100} source={colorsSchemesList}
                                />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        )
    }
}

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

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2017. All Rights Reserved.