Pass series name to tooltip template

5 posts, 0 answers
  1. AP
    AP avatar
    207 posts
    Member since:
    Apr 2010

    Posted 22 Jun Link to this post

    I have a pop-up chart in a tooltip template working for some column charts. The definition passes the dataitem to the template function, which then creates a pie chart in the tooltip.

    This is working well for charts which dynamically create the series using a field in the dataitem.

    However, I now have a stacked column chart using two fixed series, from two different value fields in the dataitem. To create the pop-up chart, I need to identify which series is being hovered over, but I can't work out how to pass this to the function, as the dataitem field names just seem to get parsed in a 'magical' way.

    The chart definition is:-

            @(Html.Kendo().Chart<WLI_Payments.Models.TimelinessChartItem>()
    .Name("SummaryTimelinessChartFour")
     //.Title("Paid / Awaiting Payment Requests")
     .Title(ti => ti.Text("Payment Timeliness By Month").Font("11px Arial"))
    .Theme("bootstrap")
    .Legend(l => l.Visible(true).Position(ChartLegendPosition.Bottom))
    .ChartArea(c => c.Background("transparent").Height(250))
    .DataSource(ds => ds.Read(read => read.Action("GetTimelinessData", "Dashboard"))
     
    .Sort(s =>
    {
        s.Add("Year").Ascending();
     
    }
     
     
    )
    )
     .SeriesDefaults(sd => sd.Column().Stack(true))
        .Series(series =>
        {
            series.Column(model => model.InTime).Name("In Time").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#428BCA");
            series.Column(model => model.Late).Name("Late").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#DA3B36");
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.MonthText)
            .Labels(labels => labels.Rotation(-45).Font("10px Arial"))
            .MajorGridLines(lines => lines.Visible(false))
     
     
        )
        .ValueAxis(axis => axis.Numeric()
     
           .Labels(labels => labels.Font("10px Arial"))
     
     
     
       )
        .Tooltip(tooltip => tooltip
            .Visible(true)
        .Format("{0:N0}")
        //.Template("#=series.name# : #=value#")
        //.Font("10px Arial")
        .Background("White")
        .Template("#=tooltipTemplate4(dataItem)#")
        )
     
             .Pannable(p => p.Lock(ChartAxisLock.Y))
     
        .Zoomable(zoomable => zoomable
            .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
            .Selection(selection => selection.Lock(ChartAxisLock.Y))
        )
     
     
     
            )
         
         
        </div>
     
     
     
     
     
     
     
     
     
            <p></p></text>);
     
        })
     
    )

     

    The template definition is:-

    <script id="childChartTemplate4" type="text/x-kendo-template">
        <div id="childChart4" />
        # setTimeout(function() { createChildChart4(SeriesName,Mth,Year); }) #
    </script>

     

    The Mth and Year fields are in the dataitem, and get passed through to the function, but I also need the series name.

    The template is defined in the script block as:-

    var tooltipTemplate4 = kendo.template($("#childChartTemplate4").html());

     

    And then the function createChildChart4 gets the data and builds the chart (or would do, if it had the series name).  How do I pass the series name through to the function?

    Thanks

  2. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 26 Jun Link to this post

    Hello Andrew,

    This can be achieved by passing the series.name value to the template.

    I made a Dojo example demonstrating this:

    http://dojo.telerik.com/UJaxI

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. AP
    AP avatar
    207 posts
    Member since:
    Apr 2010

    Posted 26 Jun in reply to Stefan Link to this post

    Stefan,

     

    Thanks for the reply. However, I'm aware I can pass the series name like this. What I need to do is pass the series name and the dataitem. I can do:-

    .Template("#=tooltipTemplate3(dataItem, series.name)#")

    but I have no idea how to reference the series.name in the function, as the dataitem fields seem to get picked up automatically.

  4. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 27 Jun Link to this post

    Hello Andrew,

    In this scenario, I can suggest using a function which will create one array which will hold both values. Then that array can be passed to the template.

    I modified the example to demonstrate this:

    http://dojo.telerik.com/UJaxI/2

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. AP
    AP avatar
    207 posts
    Member since:
    Apr 2010

    Posted 27 Jun in reply to Stefan Link to this post

    Thanks - your answer put me onto the right track.

    However, I had to create a new object with the fields I needed, as your solution just adds the data item object to an array, and the series name as another item.

Back to Top