I am generating the Stack Bar as attached screen shot. When the chart is rendered it will render default color for each Group ( in the current it's Orange and Green).
Initial data for the chart is read from the database and the default chart is rendered. We have option that, user can change the values of PrePositionTransaction property, and try to refresh the chart. So, when the user modifies the data and refreshes the chart at that moment, I would like to change the color of stack bar based on the changed value to highlight which legend, the data has been modified. I can have a flag to say which record has modified by the user on the screen and based on that highlight that stack bar.
So, is there any option for to apply conditional formatting to apply color for the bars, can we colorField be used for this?
Can you please suggest any thing on this and if help demo or samples would be very helpful.
Regards!
9 Answers, 1 is accepted
Rank 1
Can some of please suggest any thoughts on this?
Regards!
The colorField is indeed the best option in this case.
Alternatively you can define a color function that will determine the color on per-point basis:
var myColor = "#cf0";
$("#chart").kendoChart({
series: [{
data: [1, 2],
color: function(point) {
if (myColor) {
return myColor;
}
// use the default series theme color
}
}]
});
I hope this helps.
Regards,
T. Tsonev
Telerik
Rank 1
Thanks for your reply and will check the color function and get back to you if I have any more questions.
I was just thinking of using Highlight option as well, does this also solves my purpose and if you have any example or demo or document link please do share.
Regards!
Rank 1
Thanks for reply.
I'll check the given link and example and get back to you if I have any more questions.
I was just thinking to use of Highlight option as well, will that also will serve my purpose and do you have any example or demo or document on this please?
Regards!
Rank 1
Hi T. Tsonev,
I have checked the link you have given, but the link is having example for from JQuery, but I am using Kendo UI's WidgetFactory for creating the Chart.
When I tried this in Report Designer, I was able to apply this condition by DataPoint Conditional Formatting. But in Kendo UI Widget, I am looking for the same option but could not find it.
Here is my Chart code:
-------
@(Html.Kendo().Chart<IMF.CurrencyAssignmentSystem.Models.ReceiptAllocationDetails>()
.Name("PreUsage")
.Title("(RTP + NAB) / Quota % : (Pre - Tran)")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.DataSource(ds => ds
.Read(read => read.Action("GetReceiptTransaction", "ReceiptAllocation"))
.Group(group => group.Add(model => model.ResourceType))
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(true)
)
.Series(series =>
{
series.Column(model => model.PreTransactionPosition).Stack(true);
})
.CategoryAxis(axis => axis
.Categories(model => model.LenderId)
.Labels(label => label.Rotation(-90))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}"))
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
)
)
----
Can you please suggest where do I get the DataPoint Condition Format option that would be very helpful.
Regards!
The color function can be attached in the MVC Wrappers as follows:
@(Html.Kendo().Chart<IMF.CurrencyAssignmentSystem.Models.ReceiptAllocationDetails>()
Series(series =>
{
series.Column(model => model.PreTransactionPosition)
.Stack(true)
.Color("pointColor");
})
...
<script>
function pointColor(e) {
// Determine point color based on e.value, e.dataItem or external variables
return MyColor;
}
</script>
I hope this helps.
Regards,
T. Tsonev
Telerik
Rank 1
Thanks for your reply.
Due to other work, did not see your reply, sorry. Will check the same and get back to you.
Regards!
Rank 1
Hi T. Tsonev,
As you had mentioned, I tried to apply the changes for the my chart but it looks like it's not at all calling JavaScript method.
Here is my changes:
@(Html.Kendo().Chart<IMF.CurrencyAssignmentSystem.Models.ReceiptAllocationDetails>()
.Name("PreUsage")
.Title("(RTP + NAB) / Quota % : (Pre - Tran)")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.DataSource(ds => ds
.Read(read => read.Action("GetReceiptTransaction", "ReceiptAllocation"))
.Group(group => group.Add(model => model.ResourceType))
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(true)
)
.Series(series =>
{
series.Column(model => model.PreTransactionPossition)
.Stack(true)
.Color("GetPreTransColor");
})
.CategoryAxis(axis => axis
.Categories(model => model.LenderId)
.Labels(label => label.Rotation(-90))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}"))
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
)
)
<script>
function GetPreTransColor(e)
{
return "#DD3343";
}
</script>
Here in the GetPreTransColor, I have mentioned just a sample color code to test it.
And also I would like to that, the parameter the GetPreTransColor has 'e' is the current column ie. PreTransactionPosition or we can pass any other column to it, because I need to apply the color based on some other column value.
Here I have attached the my example JSon data, Controller class and Model Class for your reference if you need to test my chart code.
At the moment it's quiet urgent so, I you reply as early as possible it will be very helpful.
Regards!
Sorry, my mistake. The correct option is ColorHandler, not Color:
series.Column(model => model.PreTransactionPossition)
.Stack(true)
.ColorHandler("GetPreTransColor");
The dataItem is available as e.dataItem:
function GetPreTransColor(e) {
var color = e.dataItem.Color;
}
I hope this helps.
Regards,
T. Tsonev
Telerik