This is a migrated thread and some comments may be shown as answers.
Add subtext
11 Answers 9 Views
This is a migrated thread and some comments may be shown as answers.
Chili
Top achievements
Rank 1
Chili asked on 06 Dec 2018, 11:04 AM

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()
 
)

 

How can I add a span properly with the data from Model2?

11 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 11 Dec 2018, 08:39 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chili
Top achievements
Rank 1
answered on 12 Dec 2018, 07:44 AM

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
)

<span>@Model.prop</span> //But it does here ONLY model1

 

Hopefully this is a bit better explained

0
Accepted
Tsvetina
Telerik team
answered on 14 Dec 2018, 12:55 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chili
Top achievements
Rank 1
answered on 18 Dec 2018, 03:41 PM
Is there a same alternative for the gauge? By the gauge I also can't add titles and such...
0
Tsvetina
Telerik team
answered on 21 Dec 2018, 10:33 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chili
Top achievements
Rank 1
answered on 21 Dec 2018, 01:55 PM

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.

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 26 Dec 2018, 08:45 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chili
Top achievements
Rank 1
answered on 02 Jan 2019, 09:57 AM

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.

0
Chili
Top achievements
Rank 1
answered on 02 Jan 2019, 11:24 AM

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...??

0
Chili
Top achievements
Rank 1
answered on 03 Jan 2019, 08:23 AM

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);
0
Tsvetina
Telerik team
answered on 03 Jan 2019, 03:56 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Chili
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Chili
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or