Can someone show a code example for: Chart? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 2 voices, and was last updated by admin 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Can someone show a code example for: Chart? Posts

November 6, 2025 at 8:55 am Can someone show a code example for: Chart? #136341

jovanovic

Participant

Can jqxChart display multiple value axes and how do I set that up in jQuery?

November 10, 2025 at 8:09 am Can someone show a code example for: Chart? #136349

admin

Keymaster

Hi,

This is possible by using the jqxChart’s seriesGroups property. Please, take a look at the example below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jqxChart Multiple Axes Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@17.0.0/jqwidgets/styles/jqx.base.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@17.0.0/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@17.0.0/jqwidgets/jqxdraw.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@17.0.0/jqwidgets/jqxchart.core.js"></script>
</head>
<body>
    <div id="chartContainer" style="width:800px; height:500px;"></div>

    <script>
        $(document).ready(function () {
            var sampleData = [
                { Month: 'Jan', Temperature: 5, Rainfall: 30 },
                { Month: 'Feb', Temperature: 7, Rainfall: 25 },
                { Month: 'Mar', Temperature: 10, Rainfall: 40 },
                { Month: 'Apr', Temperature: 12, Rainfall: 55 },
                { Month: 'May', Temperature: 18, Rainfall: 60 },
                { Month: 'Jun', Temperature: 22, Rainfall: 70 }
            ];

            var settings = {
                title: "Weather Overview",
                description: "Temperature vs Rainfall",
                showLegend: true,
                source: sampleData,
                xAxis: {
                    dataField: 'Month'
                },
                valueAxis: {
                    // Default (left) value axis
                    title: { text: 'Temperature (°C)' },
                    unitInterval: 5,
                    minValue: 0,
                    maxValue: 30
                },
                seriesGroups: [
                    {
                        type: 'line',
                        valueAxis: {
                            title: { text: 'Temperature (°C)' },
                            position: 'left',
                            unitInterval: 5,
                            minValue: 0,
                            maxValue: 30
                        },
                        series: [
                            { dataField: 'Temperature', displayText: 'Temperature', lineWidth: 2 }
                        ]
                    },
                    {
                        type: 'column',
                        valueAxis: {
                            title: { text: 'Rainfall (mm)' },
                            position: 'right',
                            unitInterval: 10,
                            minValue: 0,
                            maxValue: 100
                        },
                        series: [
                            { dataField: 'Rainfall', displayText: 'Rainfall', opacity: 0.7 }
                        ]
                    }
                ]
            };

            $('#chartContainer').jqxChart(settings);
        });
    </script>
</body>
</html>

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.