Add subtext

[Chili]

Hi,

I want to add subtext to my charts. Lets say I have this bar chart with a title legend etc.

This is the main code:

@model Model1

<div class="demo-section k-content wide">
    @(Html.Kendo().Chart<App.Models.Model2>()
   .title ()
   .datasource()
   .series()
   .catAxis()
   .valAxis()
   .valaxis()

)

[Tsvetina]

Hello,

I am not sure from your description where exactly you want to add the subtext. In general, if you want to add content to the Chart, which is not a part of its default elements—legend, title, series, axes, etc., you can draw it as custom content in the Chart render event.

You can see some examples of drawing custom content in the Chart here:
Render Custom Plot Bands
Draw on Scatter Plots Surface
Place Text in Donut Chart Center

The same logic can be used in the Core Chart wrapper. The only difference is in how you attach the event handler:

.Events(e=>e.Render("onRender"))

// .....

<script>
    function onRender(e){
        // handle custom content draw
    }
</script>

Regards,
Tsvetina
Progress Telerik

[Chili]

Hello,

this picture describes the best on how i want it. The text in the subbox need to have the properties of the model where the chart is based on. Reference to my quesiton:

@model Model1

<div class="demo-section k-content wide">
    @(Html.Kendo().Chart<App.Models.Model2>()
   .title ()
   .datasource()
   .series()
   .catAxis()
   .valAxis()
   .valaxis()
     <span></span> //This does not work
)

 

Hopefully this is a bit better explained

[Tsvetina]

Hello,

If you need the full data of the Chart to use in the custom UI, you can access it through the DataSource at any point. Calling chart.dataSource.view() will return the full list of data items that are bound in the Chart.

With regard to adding the text, indeed you can draw a custom Text in the Render event of the Chart like suggested in my previous post, as there is no built-in Chart element to show under the category axis. Here is a quick example:

@(Html.Kendo().Chart()
            .Name("chart")
            .Title("Gross domestic product growth /GDP annual %/")
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
            )
            .ChartArea(chartArea => chartArea
                .Background("transparent")
                .Margin(m=>m.Bottom(60))
            )
            .Series(series =>
            {
                series.Column(new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }).Name("India");
                series.Column(new double[] { 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 }).Name("Russian Federation");
                series.Column(new double[] { 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 }).Name("Germany");
                series.Column(new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }).Name("World");
            })
            .CategoryAxis(axis => axis
                .Name("series-axis")
                .Line(line => line.Visible(false))
            )
            .CategoryAxis(axis => axis
                .Name("label-axis")
                .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
            )
            .ValueAxis(axis => axis
                .Numeric()
                    .Labels(labels => labels.Format("{0}%"))

                    // Move the label-axis all the way down the value axis
                    .AxisCrossingValue(0, int.MinValue)
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0}%")
                .Template("#= series.name #: #= value #")
            )
            .Events(e=>e.Render("onRender"))
)

<script>
    function onRender(e) {
        var size = e.sender.surface._size;
        var rect = new kendo.geometry.Rect([size.width / 3, size.height - 40], [size.width / 3, 40]);
        var layout = new kendo.drawing.Layout(rect, {
            justifyContent: "center"
        });
        var text = new kendo.drawing.Text("My Custom Subext", [0, 0], {
            font: "18px Verdana,Arial,sans-serif"
        });
        layout.append(text);
        layout.reflow();
        e.sender.surface.draw(layout);
    }
</script>

Regards,
Tsvetina
Progress Telerik

[Chili]

Is there a same alternative for the gauge? By the gauge I also can't add titles and such...

[Tsvetina]

Hi,

The RadialGauge and LinearGauge widgets do not have a render event and the needed public APIs to draw on their surface. You would need to add the title as HTML element in the page.

Regards,
Tsvetina
Progress Telerik

[Chili]

Hello,

thank for your responses. I have managed to set the text on my bar charts. Could you maybe send a demo of adding centered subtext to a gauge? I have tried it but I don't get the result I wanted.... Thanks in advance and happy holidays!

Kind regards.

[Alex Hajigeorgieva]

Hello, Chili,

Since the Kendo UI gauges do not have a render event, you may either add an HTML element that will hold the desired text on the page or use the same approach as my colleague shared with you but referencing the surface instance private property:

var size = gauge.surface._instance._size;
var rect = new kendo.geometry.Rect([size.width / 3, size.height - 40], [size.width / 3, 40]);
var layout = new kendo.drawing.Layout(rect, {
    justifyContent: "center"
});
var text = new kendo.drawing.Text("My Custom Subext", [0, 0], {
    font: "18px Verdana,Arial,sans-serif"
});
layout.append(text);
layout.reflow();
gauge.surface.draw(layout);

There seems to be an issue with the Dojo at the moment, so I prepared this CodePen for your reference:

https://codepen.io/anon/pen/BvZGBo

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Chili]

