How to force markers from scatter chart to appear above scatterLine series?

[zhivko.zhelezov]

Hi folks, 

I am having kendo chart with two series. The first one is a scatterLine series and the second one is a simple scatter series with visible markers. Currently the second series is drawn first and the markers appear bellow the points from the scatterLine series, which makes them hard to see. I tried changing the order of the series, when they are defined, but this did not helped me. Tried switching the scatter with scatterLine and now the order matters. So how to proceed ​with this ​matter?

My second questions is about customizing the markers: how for example I can add an icon plus some text (which comes from the dataItem) next to it? I went trough your documentation, but wasn't able to find an answer.

 The third and final question is if there is a click event for the markers? Right now I use on click for series, but I want to isolate this only with clicking on the markers.

Kind Regards,

Zhivko

 

 

[EZ]

the seriesClick event also returns the individual point's dataitem (e.dataItem). See docs here:

 http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-seriesClick

For the icons, you can use custom visuals:

http://demos.telerik.com/kendo-ui/line-charts/visuals

and for labels you can use the series labels:

 http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels

[zhivko.zhelezov]

Ok then how to use property from the dataItem to be displayed in the custom visual marker. If I simply return it as 

markers: {
        visual: function (e) {
                 return e.dataItem.alarmsCount;
          },

 

[EZ]

In the visual function you have to draw what you want to see, not return a value. In the telerik demo, the are using the text of the dataItem.weather to assign an icon to the marker (you can use the drawing function to draw whatever you like...):

 

visual: function (e) {
  var src = kendo.format("../content/dataviz/chart/images/{0}.png", e.dataItem.weather);
  var image = new kendo.drawing.Image(src, e.rect);
  return image;
}

[zhivko.zhelezov]

Ok I am not very into the kendo.drawing library, but what I want to achieve is to have a simple yellow triangle with a number next to it that comes from the dataItem. Something like the code bellow, but placing the number from e.dataItem.alarmsCount next to the marker. How to do this?

 

markers: {
                    visual: function (e) {
                        return e.dataItem.alarmsCount;
                    },
                    type: "triangle",
                    visible: true,
                    size: 26,
                    background: "yellow"
                },

[EZ]

You don't need custom visuals for a triangle as it is one of the provided marker types. Here is how you display a yellow triangle with labels:

 

                    labels: {
                      visible: true,
                      position: "left",
                      font: "12px sans-serif",
                    },
                    markers: {
                    background: "yellow",
                      type: "triangle",
                      border: {
                        color: "yellow",
                        width: 2
                      }
                    },

Here is a DOJO demo:
http://dojo.telerik.com/@ezanker/UgeLU