This is a migrated thread and some comments may be shown as answers.

Line overlapping

10 Answers 87 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ruben
Top achievements
Rank 1
Ruben asked on 05 Nov 2018, 03:34 PM

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.

10 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 07 Nov 2018, 09:55 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ruben
Top achievements
Rank 1
answered on 07 Nov 2018, 01:51 PM
Thank you, Tsvetina, for your help.
0
Ruben
Top achievements
Rank 1
answered on 07 Nov 2018, 09:06 PM

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

0
Tsvetina
Telerik team
answered on 08 Nov 2018, 02:18 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ruben
Top achievements
Rank 1
answered on 09 Nov 2018, 02:48 AM

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

0
Tsvetina
Telerik team
answered on 09 Nov 2018, 01:47 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ruben
Top achievements
Rank 1
answered on 09 Nov 2018, 05:07 PM

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.

 

0
Ruben
Top achievements
Rank 1
answered on 09 Nov 2018, 05:10 PM
Sorry, I forgot a link: https://dojo.telerik.com/EwEjiwAT/5
0
Accepted
Tsvetina
Telerik team
answered on 13 Nov 2018, 12:44 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ruben
Top achievements
Rank 1
answered on 13 Nov 2018, 09:10 PM

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

Thank you, Ruben.

Tags
Charts
Asked by
Ruben
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Ruben
Top achievements
Rank 1
Share this question
or