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

Overlapping Labels and categories

18 Answers 609 Views

Chart

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

DC asked on 02 Dec 2019, 06:15 PM

2019-12-02_13h07_50.png

2019-12-02_13h08_30.png

2019-12-02_13h09_54.png

inked2019-12-02_13h09_38_li.jpg

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

answered on 06 Dec 2019, 08:49 PM

whatiget.png

tryingtoachievethis.png

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

answered on 11 Dec 2019, 03:38 PM

chart149691f78bf444fb09dd94d62ce5782c5.png

chart2fd473f6cc6834ab3ae251da980db111a.png

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:

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

Thanks, DC

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.

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.

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.

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.

Accepted

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.