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

Get max and majorUnit values from multiple valueAxis's.

7 Answers 268 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 15 May 2014, 10:33 AM
Hello,

We're currently using version 2014.1.318.

We have a chart containing two  valueAxis's:

valueAxis: [{
            name: "volumeAxis",
            title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
            labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
            color: '#adadad'
        }, {
            name: "time",
            visible: false
        }]

I'm trying to dynamically obtain the max and majorUnit value for the "volumeAxis".

I've tried:
var maxValueAxis = chart.options.series[0].valueAxis.max;
but the chart.options.series[0].valueAxis is undefined, the hint to use this came from http://www.telerik.com/forums/dynamic-value-axes-for-multi-axis-chart


The reason we're trying to do this is to dynamically increase the chart's volumeAxis by one unit (majorUnit), so eventually achieving something like this:

var maxValueAxis = kchart.options.series[0].valueAxis.max;
var majorUnit = kchart.options.series[0].valueAxis.majorUnit;

valueAxis = [{
    name: "volumeAxis",
    title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
    labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
    color: '#adadad',
    max: maxValueAxis + majorUnit
}, {
    name: "time",
    visible: false
}];

chart.setOptions({ valueAxis: valueAxis });
chart.redraw();

Thanks advance.






































7 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 19 May 2014, 10:36 AM
Hello Andy,

Could you please try to get the max of your data in dataSource change event(you can get the maximum from data aggregation or you can calculate it). After that based on axis.min and axis.max you can calculate your major/minor units.

Note that you can't access the axis from series because they are not there. In the axis we hold only the reference name. You can get the live reference from chart._plotArea.axes.

I hope this hepls.

Regards,
Hristo Germanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Andy
Top achievements
Rank 1
answered on 21 May 2014, 04:08 PM
Hi Hristo,

Your suggestions did work but I when used with Panes the chart completely screwed up so I eventually reverted to the my previous version (without max / majourUnit adjustments).

The problem I'm still having is that the column, data labels are being cropped.

I've tried using 

panes: [{   clip: false}] 

as suggested in one of your previous answers to another post of mine but unfortunately this did not work.

I've included a link to a JSFiddle demonstrating the cropping problems with the column data labels

Link to JSFiddle Demo 

Thanks,

Andy

0
Hristo Germanov
Telerik team
answered on 23 May 2014, 07:12 AM
Hi Andy,

You can try:
1) to change the maximum of the value axis.
2) change the labels position. For example you can you insideEnd

Regards,
Hristo Germanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Andy
Top achievements
Rank 1
answered on 23 May 2014, 03:51 PM
Hi Hristo, I tried your suggestion  (link to revised js fiddle example) which works well for bars above a certain height but for columns that are low to the horizontal axis then the label is cropped, as seen for the final column to the right in the js fiddle example.

Is it possible to dynamically select the most suitable position of the labels via scripting? For example something like:
if seriesColumnHeightPixels < seriesColumnLabelHeightPixels then seriesLabelPosition = "above" else seriesLabelPosition = "insideEnd" 

Thanks,

Andy
0
Andy
Top achievements
Rank 1
answered on 26 May 2014, 01:39 PM
Hello,

I eventually implemented a way to expand the y-axis but the problem with it is that the upper gridline is now missing from the chart; see jsfiddle example in link below..

Link to JS Fiddle Example 3 showing missing grid line (topmost grid-line)

Is there a way to add this line in - I've tried adjusting margins and paddings for different parts of the script.

Thank you
0
Hristo Germanov
Telerik team
answered on 27 May 2014, 03:46 PM
Hi Andy,

You need to set the majorUnit to be dividable to the maximum or you can add a plot band with the same color as majorGridlLne color with value equal to the axis max.

Regards,
Hristo Germanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Andy
Top achievements
Rank 1
answered on 30 May 2014, 01:39 PM
Hristo, that solved the problem - maximum / majorUnit divisibility.

Many thanks,

Andy
Tags
Chart
Asked by
Andy
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Andy
Top achievements
Rank 1
Share this question
or