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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

multiseries chart with range navigator

Thread ID:





118452 Mar 10,2015 07:10 AM UTC Mar 11,2015 08:32 AM UTC JavaScript 1
Tags: ejChart
kalpa serashiya
Asked On March 10, 2015 07:10 AM UTC

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

Anandaraj T [Syncfusion]
Replied On 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.




This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon