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

Overlapping Labels and categories

18 Answers 413 Views
Chart
This is a migrated thread and some comments may be shown as answers.
DC
Top achievements
Rank 1
DC asked on 02 Dec 2019, 06:15 PM
I have looked all over the forums and I haven't been able to find a solution. I have attached some screenshot of the issues I keep encountering. This happens on only 3 of my charts which have long category names on the axis. I have tried some function and templates but have not been able to correct this. The issue only appears when exporting to pdf.

18 Answers, 1 is accepted

Sort by
0
DC
Top achievements
Rank 1
answered on 04 Dec 2019, 09:37 PM

This is what I am using to trim the categories so when I export they don't go into the chart but making them this small doesn't give you enough information about those categories to tell what they are.

 

function shortLabels(value) {
                      if (value.length > 1) {
                     value = value.substring(0, 18);
                    return value;
                      }
                  }

0
Angel Petrov
Telerik team
answered on 05 Dec 2019, 11:37 AM

Hi Denys,

Since shortening the labels is not the best solution for the case I can recommend splitting the label to go on multiple lines as shown here. Give this approach a try and let us know how it goes.

Regards,
Angel Petrov
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
DC
Top achievements
Rank 1
answered on 06 Dec 2019, 06:22 PM

Hi Angel,

Unfortuntaley that did not solve the issue for the categories as they just overlapped since there are many spaces in them. Is there anything to fix the legends from overlapping when exporting to pdf?

0
DC
Top achievements
Rank 1
answered on 06 Dec 2019, 08:49 PM

I managed to fix it with some spacing.

 

@(Html.Kendo().Chart<TelerikTestApp.DTOs.TestRCA>()
                        .Name("chart8")
                        .Theme("Flat")
                        .ChartArea(c => c.Height(1000).Width(1250))
                        .SeriesDefaults(seriesDefaults =>
                            seriesDefaults.Line().Style(ChartSeriesStyle.Smooth))
                        .Title("Defects Found in Test By RCA")
                        .Legend(legend => legend
                            .Position(ChartLegendPosition.Top)
                            .Spacing(25)

                        )
                        .DataSource(ds => ds.Read(read => read.Action("TestRCA", "Binding"))
                        .Group(g => g.Add(m => m.RootCause))
                        .Sort(s => s.Add("Count").Descending()))
                        .Series(series =>
                        {
                            series.Bar(m => m.Count, categoryExpression: m => m.Story)
                                  .Labels(l => l.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd))
                                  .Spacing(2)
                                  .Gap(2);

                        })
                        .CategoryAxis(axis => axis
                        .Labels(l => l.Visible(true).Template("#= shortLabels(value)#")))

                    )

Does the group in the above kendo undo the sort that I have on the count?

Ill upload the image of what I get and what I am trying to achieve.

 

Thanks again

0
DC
Top achievements
Rank 1
answered on 06 Dec 2019, 08:55 PM
I remove the group and still cannot get the sort to work either.
0
Angel Petrov
Telerik team
answered on 11 Dec 2019, 02:57 PM

Hi Denys,

In regards of the sorting, can toy please send us some sample data so we can populate the chart and checkout the case? Additionally please explain in detail how that exemplary data should be transformed according to your requirements.

Regards,
Angel Petrov
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
DC
Top achievements
Rank 1
answered on 11 Dec 2019, 03:38 PM

Hi Angel,

I have tried some hard coded data but it does not duplicate the issue.

