Commonalities in 2 different chart series

[Joe]

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>

[Nikolay]

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

[Joe]

Thank you... this works rather well.