jQuery UI Widgets Forums Chart How to have different chart type per series in each series group

This topic contains 9 replies, has 3 voices, and was last updated by  Dimitar 7 years, 2 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • Grego
    Participant

    HI ,
    I want a multiple left and right y axis with different chart types for each series.

    I have 6 series and I want to have the series split two on the right and two on the left
    I want it to be as follows

    Left axis 1 series 1 : line
    Left axis 1 series 2 : Area
    Left axis 2 series 1 : line

    right axis 1 series 1 : spline
    right axis 1 series 2 : splinearea
    right axis 2 series 2 : splinearea

    Below is the code from your sample page. Can you show me how to do this with the code below?

    I cant figure it out. I don’t think it is possible because the series structure doesn’t have a type property. If it did it would be simple.

    thanks

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>jqxChart Stacked Column & Spline Area Combination Example</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.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”>
    $(document).ready(function () {
    // prepare chart data as an array
    var sampleData = [
    { Day: ‘Monday’, Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
    { Day: ‘Tuesday’, Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
    { Day: ‘Wednesday’, Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
    { Day: ‘Thursday’, Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
    { Day: ‘Friday’, Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
    { Day: ‘Saturday’, Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
    { Day: ‘Sunday’, Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
    ];
    // prepare jqxChart settings
    var settings = {
    title: “Fitness & exercise weekly scorecard”,
    description: “Time spent in vigorous exercise by activity”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    colorScheme: ‘scheme05’,
    borderLineColor: ‘#888888’,
    xAxis:
    {
    dataField: ‘Day’,
    unitInterval: 1,
    tickMarks:
    {
    visible: true,
    interval: 1,
    color: ‘#888888’
    },
    gridLines:{
    visible: false,
    interval: 1,
    color: ‘#888888’
    },
    axisSize: ‘auto’
    },
    valueAxis:
    {
    visible: true,
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
    title: { text: ‘Time in minutes’ },
    tickMarks: {color: ‘#888888’},
    gridLines: {color: ‘#888888’},
    axisSize: ‘auto’
    },
    seriesGroups:
    [
    {
    type: ‘splinearea’,
    series: [
    { dataField: ‘Goal’, displayText: ‘Personal Goal’, opacity: 0.7 }
    ]
    },
    {
    type: ‘stackedcolumn’,
    columnsGapPercent: 50,
    seriesGapPercent: 5,
    series: [
    { dataField: ‘Running’, displayText: ‘Running’ },
    { dataField: ‘Swimming’, displayText: ‘Swimming’ },
    { dataField: ‘Cycling’, displayText: ‘Cycling’ }
    ]
    }
    ]
    };
    // setup the chart
    $(‘#chartContainer’).jqxChart(settings);
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’chartContainer’ style=”width:850px; height:500px”>
    </div>
    </body>
    </html>


    Dimitar
    Participant

    Hi gregobleshshcuk,

    Please check out the following example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_axis_position.htm?arctic. We hope it is helpful to you.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Grego
    Participant

    Hi ,
    thanks for your link . But it’s not what I was after . If you look at the section below. You have a seriesgroup on the right (which is what I want) both using the same axis but I want tow different chart types (say area and line). This example is only giving me the same type on one axis.

    {
    type: ‘spline’,
    valueAxis:
    {
    title: { text: ‘Index Value’ },
    position: ‘right’,
    unitInterval: 20,
    maxValue: 200,
    gridLines: { visible: false },
    labels: {
    formatSettings:
    {
    decimalPlaces: 0
    },
    horizontalAlignment: ‘left’
    }
    },
    series: [
    { dataField: ‘HPI’, displayText: ‘Real Home Price Index’ },
    { dataField: ‘BuildCost’, displayText: ‘Building Cost Index’ }
    ]
    }

    My real usages is that I want to chart Total CPU % as a area chart and then application CPU % as a line both of these on one axis on the right. Then I want other performance counters like LogicalDisk queues or bytes on the left.

    I don’t if this can be done without having an override type value on the series structure. If I take the above and change it to be how I think it could work it would be like this

    {
    type: ‘area’,
    valueAxis:
    {
    title: { text: ‘Index Value’ },
    position: ‘right’,
    unitInterval: 20,
    maxValue: 200,
    gridLines: { visible: false },
    labels: {
    formatSettings:
    {
    decimalPlaces: 0
    },
    horizontalAlignment: ‘left’
    }
    },
    series: [
    { dataField: ‘HPI’, displayText: ‘Real Home Price Index’ },
    { dataField: ‘BuildCost’, displayText: ‘Building Cost Index’, type: ‘line’ }
    ]
    }

    So in my above sample I would have a seriesgroup which is defined as being on the right with a default chart type as area. In this seriesgroup I have two series which the first one is using the default type of area but the second series is overriding the type to line.

    cheers
    Greg


    Dimitar
    Participant

    Hi Greg,

    Here is an example, based on the demo Line Series, but with two series of different types – one ‘line’ and one ‘spline’. Both share the same y-axis.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jqxChart Line Series Example</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.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">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "csv",
                    datafields: [
                        { name: 'Date' },
                        { name: 'S&P 500' },
                        { name: 'NASDAQ' }
                    ],
                    url: '../sampledata/nasdaq_vs_sp500.txt'
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
                var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
                // prepare jqxChart settings
                var settings = {
                    title: "U.S. Stock Market Index Performance",
                    description: "NASDAQ Composite compared to S&P 500",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 10, top: 5, right: 10, bottom: 5 },
                    titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                    {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                        },
                        type: 'date',
                        baseUnit: 'month',
                        valuesOnTicks: true,
                        minValue: '01-01-2014',
                        maxValue: '01-01-2015',
                        tickMarks: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        unitInterval: 1,
                        gridLines: {
                            visible: true,
                            interval: 3,
                            color: '#BCBCBC'
                        },
                        labels: {
                            angle: -45,
                            rotationPoint: 'topright',
                            offset: { x: 0, y: -25 }
                        }
                    },
                    valueAxis:
                    {
                        visible: true,
                        title: { text: 'Daily Closing Price<br>' },
                        tickMarks: { color: '#BCBCBC' }
                    },
                    colorScheme: 'scheme04',
                    seriesGroups:
                        [
                            {
                                type: 'line',
                                series: [
                                        { dataField: 'S&P 500', displayText: 'S&P 500' }
                                    ]
                            },
                            {
                                type: 'spline',
                                series: [
                                        { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
    
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Grego
    Participant

    Hi ,
    Thanks. I think I didn’t form my question correctly before, sorry .

    I have create a chart in JSFIDDLE. Here is the link
    http://jsfiddle.net/GregGecko/y67n196m/1/

    If you look at the legend you will see
    Left SG1, Series A
    Left SG1, series C
    Left SG2 , Series B
    Left SG3, Series D
    Right SG4 Series F
    Right SG4, Series H
    Right SG5, Series E
    Right SG6, Series G

    What I want is
    Left SG1, Series A and Left SG1, series C on one axis together on the left
    Left SG2 , Series B on a separate axis on the left
    Left SG3, Series D on a separate axis on the left
    Right SG4 Series F and Right SG4, Series H on one axis together on the right
    Right SG5, Series E on a separate axis on the right
    Right SG6, Series G on a separate axis on the right

    So the chart should have 3 axis on the left and 3 axis on the right

    I basically want to be able to designate a series to any axis left and any chart type together on any axis.

    Sorry for the confusion before. I hope you can help .

    cheers
    Greg O


    Dimitar
    Participant

    Hi Greg O,

    Here is how to achieve this: http://jsfiddle.net/Dimitar_jQWidgets/mg8ehxqe/.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Grego
    Participant

    Hi Dimitar ,
    Thnak-you I can see how this is done now.
    To summaries
    You create a seperate SeriesGroup per series
    You set the min and max the same for each series to be displayed on the one axis
    You set the first seriesgroup visible = true and all the other seriesgroups which are displayed on the axis as false

    This does the trick . Thanks
    THe problem here is clicking on the first legend (Left SG1, Series A) item in your example makes the axis disappear yet legend item Left SG1, series C is still being charted.

    A suggestion would be to have an override type on each series so as to define the chart type . Like below

    {
    valueAxis: {
    position: ‘right’,
    },

    type: ‘line’,
    series: [{
    type:’area’,
    dataField: ‘e’,
    displayText: ‘Right SG5, Series E’
    }]
    }

    thanks for your help
    Greg O


    Dimitar
    Participant

    Hi Greg O,

    Yes, this is the only drawback of this approach. Unfortunately, we cannot provide you with a solution. However, you can disable series toggling by setting the series property enableSeriesToggle to false.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    kalyan Bhadra
    Participant

    Hi,
    Is it possible to have multiple value axis for a stacked column chart? or suggest me a chart type which has multiple value axis and to be look like a stacked column chart.
    Thanks
    Kalyan


    Dimitar
    Participant

    Hi Kalyan,

    Unfortunately, this cannot be achieved. Each seriesGroup can have a different value axis. However, ‘stackedcolumn’ series in a single stack are part of the same seriesGroup, thus they share a common value axis. This can be seen in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_stacked_column_series.htm?light.

    You may have multiple ‘stackedcolumn’ seriesGroups with different value axes, but their series cannot be stacked together, unfortunately.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.