Different Markers Type in Line Chart

[Felipe]

Hello

I am working with a line chart and currently I can only set the same type of marker for each data point as the blue line, but I need to set a different type of markers for each data point as the red line. How can I do it?

 

[Vessy]

Hi Felipe,

You can customize the the markers for the separate items in a series by implementing a Visual template for the markers:

https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template

Based on the Kendo UI drawing API, you can draw any shape you want. For example, you can use a similar logic, drawing different shapes base on the category value (the xAxis label):

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Series 1">
                        <MarkersAppearance Visual="markersVisual" MarkersType="Cross" Size="20" BorderWidth="6" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="50" />
                            <telerik:CategorySeriesItem Y="80" />
                            <telerik:CategorySeriesItem Y="60" />
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="30" />

                        </SeriesItems>
                    </telerik:LineSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                        <telerik:AxisItem LabelText="5" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
        <script>
            function markersVisual(e) {
                var geom = kendo.geometry;
                var draw = kendo.drawing;
                var origin = e.rect.origin;
                var center = e.rect.center();
                var bottomRight = e.rect.bottomRight();
                var category = e.category;

                var currColor = e.options.border.color;
                                
                if (category == 1) {
                    //draw rect
                    var rectGeometry = new geom.Rect([center.x - 10, center.y - 10], [20, 20]);
                    var path = new draw.Rect(rectGeometry,
                        {
                            stroke: { color: currColor, width: 1 },
                            fill: { color: currColor }
                        }
                    );

                    return path;
                }
                else if (category == 2) {
                    //draw triangle
                    var path = new draw.Path({
                        stroke: { color: currColor, width: 10 },
                        fill: { color: currColor }
                    })
                        .moveTo(origin.x, bottomRight.y)
                        .lineTo(bottomRight.x, bottomRight.y)
                        .lineTo(center.x, origin.y)
                        .close();
                }

                else if (category == 3) {
                    var CircGeometry = new geom.Circle([center.x, center.y], 10);

                    var path = new kendo.drawing.Circle(CircGeometry, {
                        stroke: { color: currColor, width: 3 },
                        fill: { color: currColor }
                    });
                }
                else if (category == 4) {

                    //or draw any desired custom shape lice arc
                    var radius = 10;
                    var path = new kendo.drawing.Path({
                        stroke: {
                            color: currColor,
                            width: 5,
                        }
                    }).moveTo(center.x + radius, center.y + radius)
                        .arc(0, 180, radius, 10, true);
                }
                else {
                    //or return the default visual
                    return e.createVisual();
                }

                return path;
            }
        </script>

 

Regards,
Vessy
Progress Telerik

[Felipe]

Hi Vessy,

Thank you so much, Now I need to add other shapes like brackets, greater than, less than and down arrow, can you help me with that?

[Vessy]

Hi Felipe,

The easiest way to draw a more complex shape is to use images instead drawing the shape from scratch. Such approach is used in the Kendo chart Visual Template demo here:

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

This logic from the visual is corresponding for the image rendering in the markers. It demonstrates how to use "weather" field value in order to have different shapes for each point:

function markersVisual(e) {
     //render image markers
     var src = kendo.format("../content/dataviz/chart/images/{0}.png", e.dataItem.weather); //weather is a datafield from the database
     var image = new kendo.drawing.Image(src, e.rect);
     return image;
}

Regards,
Vessy
Progress Telerik

[Felipe]

Hi Vessy,

Once again, thank you very much, one last question, how do I make the image bigger?

 

 

Regards,

Felipe

 

[Vessy]

Hi Felipe,

You can either create a new rect object when creating the image, or call the setSize() method of the default one after the image object is created:

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

 

Regards,
Vessy
Progress Telerik

[Felipe]

Hi Vessy,

¿Is there a way to do all of the above from the server, modifying the library or adding them?

 

Regards

[Vessy]

Hi Felipe,

The Visual template functionality of the HtmlChart is based on the Kendo UI Drawing API which is implemented entirely on the client-side, so updating it on the server-side is not possible.

Regards,
Vessy
Progress Telerik