This is a migrated thread and some comments may be shown as answers.

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

5 Answers 56 Views
Charts
This is a migrated thread and some comments may be shown as answers.
zhivko.zhelezov
Top achievements
Rank 1
zhivko.zhelezov asked on 30 Oct 2015, 04:12 PM

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

 

 

5 Answers, 1 is accepted

Sort by
0
EZ
Top achievements
Rank 2
answered on 30 Oct 2015, 05:51 PM

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

0
zhivko.zhelezov
Top achievements
Rank 1
answered on 02 Nov 2015, 08:21 AM

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

 

0
EZ
Top achievements
Rank 2
answered on 02 Nov 2015, 02:09 PM

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

0
zhivko.zhelezov
Top achievements
Rank 1
answered on 03 Nov 2015, 11:23 AM

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"
                },

0
Accepted
EZ
Top achievements
Rank 2
answered on 03 Nov 2015, 01:44 PM

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

Tags
Charts
Asked by
zhivko.zhelezov
Top achievements
Rank 1
Answers by
EZ
Top achievements
Rank 2
zhivko.zhelezov
Top achievements
Rank 1
Share this question
or