Line overlapping

[Ruben]

Hello,

Is it possible to prevent line overlapping on multiple axis chart? On second sample, purple line completely hide blue line, so we have to show markers.

Thank you in advance,

Ruben.

[Tsvetina]

Hello Ruben,

Offsetting the lines themselves would not be possible as it would make their values incorrect in relation to their respective value axes. However, if you change the max value of one of the value axes, its scale will change and lines should not overlap. Here is an example where I change the max value dynamically, so you can see the difference:
https://dojo.telerik.com/EwEjiwAT

Regards,
Tsvetina
Progress Telerik

[Ruben]

Thank you, Tsvetina, for your help.

[Ruben]

Hi Tsvetina,

It is very strange, but there is no max field.

Code:

    var chart = $("#chart").data("kendoChart");
    var options = chart.options.valueAxis;    
    var m = options[0].max;

I should admit, that your code work perfectly. Is something wrong with my chart? I have kendo version 2017.2.621

 

Thank you,

Ruben

[Tsvetina]

Hello Ruben,

The max option would not be available if you had not set it explicitly beforehand. However, you can still get the min and max value of a value axis by using its range() method:

var axis = chart.getAxis("wind");
var axisMax = axis.range().max;

Here is an updated example which updates the axis current max value by adding 20 to it:
https://dojo.telerik.com/EwEjiwAT/3

Regards,
Tsvetina
Progress Telerik

[Ruben]

Hello Tsvetina,

Your example is working perfectly fine, thank you. But there is a problem. After max value manually changed, it will not recalculate even if data changes. Even method redraw cannot fix it. I mean, redraw() actually redraws line affecting new data, but max value doesn't change any more.

https://dojo.telerik.com/EwEjiwAT/4

Thank you,

Ruben

[Tsvetina]

Hello Ruben,

I am not sure I understand the problem that you describe. Could you elaborate a bit more on what behavior you expect to see after changing the value axis max value? It looks to me like the value axis and series are redrawn correctly after the max value is increased. Or am I missing any detail out?

Regards,
Tsvetina
Progress Telerik

[Ruben]

Hello Tsvetina,

Sorry, if I wasn't clear. Please check attached images.

Capture-0.JPG - after script runs first time.

Capture-1.JPG - after Redraw button clicked. Chart automatically recalculates max value.

Capture-2.JPG - start over - Run script, then click Change max value button, then click Redraw button.

So, what happened, originally max value is not set, and it calculated automatically. Every time data is changes max property value is recalculated. After max value is set in a script, it doesn't change automatically anymore even if data was changed. My question is, how to enable automatic recalculating max value in a script? Because, in my case, after analyzing data I need to set max value or allow kendo chart to calculate it to avoid line overlapping.

Thank you, Ruben.

 

[Ruben]

Sorry, I forgot a link: https://dojo.telerik.com/EwEjiwAT/5

[Tsvetina]

Hi Ruben,

The Chart uses an automatic value only if there isn't a value set in the options. So, if you want the ​max ​to change after applying new data, you can:

• change it again based on the new data values
• remove the option, so the Chart can calculate it itself

In the context of the example we are working for, it would look like this:

function chartRedraw(){

  windData = [8, 8, 10, 12, 10, 9, 35, 50, 65];

 

  var chart = $("#chart").data("kendoChart"); 

  chart.options.series[1].data = windData;



  var max = windData.reduce(function(a, b) {

    return Math.max(a, b);

  });

  // set new max value

  chart.options.valueAxis[0].max = max + 10;

  chart.redraw();

}

or

function chartRedraw(){
  windData = [8, 8, 10, 12, 10, 9, 35, 50, 65];

  var chart = $("#chart").data("kendoChart");
  var options = chart.options.valueAxis;

  chart.options.series[1].data = windData;
  if(options[0].max){
    delete options[0].max;
  }
  chart.options.valueAxis = options;
  chart.redraw();
}

Here is the example with the latter approach used:
https://dojo.telerik.com/EwEjiwAT/6

Regards,
Tsvetina
Progress Telerik

[Ruben]

Perfect! Благодаря!

Thank you, Ruben.