Here is the gist of things, I have two bar charts that both get their data from Data Transfer Objects. For example: @(Html.Kendo().Chart<TelerikQaApp.DTOs.DefectsTestByRCA>(). This one uses the DefectsTestByRCA DTO.

I have a SQL Stored Proc in the back end that will send the result set through to these DTOs and that is what I am graphing.The problem lies in that one of the chart does not display the data in the way it is returned from the SQL Stored Proc. I am trying to get it to show the bars from highest count to lowest count. The "Chart1" image shows the data how I want it, unlike the "Chart2" image that I attached.

Both stored procs are the same except for the one column I group them in and the Kendos look just like this:

@(Html.Kendo().Chart<TelerikTestApp.DTOs.TestRCA>()
                        .Name("chart8")
                        .Theme("Flat")
                        .ChartArea(c => c.Height(1000).Width(1250))
                        .SeriesDefaults(seriesDefaults =>
                            seriesDefaults.Line().Style(ChartSeriesStyle.Smooth))
                        .Title("Defects Found in Test By RCA")
                        .Legend(legend => legend
                            .Position(ChartLegendPosition.Top)
                            .Spacing(25)

                        )
                        .DataSource(ds => ds.Read(read => read.Action("TestRCA", "Binding"))
                        .Group(g => g.Add(m => m.RootCause))
                        .Sort(s => s.Add("Count").Descending()))
                        .Series(series =>
                        {
                            series.Bar(m => m.Count, categoryExpression: m => m.Story)
                                  .Labels(l => l.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd))
                                  .Spacing(2)
                                  .Gap(2);

                        })
                        .CategoryAxis(axis => axis
                        .Labels(l => l.Visible(true).Template("#= shortLabels(value)#")))

                    )

The only difference is that I group on a different field in the DTO.

Thanks, DC

0
DC
Top achievements
Rank 1
answered on 11 Dec 2019, 05:53 PM

Would it be possible to add a function like this one

