Want to show string type labels on x axis of range navigator with provided JSON

[Vaishali Jain]

Hi, I want to show string type labels on x axis of range navigator and id's on the y axis with following JSON:

[

    {

        "id": 24,

        "name": "Q1 2016"

    },

    {

        "id": 25,

        "name": "Q2 2016"

    },

    {

        "id": 26,

        "name": "Q3 2016"

    }],

    {

        "id": 27,

        "name": "Q4 2016"

    },

    {

        "id": 28,

        "name": "Q1 2017"

    },

    {

        "id": 29,

        "name": "Q2 2017"

    },

    {

        "id": 30,

        "name": "Q3 2017"

    },

    {

        "id": 31,

        "name": "Q4 2017"

    },

    {

        "id": 32,

        "name": "Q1 2018"

    },

    {

        "id": 33,

        "name": "Q2 2018"

    },

    {

        "id": 34,

        "name": "Q3 2018"

    },

    {

        "id": 35,

        "name": "Q4 2018"

    },

    {

        "id": 36,

        "name": "Q1 2019"

    },

    {

        "id": 37,

        "name": "Q2 2019"

    },

    {

        "id": 38,

        "name": "Q3 2019"

    },

    {

        "id": 39,

        "name": "Q4 2019"

    }
]

I want to select a range of these name(quarters) using range navigator, I tried that but name(quarters) is not displaying. Here is the code

<ejs-rangenavigator style='display:block' align='center' id='containerDouble' labelPosition='Outside' [width]='width'

                      (changed)='changed($event)' (load)="load($event)" [tooltip]='tooltipRange'>

                      <e-rangenavigator-series-collection>

                        <e-rangenavigator-series name='Data'>

                        </e-rangenavigator-series>

                      </e-rangenavigator-series-collection>

                    </ejs-rangenavigator>

  xAxisLabels: string[] = []; // Array to hold x-axis labels

  public tooltipRange: Object = { enable: true , displayMode: 'Always' };

 

  changed(event: any) {

    // Handle range navigator change event if needed

    console.log('Range navigator changed:', event);

  }

  load(args: any) {

    console.log(args, 'args');

    args.rangeNavigator.series[0].xName = 'id'; // Map id to the x-axis

  args.rangeNavigator.series[0].yName = 'name'; // Map name to the labels

    args.rangeNavigator.series[0].dataSource = this.rangeList;

  args.rangeNavigator.axisSettings = { majorTickLines: { interval: 1, labels: this.xAxisLabels } };

}

   this.rangeFilterListObservableData$ =

    this._trendDemoService.rangeLimitListObservable$.subscribe({

      next: (data) => {

        if (data !== undefined && data !== null) {

          this.rangeList = data;

          for (const rangeIndex in this.rangeList) {

            this.rangeList[rangeIndex]['value'] =  this.rangeList[rangeIndex]['id']

            this.rangeList[rangeIndex]['legend'] =  this.rangeList[rangeIndex]['name']

          }

            this.options.stepsArray = this.rangeList;

            this.value = this.rangeList[0]['value'];

            this.priorPeriodIdForHeatMap = this.rangeList[0]['value'];

            this.priorPeriodIdForLineChart = this.rangeList[0]['value'];

            const minId = Math.min(...this.rangeList.map((item: any) => item.id));

            const maxId = Math.max(...this.rangeList.map((item: any) => item.id));

            this.xAxisLabels = Array.from({length: maxId - minId + 1}, (_, i) => (minId + i).toString());

            console.log(this.xAxisLabels, 'xAxisLabels');

        }

      },

    });

[Nishanthi Panner Selvam]

Vaishali,

Greetings from Syncfusion.

We have analyzed your query based on that, valueType as Category (string type labels on X-Axis) is not supported for the rangeNavigator. Currently, it only supports the following valueTypes:

• Double
• DateTime
• Logarithmic
• DateTimeCategory

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Vaishali Jain]

hi  Nishanthi Panner Selvam,

Thanks for replying. Is there any way to map the range slider with id's but on hover those id's can we show names?

thanks,

Vaishali

[Nishanthi Panner Selvam]

Vaishali,

We have analyzed your query based on that we suggest you to use labelRender event to map axislabel (string type labels on X-Axis) as per requirement. We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

