Add subtext

12 posts, 2 answers
  1. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 06 Dec 2018 Link to this post

    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?

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 11 Dec 2018 Link to this post

    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.
  3. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 12 Dec 2018 in reply to Tsvetina Link to this post

    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

  4. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 14 Dec 2018 Link to this post

    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.
  5. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 18 Dec 2018 in reply to Tsvetina Link to this post

    Is there a same alternative for the gauge? By the gauge I also can't add titles and such...
  6. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 21 Dec 2018 Link to this post

    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.
  7. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 21 Dec 2018 in reply to Tsvetina Link to this post

    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.

  8. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 26 Dec 2018 Link to this post

    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.
  9. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 02 Jan 2019 in reply to Alex Hajigeorgieva Link to this post

    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.

  10. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 02 Jan 2019 in reply to Chili Link to this post

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

  11. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 03 Jan 2019 Link to this post

    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);
  12. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 03 Jan 2019 Link to this post

    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.
Back to Top