How can I plot a serie starting from a desired X value?

[Nilton]

Hello Kendo support!

 

I am trying to plot a chart in which a serie ends in a desired x value and another serie starts from a desired x value. (I already tried the valueAxis min property, but this is not what I need at all).

 

To make the question clear, I am uploading two images that represents what I want graphically ;)

 

I need this quickly, since I need to deliver a feature with this behavior on the chart.

 

Thank you very much!

 

Best regards,

Nilton

[Alex Hajigeorgieva]

Hello, Nilton,

If I understand the requirement correctly, then you can achieve the behaviour you described by providing data that meets this criteria.

In your case this would mean that there are a couple of series in which one of the series has missing values for the first few categories, while the other has missing values for the last few categories and they both overlap with an exact same value in the middle, for example:

               series: [{
                    data: [null, null,  40, 32, 34]
                }, {
                    data: [19, 25, 40, null, null]
                }]

Here is a runnable example showing this behaviour, have a look at it and let us know in case you had something else in mind:

https://dojo.telerik.com/@bubblemaster/oFAyIPeP

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Nilton]

Hello Alex Hajigeorgieva
Thanks for the answer!

Looks like using null values works for type: "line" series, but doesn't work for the type: "area" series. On my feature, I need it to work with the type: "area" charts :(

 

Please take a look on the uploaded picture to see what I want graphically :)

 

These below solutions doesn't work, because I want a serie stopping to draw at a desired x value and another serie starting to draw from a desired x value.

Your solution with type: "area" => https://dojo.telerik.com/AGisaVov

The feature I need to deliver, it doesn't work with null values => https://dojo.telerik.com/iguLozaK/12

 

Best regards,
Nilton

[Georgi]

Hello Nilton,

I have already answered your question in the ticket, but I will post the same response here in case someone else from the community has the same query:

A possible solution would be to set the missingValues setting to `gap`.

e.g.

      {
        name: 'Actual',
        color: '#98ECCA',
        tooltip: {
          template: 'Actual Qty' + ': #= value #m³'
        },
        line: {
          color: '#10EF62',
          width: 2
        },
        missingValues: "gap",
        maxXaxys: 8,
        data: ['0', '3', '4', '4', '4', '12', '13', '14', '15', null, null, null, null],
        zIndex: 1,
        opacity: 0.25
      },
      {
        missingValues: "gap",
        name: 'Forecasted',
        color: '#888888',
        line: {
          dashType: 'dash',
          width: 2
        },
        tooltip: {
          template: 'Forecasted Qty' + ': #= value #m³'
        },
        data: [null, null, null, null, null, null, null, null, '15', '15', '18', '20', '24'],
        zIndex: 0,
        opacity: 0.1
      },

For your convenience I have modified the provided sample:

• https://dojo.telerik.com/iguLozaK/14
  

Regards,
Georgi
Progress Telerik

[Nilton]

Yes!

 

Thank you very much Georgi!

This is exactly what I wanted :D

 

Best regards!