jQuery UI Widgets › Forums › Chart › Area-Spline within free ranges ?

Tagged: , , , , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  oliver13 9 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Area-Spline within free ranges ? Posts
  • March 20, 2015 at 7:05 pm Area-Spline within free ranges ? #68919

    oliver13
    Participant

    Hello,

    is it possible to create an area spline chart that looks like the chart in the attached example ?
    If yes, could you please provide a short sample ?
    Sample

    Thank you
    Oliver

    March 21, 2015 at 7:01 am Area-Spline within free ranges ? #68930

    Dimitar
    Participant

    Hello Oliver,

    Unfortunately, such a chart type is not supported. There is one called ‘splinearea’, but it is different. We suggest you take a look at all available types in the jqxChart demo section. Maybe one of them will be useful in your scenario.

    Best Regards,
    Dimitar

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

    March 21, 2015 at 8:19 am Area-Spline within free ranges ? #68934

    oliver13
    Participant

    Hi Dimitar,
    Thank you for the quick response; but regrettably there is no chart type that could be a replacement.

    Another question for workaround: is there a way to fill the area between 2 spline series ? This might help a lot.

    Thanks
    Oliver

    March 21, 2015 at 9:27 am Area-Spline within free ranges ? #68936

    Dimitar
    Participant

    Hi Oliver,

    Yes, there is such a type – ‘splinerangearea’. Here is an example with it:

    <!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "tab",
                datafields: [
                    { name: 'Year' },
                    { name: 'HPI' },
                    { name: 'BuildCost' },
                    { name: 'Population' },
                    { name: 'Rate' }
                ],
                url: '../sampledata/homeprices.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settings = {
                title: "U.S. History Home Prices (1950-2010)",
                description: "Source: http://www.econ.yale.edu/~shiller/data.htm",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 15, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Year',
                        minValue: 1950,
                        maxValue: 2010,
                        unitInterval: 5,
                        valuesOnTicks: true
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            alignEndPointsWithIntervals: false,
                            type: 'splinerangearea',
                            valueAxis:
                            {
                                visible: true,
                                unitInterval: 20,
                                title: { text: 'Index Value' },
                                labels: {
                                    horizontalAlignment: 'right',
                                    formatSettings: { decimalPlaces: 0 }
                                }
                            },
                            series: [
                                    { dataFieldFrom: 'HPI', dataFieldTo: 'BuildCost', displayText: 'Real Home Price Index', opacity: 0.7 }
                            ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>
</body>
</html>

    You may be able to combine two such series and a ‘spline’ series (for the median) to achieve your initial requirement.

    Best Regards,
    Dimitar

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

    March 21, 2015 at 5:53 pm Area-Spline within free ranges ? #68940

    oliver13
    Participant

    Perfect ! Thank you very much !

    Best regards
    Oliver

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.