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

Different Markers Type in Line Chart

7 Answers 218 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Felipe
Top achievements
Rank 1
Felipe asked on 25 Mar 2021, 03:54 PM

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?

 

7 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 26 Mar 2021, 02:13 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Felipe
Top achievements
Rank 1
answered on 29 Mar 2021, 02:04 PM

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?

0
Accepted
Vessy
Telerik team
answered on 30 Mar 2021, 03:06 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Felipe
Top achievements
Rank 1
answered on 30 Mar 2021, 09:12 PM

Hi Vessy,

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

 

 

Regards,

Felipe

 

0
Vessy
Telerik team
answered on 31 Mar 2021, 05:22 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Felipe
Top achievements
Rank 1
answered on 06 Apr 2021, 08:02 PM

Hi Vessy,

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

 

Regards

0
Vessy
Telerik team
answered on 07 Apr 2021, 09:49 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Chart (HTML5)
Asked by
Felipe
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Felipe
Top achievements
Rank 1
Share this question
or