This is a migrated thread and some comments may be shown as answers.
Commonalities in 2 different chart series
2 Answers 3 Views
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 16 Apr 2020, 03:47 PM

I have 2 barcharts on a page, 1 showing monthly gross wages for a Year To Date, and a separate chart displaying the same thing, for the same period but for a year previously.  I'd like to hilight somehow, whether through a different bar color or bold facing both the common categories in both charts...  I hope that makes sense...  Let's trim it down..

 

First chart shows customer A, B, and C

Second chart shows customer B, D, E

Somehow or another, I'd like to draw the viewers attention that the same customer appears on both charts.  As I said, they are each different charts and data series' and completely unaware of each other.

<div class="chart">
    @(Html.Kendo().Chart<GWChartData>()
          .Name("chartPayrollYTD")
          .ChartArea(ca => ca.Height(600))
          .HtmlAttributes(new {@class = "center" })
          .Title("Top 10 Client Gross Wages - YTD (" + DateTime.Now.ToString("MMMM") + " " + DateTime.Now.Year + ")")
          .Legend(l => l.Position(ChartLegendPosition.Top))
          .Series(s =>
          {
              s.Column(m => m.GrossWages).Name("Gross Wages").Color("#009933").Labels(l => l.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd).Format("C"));
          })
          .ValueAxis(va => va.Numeric().MinorGridLines(m => m.Visible(true)).Labels(l => l.Format("C")))
          .CategoryAxis(c => c.Categories(m => m.ClientId).Labels(l => l.Visible(true)))
          .DataSource(ds => ds
                .Read(r => r.Action("YTDGrossWages", "GWHReport", new {topNumber = 10}).Type(HttpVerbs.Get))
                .Events(ev =>
                {
                    ev.RequestEnd("requestEnd");
                    ev.RequestStart("requestStart");
                })
          )
          .Tooltip(tp => tp.Visible(true).Template("#=category# - #=dataItem.ClientName#: #=kendo.format('{0:C}', value)#"))
    )
</div>
 
<div class="chart">
    @(Html.Kendo().Chart<GWChartData>()
          .Name("chartPayrollLastYear")
          .ChartArea(ca => ca.Height(600))
          .HtmlAttributes(new {@class = "center" })
          .Title("Top 10 Client Gross Wages - YTD (" + DateTime.Now.ToString("MMMM") + " " + (DateTime.Now.Year - 1) + ")")
          .Legend(l => l.Position(ChartLegendPosition.Top))
          .Series(s =>
          {
              s.Column(m => m.GrossWages).Name("Gross Wages").Color("#009933").Labels(l => l.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd).Format("C"));
          })
          .ValueAxis(va => va.Numeric().MinorGridLines(m => m.Visible(true)).Labels(l => l.Format("C")))
          .CategoryAxis(c => c.Categories(m => m.ClientId).Labels(l => l.Visible(true)))
          .DataSource(ds => ds
              .Read(r => r.Action("YTDGrossWages_LastYear", "GWHReport", new {topNumber = 10}).Type(HttpVerbs.Get))
              .Events(ev =>
              {
                  ev.RequestEnd("requestEnd");
                  ev.RequestStart("requestStart");
              })
          )
          .Tooltip(tp => tp.Visible(true).Template("#=category# - #=dataItem.ClientName#: #=kendo.format('{0:C}', value)#"))
          )
</div>

2 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay
Telerik team
answered on 20 Apr 2020, 11:14 AM

Hi Joe,

Thank you for sharing the Charts declarations.

I could suggest setting the same colors for the equal customer series in both Charts. In the Series.ColorHandler() method the data source of the opposite Chart can be traversed and in case the current customer matches a customer from the opposite Chart customers the function will return one color, in case there is no match the returned color will be different. For instance:

s.Column(m => m.GrossWages).Name("Gross Wages")..ColorHandler("setColor")
...

    function setColor(e) {
        var red = false;
        var customer= e.customer; 
        var CurrentYearData = $("#chartPayrollYTD").data("kendoChart").options.series[0].data;
        CurrentYearData.forEach((el) => {
            if (el.customer=== category) {
                red = true
            }
        })
        return red ? "red" : "green"
    }

The above can be applied to the first chart as well, however, in the ColorHandler function, a separate Ajax request will be needed for obtaining the second chart data. Since the JavaScript runs synchronously at the time when the SeriesHandler for the first chart is executing the second chart is still not available. jQuery.ajax() can be used.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Joe
Top achievements
Rank 1
answered on 20 Apr 2020, 03:18 PM
Thank you... this works rather well.
Tags
Chart
Asked by
Joe
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Joe
Top achievements
Rank 1
Share this question
or