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.
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
0
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
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
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
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
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
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
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
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
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
Many thanks,
Andy