dataBound: function(e) {

var axis = e.sender.options.categoryAxis;

axis.categories = axis.categories.sort();

That instead of sorting the categories by alphabetical order it could sort them based on the count of each category?

If A on the axis had a 2 and B had a value of 6 then it would show it in the chart from top the bottom as B and then A.

0
Angel Petrov
Telerik team
answered on 16 Dec 2019, 03:26 PM

Hello Denys,

We need some additional time to check the case. We will get back to you as soon as possible.

Regards,
Angel Petrov
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
DC
Top achievements
Rank 1
answered on 16 Dec 2019, 03:41 PM

Hey Angel,

Thanks for the response. I figured out that both charts are actually doing the exact same thing.  When I group on that "RootCause" field in the code above, it displays the values of that field in Alphabetical Order.

Let me try to elaborate with an example. Lets assume the values of my grouped field are A, B and C and my categories are Test X, Test Y and Test Z. If my grouped field B has a Test X count of 30 and my grouped field A has a Test X count of 2 then the A will come first even though B has a higher count because it comes first alphabetically in the grouping. The only way I have been able to overwrite the group with a sort is by a function I found in some of the documentation but the function sorts the categories alphabetically rather than by count value.

 

0
Angel Petrov
Telerik team
answered on 18 Dec 2019, 02:04 PM

Hi Denys,

Thank you for providing additional details.

With the current implementation of the Char Hhml Helper there is no way to achieve the desired goal built-in. However you can replace it with a widget and add a custom group compare function to the datasource and use it to arrange the groups.

Another option would be to obtain a reference to the Chart which the Html Helper initializes on the client and call the setOptions method of the chart in which you should add the custom group compare method to the datasource settings. This should trigger the chart to re-initialize and sort the groups.

Regards,
Angel Petrov
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
DC
Top achievements
Rank 1
answered on 18 Dec 2019, 03:21 PM

Hi Angel,

Thanks for the response. This is the current JS that I have been working with.

 

<
script > kendo.syncReady(function() {
    jQuery("#chart53").kendoChart({
        "categoryAxis": [{
            "labels": {
                "template": "#= shortLabels(value)#",
                "visible": true
            }
        }],
        "chartArea": {
            "height": 1000,
            "width": 1250
        },
        "legend": {
            "spacing": 25,
            "position": "top"
        },
        "series": [{
            "categoryField": "UserStory",
            "field": "Count",
            "gap": 4,
            "labels": {
                "visible": true,
                "position": "outsideEnd"
            },
            "spacing": 3,
            "type": "bar"
        }],
        "theme": "Flat",
        "title": {
            "font": "35px DejaVu Sans",
            "text": "Defects per Environment"
        },
        "dataSource": {
            "type": (function() {
                if (kendo.data.transports['aspnetmvc-ajax']) {
                    return 'aspnetmvc-ajax';
                } else {
                    throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                }
            })(),
            "transport": {
                "read": {
                    "url": "/Binding/DefectsTestEnvironment",
                    "type": "POST"
                },
                "prefix": ""
            },
            "group": [{
                "field": "Environment",
                "dir": "asc",
                "compare": function(a, b) {
                    if (a.items[0].Rank === b.items[0].Rank) {
                        return 0;
                    } else if (a.items[0].Rank > b.items[0].Rank) {
                        return 1;
                    } else {
                        return -1;
                    }
                }
            }],
            "schema": {
                "model": {
                    "fields": {
                        "Environment": {
                            "type": "string"
                        },
                        "UserStory": {
                            "type": "string"
                        },
                        "Count": {
                            "type": "string"
                        },
                        "Rank": {
                            "type": "string"
                        }
                    }
                }
            }
        },
        "seriesDefaults": {
            "line": {
                "style": "smooth"
            }
        }
    });
}); < /script>

I have been trying some compare functions. This is the one that gave me somewhat of the desired result.

 "compare": function(a, b) { if (a.items[0].Rank === b.items[0].Rank) { return 0; } else if (a.items[0].Rank > b.items[0].Rank) { return 1; } else { return -1; } }

It puts the category value with the highest count on top but after that it goes back to its usual group alphabetical sorting.

0
Alex Hajigeorgieva
Telerik team
answered on 23 Dec 2019, 11:22 AM

Hello, Denys,

To sort the groups by the number of items they have, you should use the exact same function as the one we have in the documentation:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/group#groupcompare

.Groupable(g=>g.Sort(s=>s.Compare("myGroupCompare")))
 
<script>
   function myGroupCompare(a, b) {
       if (a.items.length === b.items.length) {
           return 0;
       } else if (a.items.length > b.items.length) {
           return 1;
       } else {
            return -1;
       }
  }
</script>

Having said that, this thread seems to have two separate unrelated questions. We might need to create another thread that looks at the group sort and keep the relevant PDF posts here. This is because in our Support policy we handle separate questions in separate threads.

Do you still need help with the labels in PDF?

Thank you for your understanding in advance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
DC
Top achievements
Rank 1
answered on 23 Dec 2019, 02:44 PM

Hi Alex,

I was able to figure out the PDF exporting by using a function to truncate the category axis values. I am just still working on the grouping. I will create another thread for the grouping and update what I have tried. Also, I am using a bar chart so I dont believe I have the .Groupable on the html helper just Group. I did try that function before verbatim in the compare in the javascript above but did not see it affect the graph. 

Thank you

,DC

 

0
Alex Hajigeorgieva
Telerik team
answered on 26 Dec 2019, 08:20 AM

Hi, Denys,

Thank you for opening the new thread.

In case anyone needs to check the other question in the future, it is available at:

https://www.telerik.com/forums/sort-category-axis-based-on-of-items

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
DC
Top achievements
Rank 1
answered on 08 Jan 2020, 02:08 AM

Without using a function to shorten the category axis values is there any other solution to exporting charts as pdf without having the category axis values go into the chart? I have been avoiding exporting to pdf and have been saving my charts as an image because of it. I have been exporting as an image because this way it does not go into the chart but I cant manage to replicate it on pdf export. 

Thanks in advance

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 08 Jan 2020, 08:27 AM

Hello, Denys,

I believe the issue here is because of the DejaVu font and the missing font definition on the chart axis labels.

If you add the font definition where expected in the Chart configuration, the chart will look the same both on the screen and on the PDF:

https://dojo.telerik.com/@bubblemaster/AlEmEjUM/2

           axisDefaults:{
              labels:{
                font:  "12px 'DejaVu Sans', sans-serif",
              }
            },

Give this a try and let us know the outcome.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
DC
Top achievements
Rank 1
answered on 08 Jan 2020, 03:33 PM
Massive thanks Alex, that did the job.
Tags
Chart
Asked by
DC
Top achievements
Rank 1
Answers by
DC
Top achievements
Rank 1
Angel Petrov
Telerik team
Alex Hajigeorgieva
Telerik team
Share this question
or