set Series Colors for mvc kendo chart

4 posts, 0 answers
  1. medialog
    medialog avatar
    25 posts
    Member since:
    Sep 2010

    Posted 15 Dec 2015 Link to this post

    Hi all, 

    i have this chart i need to set a specific color for each line from the model, knowing  that the number of series vary depends on the filter.

    can any body support!

    @model IEnumerable<GraphModel>
    @using Msh.Web.Models

    <div class="row">
        <div class="chart-wrapper">
            @(Html.Kendo().Chart(Model)
            .Name("chartoccupancyrate")
            .Title(T("occupancyrate").ToString())
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("_GetGlobaleGraphData", "Statistical").Data("additionalInfo"))
                .Group(group => group.Add(model => model.Symbol))
                .Sort(sort => sort.Add(model => model.Date).Ascending())
            )
            .Series(series =>
            {
                series.Line(model => model.OccupancyRate)
                 .Name("#= group.value # ");
                //.Name("#= group.value # " + "(" + T("hotel") + ")");
            })
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
            )
            .ValueAxis(axis => axis.Numeric()
             .MinorGridLines(minorGridLines => minorGridLines.Visible(true))
                .Labels(labels => labels
                    .Format("{0:N0}%")
                    .Skip(2)
                    .Step(2)

                )
                  .AxisCrossingValue(0)
                  .Max(120)
            )
                .Tooltip(tooltip => tooltip
                .Visible(true)
                .Shared(true)
                .Format("%{0:N1}")
            )
            .CategoryAxis(axis => axis
                .Categories(model => model.Date)
                  //.Labels(labels => labels.Format("dd-MMM-yyyy"))
                .Labels(labels => labels.Format("dd-MMM"))
                .Labels(labels => labels.Rotation(-90))
                .Crosshair(c => c.Visible(true))
            ).Zoomable(false)
            )
        </div>
    </div>

    <script>
                $(window).resize(function () {
                    $("#chartoccupancyrate").data("kendoChart").resize();
                });

    </script>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 17 Dec 2015 Link to this post

    Hi,

    For this scenario you can either set the seriesColors option to match the colors from the data or use the series.colorField and dataBound event to set the series color based on the data. As an example: 
    @(Html.Kendo().Chart(Model)
       //....
      .Series(series =>
       {
       series.Line(model => model.OccupancyRate,
               model => model.Color)
              //...
       })
     //....
    )
     
    <script>
    function onDB(e) {
       var series = this.options.series;
          for (var i = 0; i < series.length; i++) {
              series[i].color = series[i].data[0].Color;
          }
    }
    </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!
     
  3. Kendo UI is VS 2017 Ready
  4. medialog
    medialog avatar
    25 posts
    Member since:
    Sep 2010

    Posted 17 Dec 2015 in reply to Iliana Nikolova Link to this post

    Hi, 

    Thanks for your answer. 

    Please check the attached file, i could change the color, but the tag red shows on every point is a problem, how can i remove this ?

    Regards,

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 21 Dec 2015 Link to this post

    Hi,

    This is not a known issue and I am not able to reproduce it on my side. Could you please provide an isolated runnable example which I could test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready