Multiple Axes Charts

16 posts, 2 answers
  1. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 15 Feb Link to this post

    Hello, 

     

    I have a situation where i am clicking on a list of names and building chart series with some options on the fly like: 

    for (var i = 0; i < data.Data.length; i++) {
                    chartOptions.valueAxis.push({     
                        name: data.Data[i].name + '-' + i,
                        min: data.Data[i].data.min(),
                        max: data.Data[i].data.max(),
                        title: {
                            text: data.Data[i].name + '-' + i,
                            visible: false
                        },
                        visible: true
                    });
                }
     
                // Draw Series Axes
                for (var i = 0; i < data.Data.length; i++) {
                    chartOptions.series.push({
                        axis: data.Data[i].name + '-' + i,
                        data: data.Data[i].data,
                        color: seriesOptions[i].color,
                        highlight: {
                            markers: {
                                visible: true
                            }
                        },
                        name: data.Data[i].name + '-' + i,
                        markers: {
                            visible: true
                        },
                        style: seriesOptions[i].style,
                        type: seriesOptions[i].type,
                    });
                }
     
                // Draw Categories Axes
                chartOptions.categoryAxis.categories = [];
                for (var i = 0; i < data.Categories.length; i++) {
                    chartOptions.categoryAxis.categories.push(data.Categories[i]);
                }

    Now what is happening is for each series that i add, one new value axis is added too. My question is:

    Is it possible to keep all this functionality but somehow default to have just a single value axis shown all the time while also keep the value axis array in match with the series array ?

     I have attached a picture in case i am not being clear with what i am trying to achieve.

  2. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 15 Feb in reply to Dragos Link to this post

    Could you not just add

    visible: false
    to the axes you want hidden?

    API DOC

     DEMO

  3. Kendo UI is VS 2017 Ready
  4. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 16 Feb in reply to EZ Link to this post

    I add axes dynamically so each time i add a series i add a new axis, like show in the picture and i don't wanna have 8 multiple axis next to the chart if i add 8 series, i just want one 
  5. Answer
    EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 16 Feb Link to this post

    While adding dynamically, make only the first one visible:

    // Draw Series Axes
     for (var i = 0; i < data.Data.length; i++) {
         chartOptions.series.push({
             axis: data.Data[i].name + '-' + i,
             data: data.Data[i].data,
             color: seriesOptions[i].color,
             highlight: {
                 markers: {
                     visible: true
                 }
             },
             name: data.Data[i].name + '-' + i,
             markers: {
                 visible: true
             },
             style: seriesOptions[i].style,
             type: seriesOptions[i].type,
             visible: i == 0
         });
     }

     

  6. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 16 Feb in reply to EZ Link to this post

    Thank's :D.. that solve my issue.

    I have one more question tho, when i add the axis with name i place an i after so that i can add a series 2 times but when i hover over it says "seriesName"-0, is there a way to format the -0 out? 

     

    I need to add the i so that i can add multipleAxis for 2 or more series with the same name

  7. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 16 Feb in reply to Dragos Link to this post

    Can you create a DOJO that reproduces the issue?  Are you talking about tooltips?
  8. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 16 Feb in reply to EZ Link to this post

    I can't provide a DOJO since i am getting Data from c# controller and i also have a lot of other functionality, but i can provide a picture that show exactly what i mean.
  9. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 16 Feb Link to this post

    how are you setting up the tooltip? are you using a template?

    If you don't use a shared tooltip: http://dojo.telerik.com/@ezanker/inOPI

     

             tooltip: {
                 shared: false,
                 visible: true,
                 template: "#= RemoveNumbers( series.name ) # : #= value #"
             }
     
     
    function RemoveNumbers(cat){        
       var idx = cat.indexOf("-");
       var fixed = cat.substring(0, idx);
       return fixed;
     }

  10. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 16 Feb in reply to EZ Link to this post

    Hey,

     This is how i set up my template, but i need to have shared tooltip just like in the picture.

    tooltip: {
        format: "{0}",
        shared: true,
        template: "#= kendo.toString(value, 'n2')#", // n2 = Number Of Decimals After . (2)
        visible: true
    }

  11. Answer
    EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 16 Feb Link to this post

    In that case, use the sharedTemplate property of the tooltip:

     

    <script id="template" type="text/x-kendo-template">
      <div>#: category #</div>
        <table>
          # for (var i = 0; i < points.length; i++) { #
            <tr><td>#: RemoveNumbers(points[i].series.name)# :</td><td> #: points[i].value #</td></tr>
          # } #
        </table>
    </script>

     

     

    tooltip: {
        shared: true,
        visible: true,
        sharedTemplate:kendo.template($("#template").html())
    }

     

    function RemoveNumbers(cat){        
        return cat.substring(0, cat.indexOf("-"));
    }

     

    Updated DEMO

  12. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 17 Feb in reply to EZ Link to this post

    Works like a charm, thanks. I do have a problem tho, i have all my code in a separate js  file, so i am guessing i have to write that template inline right ?
  13. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 17 Feb in reply to Dragos Link to this post

    you can just use a string in your separate file:

     

    tooltip: {
      shared: true,
      visible: true,
      sharedTemplate: "<div>#: category #</div><table># for (var i = 0; i < points.length; i++) { #<tr><td>#: RemoveNumbers(points[i].series.name)# :</td><td> #: points[i].value #</td></tr># } #</table>"
    }

     

    DOJO

     

  14. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 17 Feb in reply to EZ Link to this post

    That was what i was saying, anyways thank you very much for your help. Much appreciated !.

    Best , 

    Dragos.

  15. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 08 Mar in reply to Dragos Link to this post

    Hey Ez,

    Do you know how i can show on each series hover the correct value axis for it ? 

  16. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 08 Mar in reply to Dragos Link to this post

    I don't see anyway to change axis visibility in runtime (perhaps someone from Telerik can chime in), and using setOptions causes the chart to redraw and the tooltip to go away.  You could use seriesClick to change the visibility when a series is clicked:

    seriesClick: function(e){
      var axisName = e.series.axis;
     
      e.sender.setOptions({
        valueAxes: [{
        name: "rain",
        color: "#007eff",
        min: 0,
        max: 60,
        visible: axisName == "rain"
        }, {
            name: "wind",
            color: "#73c100",
            min: 0,
            max: 60,
            visible: axisName == "wind"
        }, {
            name: "temp",
            min: -30,
            max: 30,
            visible: axisName == "temp"
            }]                                    
      });                               
    }

    Updated DEMO

     

     

  17. Dragos
    Dragos avatar
    44 posts
    Member since:
    Dec 2015

    Posted 22 Mar in reply to EZ Link to this post

    Hey Ez.

     

    Maybe you can help me with a thing i run into while doing some charts. You can find a link to a post here 

    http://www.telerik.com/forums/category-axis-labels-display-error

     

    Any help is much appreciated.

Back to Top
Kendo UI is VS 2017 Ready