Applying conditional Stack Bar color

10 posts, 0 answers
  1. Venkat
    Venkat  avatar
    37 posts
    Member since:
    Aug 2014

    Posted 12 Nov 2014 Link to this post

    Hi,

    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!
  2. Venkat
    Venkat  avatar
    37 posts
    Member since:
    Aug 2014

    Posted 13 Nov 2014 Link to this post

    Hi,

    Can some of please suggest any thoughts on this?

    Regards!
  3. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 14 Nov 2014 Link to this post

    Hello,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Venkat
    Venkat  avatar
    37 posts
    Member since:
    Aug 2014

    Posted 14 Nov 2014 in reply to T. Tsonev Link to this post

    Hi T. Tsonev,

    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!
  5. Venkat
    Venkat  avatar
    37 posts
    Member since:
    Aug 2014

    Posted 14 Nov 2014 in reply to T. Tsonev Link to this post

    Hi T. Tsonev,

    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!
  6. Venkat
    Venkat  avatar
    37 posts
    Member since:
    Aug 2014

    Posted 14 Nov 2014 Link to this post

    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!

  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 18 Nov 2014 Link to this post

    Hi,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Venkat
    Venkat  avatar
    37 posts
    Member since:
    Aug 2014

    Posted 22 Nov 2014 in reply to T. Tsonev Link to this post

    Hi T. Tsonev,

    Thanks for your reply.

    Due to other work, did not see your reply, sorry. Will check the same and get back to you.

    Regards!
  9. Venkat
    Venkat  avatar
    37 posts
    Member since:
    Aug 2014

    Posted 26 Nov 2014 Link to this post

    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!

  10. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 27 Nov 2014 Link to this post

    Hi,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top