Hi, i have a chart see attached image.
1. How can i hide the "Total" label from the Legend and the corresponding column?
2. Sorting doesn't seem to work
Here's
@(Html.Kendo().Chart<UpdateLine>() .Name("chart") .Title("API Calls") .Legend(legend => legend .Position(ChartLegendPosition.Top) ) .SeriesDefaults(defaults => defaults .Column() .Visual("chartVisual") ) .Series(series => { series.Column(model => model.Count).Name("#= group.value #").CategoryField("Date"); series.Line(model => model.Total, x => x.Date) .Color(Colours.Orange) .VisibleInLegend(false) .Axis("Total"); }) .SeriesColors(Colours.Blue, Colours.Orange, Colours.Grey, Colours.Yellow, Colours.LightBlue, Colours.Green) .ValueAxis(axis => axis.Numeric() .Labels(l => l.Format("{0:N0}")) ) .CategoryAxis(axis => axis .Date() .Name("DateAxis") //.Min(1) .Labels(labels => labels.Format("dd MMM")) ) .ValueAxis(axis => axis .Numeric() .Name("Total") .Title("Total Calls") .Color(Colours.Orange) ) .Tooltip(tooltip => tooltip .Visible(true) .Format("{0:N}") .Template("#= series.name #: #= kendo.format('{0:N0}', value) #") ) .Events(events => events. DataBound("onDataBound") ) .DataSource(dataSource => dataSource .Read(read => read.Action("Chart", "Updates")) .Group(group => group.Add(model => model.Zone)) .Sort(sort => sort.Add(model => model.Date).Descending()) ))5 Answers, 1 is accepted
0
Lee
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered on 24 Feb 2021, 11:09 AM
My Class
public class UpdateLine{ public DateTime Date { get; set; } public string Zone { get; set; } public long? Count { get; set; } public long? Total { get; set; }}
Example Data:
[{ "Date": "2021-02-17T00:00:00", "Zone": "invoices", "Count": 211, "Total": null }, { "Date": "2021-02-18T00:00:00", "Zone": "invoices", "Count": 189, "Total": null }, { "Date": "2021-02-19T00:00:00", "Zone": "invoices", "Count": 53, "Total": null }, { "Date": "2021-02-20T00:00:00", "Zone": "invoices", "Count": 0, "Total": null }, { "Date": "2021-02-21T00:00:00", "Zone": "invoices", "Count": 0, "Total": null }, { "Date": "2021-02-22T00:00:00", "Zone": "invoices", "Count": 123, "Total": null }, { "Date": "2021-02-23T00:00:00", "Zone": "invoices", "Count": 151, "Total": null }, { "Date": "2021-02-24T00:00:00", "Zone": "invoices", "Count": 194, "Total": null }, { "Date": "2021-02-17T00:00:00", "Zone": "purchaseorders", "Count": 146, "Total": null }, { "Date": "2021-02-18T00:00:00", "Zone": "purchaseorders", "Count": 149, "Total": null }, { "Date": "2021-02-19T00:00:00", "Zone": "purchaseorders", "Count": 118, "Total": null }, { "Date": "2021-02-20T00:00:00", "Zone": "purchaseorders", "Count": 2, "Total": null }, { "Date": "2021-02-21T00:00:00", "Zone": "purchaseorders", "Count": 0, "Total": null }, { "Date": "2021-02-22T00:00:00", "Zone": "purchaseorders", "Count": 107, "Total": null }, { "Date": "2021-02-23T00:00:00", "Zone": "purchaseorders", "Count": 52, "Total": null }, { "Date": "2021-02-24T00:00:00", "Zone": "purchaseorders", "Count": 176, "Total": null }, { "Date": "2021-02-17T00:00:00", "Zone": "taskexpenses", "Count": 97, "Total": null }, { "Date": "2021-02-18T00:00:00", "Zone": "taskexpenses", "Count": 54, "Total": null }, { "Date": "2021-02-19T00:00:00", "Zone": "taskexpenses", "Count": 32, "Total": null }, { "Date": "2021-02-20T00:00:00", "Zone": "taskexpenses", "Count": 5, "Total": null }, { "Date": "2021-02-21T00:00:00", "Zone": "taskexpenses", "Count": 7, "Total": null }, { "Date": "2021-02-22T00:00:00", "Zone": "taskexpenses", "Count": 115, "Total": null }, { "Date": "2021-02-23T00:00:00", "Zone": "taskexpenses", "Count": 20, "Total": null }, { "Date": "2021-02-24T00:00:00", "Zone": "taskexpenses", "Count": 44, "Total": null }, { "Date": "2021-02-17T00:00:00", "Zone": "tasklabours", "Count": 180, "Total": null }, { "Date": "2021-02-18T00:00:00", "Zone": "tasklabours", "Count": 356, "Total": null }, { "Date": "2021-02-19T00:00:00", "Zone": "tasklabours", "Count": 337, "Total": null }, { "Date": "2021-02-20T00:00:00", "Zone": "tasklabours", "Count": 43, "Total": null }, { "Date": "2021-02-21T00:00:00", "Zone": "tasklabours", "Count": 76, "Total": null }, { "Date": "2021-02-22T00:00:00", "Zone": "tasklabours", "Count": 1513, "Total": null }, { "Date": "2021-02-23T00:00:00", "Zone": "tasklabours", "Count": 699, "Total": null }, { "Date": "2021-02-24T00:00:00", "Zone": "tasklabours", "Count": 259, "Total": null }, { "Date": "2021-02-17T00:00:00", "Zone": "taskmaterials", "Count": 486, "Total": null }, { "Date": "2021-02-18T00:00:00", "Zone": "taskmaterials", "Count": 482, "Total": null }, { "Date": "2021-02-19T00:00:00", "Zone": "taskmaterials", "Count": 281, "Total": null }, { "Date": "2021-02-20T00:00:00", "Zone": "taskmaterials", "Count": 2, "Total": null }, { "Date": "2021-02-21T00:00:00", "Zone": "taskmaterials", "Count": 0, "Total": null }, { "Date": "2021-02-22T00:00:00", "Zone": "taskmaterials", "Count": 278, "Total": null }, { "Date": "2021-02-23T00:00:00", "Zone": "taskmaterials", "Count": 242, "Total": null }, { "Date": "2021-02-24T00:00:00", "Zone": "taskmaterials", "Count": 424, "Total": null }, { "Date": "2021-02-17T00:00:00", "Zone": "tasks", "Count": 165, "Total": null }, { "Date": "2021-02-18T00:00:00", "Zone": "tasks", "Count": 195, "Total": null }, { "Date": "2021-02-19T00:00:00", "Zone": "tasks", "Count": 121, "Total": null }, { "Date": "2021-02-20T00:00:00", "Zone": "tasks", "Count": 15, "Total": null }, { "Date": "2021-02-21T00:00:00", "Zone": "tasks", "Count": 0, "Total": null }, { "Date": "2021-02-22T00:00:00", "Zone": "tasks", "Count": 157, "Total": null }, { "Date": "2021-02-23T00:00:00", "Zone": "tasks", "Count": 125, "Total": null }, { "Date": "2021-02-24T00:00:00", "Zone": "tasks", "Count": 249, "Total": null }, { "Date": "2021-02-17T00:00:00", "Zone": "Total", "Count": null, "Total": 1285 }, { "Date": "2021-02-18T00:00:00", "Zone": "Total", "Count": null, "Total": 1425 }, { "Date": "2021-02-19T00:00:00", "Zone": "Total", "Count": null, "Total": 942 }, { "Date": "2021-02-20T00:00:00", "Zone": "Total", "Count": null, "Total": 67 }, { "Date": "2021-02-21T00:00:00", "Zone": "Total", "Count": null, "Total": 83 }, { "Date": "2021-02-22T00:00:00", "Zone": "Total", "Count": null, "Total": 2293 }, { "Date": "2021-02-23T00:00:00", "Zone": "Total", "Count": null, "Total": 1289 }, { "Date": "2021-02-24T00:00:00", "Zone": "Total", "Count": null, "Total": 1346 }]
0
Hello Lee,
Thank you for sharing the Chart declaration.
Straight to the questions:
1. As "Total" is part of the data to have it not displayed I suggest modifying the data from the server to not have it at all. Another option you'd be to modify the received data on the client and set the data source using the setDataSource method.
2. Please refer to the following documentation article on this topic. The logic is in JS in the DataBound CHart event handler, thus, it is valid for TagHelper Charts.
Let me know if you have any questions.
Regards,
Nikolay
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
0
Lee
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered on 01 Mar 2021, 09:24 AM
Thanks for the reply Nikolay,
The Total value is there because of the Line, i don't want that value to show as a column how can i exclude it as a column or how do i have separate datasources for columns and lines?
0
Lee
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered on 01 Mar 2021, 09:53 AM
Also, the sort still doesn't work using the example you gave:
function onDataBound(e) { var axis = e.sender.options.categoryAxis; console.log(axis.categories); axis.categories = axis.categories.sort(function (a, b) { if (a.getTime() > b.getTime()) return -1; if (a.getTime() < b.getTime()) return 1; return 0; }); console.log(axis.categories); e.sender.redraw();}
The Console out puts it correctly before sort:
Array(8) [ Date Mon Feb 22 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Tue Feb 23 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Wed Feb 24 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Thu Feb 25 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Fri Feb 26 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Sat Feb 27 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Sun Feb 28 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Mon Mar 01 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time) ]
After sort:
Array(8) [ Date Mon Mar 01 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Sun Feb 28 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Sat Feb 27 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Fri Feb 26 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Thu Feb 25 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Wed Feb 24 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Tue Feb 23 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time), Date Mon Feb 22 2021 00:00:00 GMT+1100 (Australian Eastern Daylight Time) ]
Yet the actual chart doesn't change order.
0
Hi Lee,
Thank you for clarifying the case.
I can suggest programmatically triggering click on a legend item, for example:
$(document).ready(function () {
setTimeout(function () {
var chart = $("#chart").getKendoChart();
chart._legendItemClick(4);
},300)
});Regarding the sorting questions, do you need to sort the columns (Zone property) inside the group? What I can see is that the current soring is set for Date property:
.Sort(sort => sort.Add(model => model.Date).Descending())Regards,
Nikolay
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.