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

Is it possible to conditionally display the series label?

6 Answers 458 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Javier
Top achievements
Rank 1
Javier asked on 21 Nov 2013, 07:48 PM
I have a stacked bar chart with the series labels visible.
But I only want the label to display if the series has a value greater than zero.

Here is my markup

@(Html.Kendo().Chart<ChartModel>(Model)
.Name("chart")
.Title("Pending Orders")
.Legend(legend => legend
.Visible(false)
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Column().Stack(true)
.Labels(labels => labels.Background("transparent").Visible(true).Font("40px sans-serif").Position(ChartBarLabelsPosition.Center).Color("black"))
)
.Series(series =>
{
series.Column(model => model.OnTimeCount).Name("On Time").Color("Green");
series.Column(model => model.WarningCount).Name("Warning").Color("Yellow");
series.Column(model => model.AlertCount).Name("Alert").Color("Red");
})

.CategoryAxis(axis => axis
.Categories(model => model.Day)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)

I've attached an image of the stacked chart with the top series set to zero.  As you can see, the effect really isn't very intuitive from a charting stand point.  I could add a legend, but in the context of the way the chart will be used, it's unecessary.

The data is only relevant IF it exists.

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 25 Nov 2013, 04:38 PM
Hi Javier,

In order to achieve this I can suggest in the dataBound event to check if the value is under 0 and display/hide the label through labels.visible option. For example: 
@(Html.Kendo().Chart(Model)
  //....
 .Events(ev=>ev.DataBound("onDB"))
)
 
<script>
function onDB(e) {
  e.sender.options.series[0].labels.visible = function (point) {
     if (point.value < 0) {
        return false
     }
     else { return point.value}
  }
}
</script>


Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Javier
Top achievements
Rank 1
answered on 26 Nov 2013, 01:33 PM
Thank you for your help.  I ended up using a nullable int and pass a null value instead of zero and that seems to do the trick.  

But your answer will help me in many other situation.

I appreciate it.

 

0
Kevin Kembel
Top achievements
Rank 1
answered on 24 Mar 2014, 07:48 PM
I had used this recommendation in Q3 2013, and used the DataBound event to set the label visibility on a per-point basis.  I also tried to use this to customize the colors.

It looks like Q1 2014 has broken this ability, when I set
e.sender.options.series[0].labels.visible = function (point) { ... }

The function is only called once for the first point in the series, and is no longer called for each point.  So we're back to only being able to set visibility for the entire series of points instead of on a per-point basis.

0
Iliana Nikolova
Telerik team
answered on 25 Mar 2014, 03:30 PM
Hi Kevin,

The observed behaviour is due to a bug in the current version of Kendo UI Chart, however we are working on it and will do our best to address it as soon as possible. Please excuse us for the inconvenience caused. 

Regards,
Iliana Nikolova
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Muneer
Top achievements
Rank 1
answered on 04 Dec 2016, 07:00 AM

Hi ,

I have been using  kendo stacked bar chart . I used the below code to display my stacked bar chart.

@(Html.Kendo().Chart()
.Name("chrtMonth_" + ContextId)
.Legend(legend => legend.Position(ChartLegendPosition.Top).Visible(true))
.SeriesDefaults(seriesDefaults => seriesDefaults.Column().Visual("columnVisual").Stack(true)
.Highlight(highlight => highlight.Toggle("toggleHandler")))
.DataSource(ds => ds.Read(read => read.Action("GetWeeklyMonthlyGraphData", "CMCDashboard")))
.Series(series =>
{
foreach (var row in Model.Rows)
{
var monthOnMontValues =
new double[]
{
Convert.ToDouble(((System.Data.DataRow)row)[1])<0?0:Convert.ToDouble(((System.Data.DataRow)row)[1]),
Convert.ToDouble(((System.Data.DataRow)row)[2])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[2]),
Convert.ToDouble(((System.Data.DataRow)row)[3])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[3]),
Convert.ToDouble(((System.Data.DataRow)row)[4])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[4]),
Convert.ToDouble(((System.Data.DataRow)row)[5])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[5]),
Convert.ToDouble(((System.Data.DataRow)row)[6])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[6]),
Convert.ToDouble(((System.Data.DataRow)row)[7])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[7]),
Convert.ToDouble(((System.Data.DataRow)row)[8])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[8]),
Convert.ToDouble(((System.Data.DataRow)row)[9])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[9]),
Convert.ToDouble(((System.Data.DataRow)row)[10])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[10]),
Convert.ToDouble(((System.Data.DataRow)row)[11])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[11]),
Convert.ToDouble(((System.Data.DataRow)row)[12])<0? 0:Convert.ToDouble(((System.Data.DataRow)row)[12])
};
series.Column(monthOnMontValues).Name(Convert.ToString(((System.Data.DataRow)row)["Status"]));
}

})
.CategoryAxis(axis =>
{
string[] names = null;
string colNames = string.Empty;
for (int i = 0; i < Model.Columns.Count; i++)
{
if (i != 0)
{
colNames = colNames + Model.Columns[i] + ",";
}
}
names = colNames.Split(',').Where(p => !string.IsNullOrEmpty(p)).ToArray();
axis.Categories(names).Visible(true);
}
).Events(ev => ev.DataBound("onDB"))
.Panes(panes => panes.Add().Clip(false))
.ValueAxis(axis => axis.Numeric()
.Labels(labels =>
labels.Template("#= kendo.format('{0:N0}', value) # ")
)
.Line(line => line.Visible(false))
).Tooltip(t => t.Visible(true).Shared(true))
)

My Question shared tooltip shows data for zero value also I don't want to show the zero values in my shared tool tip.

 

Attaching the Tool tip screen shot.

Thanks,

Munna

0
Iliana Nikolova
Telerik team
answered on 06 Dec 2016, 03:42 PM
Hi Munna,

For this scenario I would suggest to use custom JavaScript logic in the SharedTemplate

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/ChartTooltipBuilder#methods-SharedTemplate(System.String)

For your convenience below is an example: http://dojo.telerik.com/@Iliana/IgOnu

On a side note, it is accepted to post different questions in separate threads. As this thread is related to the chart series labels, I would like to ask you to open new threads for different questions. Thank you in advance for your understanding and cooperation.

Regards,
Iliana Nikolova
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Javier
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Javier
Top achievements
Rank 1
Kevin Kembel
Top achievements
Rank 1
Muneer
Top achievements
Rank 1
Share this question
or