public labelRender(args) {

       let labels = ["Q1 2016", "Q1 2016", "Q1 2016", "Q1 2016", "Q1 2017", "Q1 2017", "Q1 2017", "Q1 2017", "Q1 2018", "Q1 2018",  "Q1 2018", "Q1 2018]

        args.text = labels[this.count];

        this.count ++;

};

Screenshot:

Sample: https://stackblitz.com/edit/angular-kxnd2s-fdwcsz?file=src%2Fapp.component.html

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Vaishali Jain]

hi,

Thanks for the help!

I need some more help on this. I have tried this taken name as label and plot id on axis but when I am changing the slider it is giving me in between numbers also like, id 24, 25, 26, 27 is ok but it is giving me like 24.16 something...I don't want in between decimal ids. I just want the id's which is in my sample JSON and also I want to show only every 4th id not all the id's on slider let say

Q1 2016 ......Q4 2016.....Q1 2017......Q4 2017 like this.

Please help me with that

thanks,

Vaishali

[Swetha Babu]

Vaishali,

We can set restrict the decimal value in the label text by setting the cancel argument as true in the labelRender event of the range navigator. For the other labels, we can set the labels based on your requirement by using the text argument in the labelRender event of the range navigator. We have created an angular application to demonstrate the same. Please find the below stackblitz link for your reference.

Sampel link: https://stackblitz.com/edit/angular-ykle7d-czvuc9

Code Snippet:

public axisLabelRender(args: IAxisLabelRenderEventArgs): void {

        if (args.text.indexOf('.') > -1) {

            args.cancel = true;

        }

        this.ele = this.dataSource.find(e => e['id'] == args.text)

        args.text = this.ele["name"];

    };

Screenshot:

Kindly, revert us if you have any concerns.

[Garima Jain]

hie 
please help me with label 
https://stackblitz.com/edit/angular-ykle7d-uxcfdn?file=src%2Fapp.component.ts,src%2Fapp.component.html
I want to display labels for the following cases only 

1- Display the main datasource 0th index label as name on range slider. Ex from above stackblitz - this.dataSource[0].name

2. Display the main datasource length - 1 index label  label as name on range slider 

Ex from above stackblitz - this.dataSource[15].name

3. Display labels for all the values ranges which are selected. For ex from above stackblitz - display all ticks & labels from 25 & 35 inclusive both 25 - 35 & in between 25 -35 
4 selected range label should also update when ranges are changed. 

[Swetha Babu]

Garima,

We have validated your reported queries. Please check with the below options.

Query 1 & 2: Display the main datasource 0th index label and Display the main datasource length - 1 index label 

We can display the first label and last label by disabling the cancel argument for the first and last label and enabling the cancel argument for other labels. We have modified the provided sample based on your requirement. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-ykle7d-jmukbg?file=src%2Fapp.component.ts

Code Snippet:

if (args.value === this.dataSource[0]["id"] || args.value === this.dataSource[this.dataSource.length - 1]["id"]

    ) {

      this.ele = this.dataSource.find((e) => e['id'] == args['value']);

      console.log(this.ele);

      args.text = this.ele['name']; // Set the label text

    } else {

      args.text = ''; // Set the label text

    }

Screenshot:

Query3 & Query4:  Display labels for all the values ranges which are selected and selected range label should also update when ranges are changed. 

We can render the axis labels for all the points and customize the labels using the axisLabelRender event of the chart. Initially, we can render the axis labels for the selected range as the axisLabelRender event will be triggered at the beginning. However, when changing the selected range, the axisLabelRender event will not be triggered. Therefore, we do not have the option to render the axis labels based on the selected range. We have created an angular application to render the axis labels for the selected range initially. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-ykle7d-gcdhan?file=src%2Fapp.component.ts

Code Snippet:

if (

      (labelId >= startId && labelId <= endId) ||

      labelId === startId ||

      labelId === endId || args.value === this.dataSource[0]["id"] || args.value === this.dataSource[this.dataSource.length - 1]["id"]

    ) {

      this.ele = this.dataSource.find((e) => e['id'] == args['value']);

      console.log(this.ele);

      args.text = this.ele['name']; // Set the label text

    } else {

      args.text = ''; // Set the label text

    }

Screenshot:

Kindly, revert us if you have any concerns.

[Garima Jain]

hie , thanks for response

needed that change event axis label render again on change. 
Query 2 - changed event is triggerd at first time also. Even when no change is made. Just on loading on the range navigator changed event is triggered. changed should be called only when ranges are changed

[Swetha Babu]

Garima,

As of now, the changed event will be triggered initially when we set the selected range initially. Please get back to us if you need any other assistance.