We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

multiseries chart with range navigator

Data format  use to plot the multiline range navigator chart using javascript?

1 Reply

AT Anandaraj T Syncfusion Team March 11, 2015 08:32 AM UTC

Hi Kalpa,

Thanks for using Syncfusion products.

We are not able to understand your exact requirements clearly. We would like to know the following details so that we can provide a better solution.

1. Would you please let us know whether your requirement is to display more than one series in range navigator?

Multiple series can be displayed in range navigator by adding the required number of series in the series collection of range navigator.

Please refer the following code snippet to achieve this



                //Using multiple series in range navigator

                series: [{

                    type: 'line',

                    name: 'Product X',

                    enableAnimation: true,

                    dataSource: data.Open, xName: "XValue", yName: "YValue",

                    style: { borderWidth: 2 }



                    type: 'line',

                    name: 'Product Y',

                    enableAnimation: true,

                    dataSource: data.Close, xName: "XValue", yName: "YValue",

                    style: { borderWidth: 2 }



We have also prepared a sample for this and it can be downloaded from the following link


2. Would you please let us know whether you would like to know about the data format used for range navigator?

Chart and Range Navigator uses same format for data source. Any JSON data of array type with fields to bind with X value and Y value of the series can be used as data source for range navigator. The following code snippet describes the required data format for range navigator



        var data=[

            //XValue can be any property with double or date time or string value that will be bounded to the X value of series

            //YValue can be any property with double value that will be bounded to the Y value of series

            { 'XValue': 'value', 'YValue':'value', . . . . . .  },

            . . . . . . .

            . . . . . . .



The information provided would be of great help in providing a solution.

Please let us know if you have any concern.



Live Chat Icon For mobile
Up arrow icon