Multiple Axes Charts

[Dragos]

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.

[EZ]

Could you not just add

visible: false

to the axes you want hidden?

API DOC

 DEMO

[Dragos]

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 

[EZ]

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
     });
 }

 

[Dragos]

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

[EZ]

Can you create a DOJO that reproduces the issue?  Are you talking about tooltips?

[Dragos]

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.

[EZ]

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;
 }

[Dragos]

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
}

[EZ]

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

[Dragos]

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 ?

[EZ]

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

 

[Dragos]

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

Best , 

Dragos.

[Dragos]

Hey Ez,

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

[EZ]

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

 

 

[Dragos]

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.