I followed the sample code in the links. I tried just a single chart...didn't get into the composite chart thing...but I can only get the rangeArea chart to work when setting the xAxis to a categoryX...it diesn't work with numericX...

in my program is at to numericX...the premise is that I am showing a scatter line chart...and for each timepoint I want to show the high/low values at that xAxis value timepoint.

here is my sample chart code

$(function () {
                                                                            function createScatterChart(selector, seriesType, dataSource) {
                                                                                $(selector).igDataChart({
                                                                                    width: "500px",
                                                                                    height: "400px",
                                                                                    legend: { element: "lineLegendFemoralRotation" },
                                                                                    dataSource: dataSource,
                                                                                    title: "Stem Rotation (degs)",
                                                                                    axes: [{
                                                                                        name: "xAxis",
                                                                                        type: "categoryX",
                                                                                        title: "Year"
                                                                                    }, {
                                                                                        name: "yAxis",
                                                                                        type: "numericY",
                                                                                        title: "Rotation (deg)",
                                                                                        interval: .25,
                                                                                        maximumValue: 2,
                                                                                        minimumValue: -2,
                                                                                        formatLabel: function (val) {
                                                                                            //var bVal = (val / 1000),
                                                                                            rounded = Math.round(val * 1000) / 1000;
                                                                                            return rounded;
                                                                                        }
                                                                                    }],
                                                                                    series: [{
                                                                                        name: "medial",
                                                                                        title: "Medial",
                                                                                        type: seriesType,
                                                                                        xAxis: "xAxis",
                                                                                        yAxis: "yAxis",
                                                                                        lowMemberPath: "lowData",
                                                                                        highMemberPath: "highData",
                                                                                        showTooltip: true,
                                                                                        tooltipTemplate: "tooltipTemplateRx"
                                                                                        
                                                                                    }],
                                                                                    horizontalZoomable: true,
                                                                                    verticalZoomable: true,
                                                                                    windowResponse: "immediate"
                                                                                });
                                                                            }


                                                                            var lineData = [

                                                                                    { "arg": 0, "week": 0, "rx": 0, "lowData": 0.0, "highData": 0.0 },
                                                                                    { "arg": 6 / 52, "week": 6, "rx": 0.035, "lowData": 0.010, "highData": 0.090 },
                                                                                    { "arg": 12 / 52, "week": 12, "rx": 0.090, "lowData": 0.05, "highData": 0.13 },
                                                                                    { "arg": 26 / 52, "week": 26, "rx": 0.079, "lowData": 0.080, "highData": 0.19 },
                                                                                    { "arg": 52 / 52, "week": 52, "rx": .088, "lowData": 0.095, "highData": 0.30 },
                                                                                    { "arg": 104 / 52, "week": 104, "rx": .33, "lowData": 0.20, "highData": 0.5 }
                                                                                ];
                                                                            

                                                                            createScatterChart("#chartFemoralRotation", "rangeArea", lineData);

                                                                        });

                                                                    </script>



                                                                    <table>
                                                                        <tr>
                                                                            <td id="lineLegendFemoralRotation" style="float: left"/>
                                                                        </tr>    
                                                                    </table>   

I have a sample of what we are trying to achieve. The sample has the xAxis categorized...We would need that numeric is the only difference. I can't upload to the forum...can you send me an email address that I can send the sample too?

Hello,

I'm just following up to see if you need any further assistance with this issue. If so please let me know.

Hi Chris,

I have been trying to figure this out for you, but am still unsuccessful. What you are trying to achieve is a combination of a scatterLine series with a range series/ However the scatterLine can go with a numeric axes, while the range series require categorized data to work. I know you understand that and just wanted to summarize the situation.

My hard efforts so far did not get me any success and this makes me think this scenario is not achievable, unless you decide to go with categorized data and rangeArea + line series, as my last attached sample shows. You can also log a Product Idea (using range series with numeric data) at http://ideas.infragistics.com, the Product Ideas site allows you to suggest new product features, new functionalities in existing products and controls, and even request new controls and products altogether. Members of the Infragistics Community then vote for the features and suggestions they want to see added to the products, resulting in the most popular features bubbling up to the top.
When planning new releases, our Product Management team will look at the most popular features and use your feedback to prioritize upcoming work.

Below you will find more details on how to log a product idea. Please let me know if I may be of any further assistance to you.

Steps to create your idea:

1.       Log into the Infragistics Product Ideas site at http://ideas.infragistics.com (creating a new login if needed).
2.       Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)
3.       Add your product idea and be sure to be specific and provide as much detail as possible. Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!

The benefits of submitting the product idea yourself include:

-          Direct communication with our product management team regarding your product idea.
-          Notifications whenever new information regarding your idea becomes available.

Additional benefits of the product idea system include:
-          Ability to vote on your favorite product ideas to let us know which ones are the most important to you.  You will have ten votes for this and can change which ideas you are voting for at any time.
-          Allow you to shape the future of our products by requesting new controls and products altogether.
-          You and other developers can discuss existing product ideas with members of our Product Management team.

The product ideas site allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you

Hristo:

Unfortunately the RangeArea chart does not achieve the desired results. if you look back in the thread I already tried that. The problem is that the rangeArea chart xAxis is of type categoryX this puts the data points at equidistant positions along the xAxis. My data is not categorized is numeric (i.e. x,y value pairs). The x values represent weeks so the data for "6" week has to go extremely close the yAxis where as the week 12 goes double that distance and week 52 etc. So I need the range area capability with a numeric xAxis...or a viable workaround.

I will be willing to send you privately a demo URL that you can check the data out so you get a better understanding. can you PM me at chris.vandenheuvel@halifaxbiomedical.com?

I see the ability now to upload a file...

So here's what we are trying to achieve. You will see two samples. The xAxis has to be numeric because our time points aren't perfectly contiguous and therefore cannot be categorized.

So each series would ideally have the patient data...(the solid green line) and then a band that shows the distribution (i.e. high/low range) and the dashed line shows the average of the group data.

What would be gravy would be if the series data could be coloured differently if part of it falls outside the normal distribution..that's the sample with the red line. Ideally if the patient data is inside the distribution it should be green (or colour of choice) and when it crosses outside the distribution it goes to red...I realize that part is probably a feature request.