Hello, I've tried to implement the suggested code. Only, why won't it work? Below are the things I have tried:

Main code:

<!--Defines the gauge-->
    @(Html.Kendo().RadialGauge()
    .Name("gauge1")
    //Get value of controller through ajax
    .Pointer(pointer => pointer.Value(0).Color("black"))

 

The JavaScript

At this part I am struggling. Because the gauge in the pen is created by JavaScript and not through ASP.

Main JS code

var size = gauge.surface._instance._size;
   var rect = new kendo.geometry.Rect([size.width / 3, size.height - 40], [size.width / 3, 40]);
   var layout = new kendo.drawing.Layout(rect, {
       justifyContent: "center"
   });
   var text = new kendo.drawing.Text("My Custom Subext", [0, 0], {
       font: "18px Verdana,Arial,sans-serif"
   });
   layout.append(text);
   layout.reflow();
   gauge.surface.draw(layout);

 

These are the things I have tried:

 

//Option 1
var gauge = $("#gauge1").kendoRadialGauge().data("kendoRadialGauge");

//Option 2
//I already defined the scale in the main code. But did it extra here
    var gauge = $("#gauge").kendoRadialGauge({
        pointer: {
            value: $("#gauge-value").val()
        },
        scale: {
            minorUnit: 5,
            startAngle: -60,
            endAngle: 240,
            max: 100,
            rangesize: 20
        }
    }).data("kendoRadialGauge");

//Option 3
    var gauge = $("#gauge1").data("kendoRadialGauge");

 

The thing that isn't working:

The text won't display.

[Chili]

After some trying I found something weird:

This is my code:

$(document).ready(function () {

       var gauge = $("#gauge1").kendoRadialGauge().data("kendoRadialGauge");
       var size = gauge.surface._instance._size;
       var rect = new kendo.geometry.Rect([size.width / 3, size.height - 10], [size.width / 3, 40]);
       var layout = new kendo.drawing.Layout(rect, {
           justifyContent: "center"
       });
       var text = new kendo.drawing.Text("My Custom Subext", [0, 0], {
           font: "20px Verdana,Arial,sans-serif"
       });
       layout.append(text);
       layout.reflow();
       gauge.surface.draw(layout);
   });

 

When I add the ready I get the exact same gauge as in the codepen. When I remove the ready I get my own gauge back.

Is this a bug or...??

[Chili]

Hi, 

I found the error. Only. How can I add 2 sublabels?
If I have 2 implemented it only follows the css of the first item

Code:

var gauge = $("#gauge1").data("kendoRadialGauge");

        var sizeHeader = gauge.surface._instance._size;
        var rectHeader = new kendo.geometry.Rect([sizeHeader.width / 3, sizeHeader.height - 175], [sizeHeader.width / 3, 40]);
        var sizeFooter = gauge.surface._instance._size;
        var rectFooter = new kendo.geometry.Rect([sizeFooter.width / 3, sizeFooter.height - -10], [sizeFooter.width / 3, 40]);


        var layoutHeader = new kendo.drawing.Layout(rectHeader, {
            justifyContent: "center"
        });
        var header = new kendo.drawing.Text("My Custom Subext", [0, 0], {
            font: "13px Arial"
        });

        var layoutFooter = new kendo.drawing.Layout(rectFooter, {
            justifyContent: "center"
        });
        var footer = new kendo.drawing.Text("My Custom Subext", [0, 0], {
            font: "20px Arial"
        });

        layoutHeader.append(header, footer);
        layoutHeader.reflow();
        gauge.surface.draw(layoutHeader, layoutFooter);

[Tsvetina]

Hi,

Yes, the problem in the previous snippet was that the gauge was re-initialized when you tried to customize it. The new snippet does not contain this code, so I assume you also noticed it.

With regard to the current problem, I see you have declared two Layouts with the same bounding rectangle coordinates:

var sizeHeader = gauge.surface._instance._size;
var rectHeader = new kendo.geometry.Rect([sizeHeader.width / 3, sizeHeader.height - 125], [sizeHeader.width / 3, 40]);
var sizeFooter = gauge.surface._instance._size;
var rectFooter = new kendo.geometry.Rect([sizeFooter.width / 3, sizeFooter.height - -10], [sizeFooter.width / 3, 40]);

This means that if you add both Layouts to the gauge surface, their content will overlap. If you want to use two layouts, make sure you specify different coordinates (the highlighted code).

Currently, you add both the header and footer text to layoutHeader, so they are rendered one after the other in the same layout and layoutFooter remains empty:

layoutHeader.append(header, footer);
layoutHeader.reflow();
gauge.surface.draw(layoutHeader, layoutFooter);

If none of the above explanations helps you fix the appearance of the labels, show us how you expect them to look, as I am not sure about the exact requirement.

Regards,
Tsvetina
Progress Telerik