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?

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>   

did your site get hacked or is something awry? the igniteui site is 1/2 english and 1/2 chinese or japenese characters...doesn't matter what browser I use the view the site and my local settings are ENG - USA

Hristo:

I think we are on the same page. i do want to display a range... but for the second "axis" I don;t want to display y_axis or x_axis labels...just the data.

I tam thinking it has to be a composite chart. so I guess my question is can we display a scatterline and a range chart as a composite without the secondary axis labels showing?