Get max and majorUnit values from multiple valueAxis's.

8 posts, 0 answers
  1. Andy
    Andy avatar
    10 posts
    Member since:
    Mar 2014

    Posted 15 May 2014 Link to this post

    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.






































  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 19 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Andy
    Andy avatar
    10 posts
    Member since:
    Mar 2014

    Posted 21 May 2014 Link to this post

    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

  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 23 May 2014 Link to this post

    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.

     
  6. Andy
    Andy avatar
    10 posts
    Member since:
    Mar 2014

    Posted 23 May 2014 in reply to Hristo Germanov Link to this post

    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
  7. Andy
    Andy avatar
    10 posts
    Member since:
    Mar 2014

    Posted 26 May 2014 in reply to Andy Link to this post

    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
  8. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 27 May 2014 Link to this post

    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.

     
  9. Andy
    Andy avatar
    10 posts
    Member since:
    Mar 2014

    Posted 30 May 2014 in reply to Hristo Germanov Link to this post

    Hristo, that solved the problem - maximum / majorUnit divisibility.

    Many thanks,

    Andy
Back to Top
UI for ASP.NET MVC is VS 2017 Ready