[Solved] Scatter Chart: tooltip and label template

[Daniel]

Hi,
I'd like to display a series of risks in a matrix (scatter chart), see sketched ui in the attached file riskmatrix.png.

The model would be something like this, where "x" would represent the "impact" and "y" the "probability":

public class ScatterData
   {
       public int x { get; set; }
       public int y { get; set; }
       public string Description { get; set; }
   }

In order to test this behavior, I'm using a very basic view:

<h2>Scatter</h2>

@model List<TelerikMvcApplication1.Models.ScatterData>

@(Html.Telerik().Chart(Model)
    .Name("chart")
    .Series(series => {
        series.Scatter(typeof(TelerikMvcApplication1.Models.ScatterData) , "x", "y")
            .Labels(l => l.Template("<#= dataItem.Description #> - <#=value.x#>,  <#=value.y#> (<#=series.Description#>)"))
            .Labels(true);

    })
    .Tooltip(tt => {
        tt
        .Template("<#= dataItem.Description #> - <#=value.x#>,  <#=value.y#> (<#=series.Description#>)")
        .Visible(true);
    })
)

As you can see in the file riskmatrix_output.png, the labels template is used (in some way, except for the "description" ) but the tooltip template is ignored totally.

How do I have to implement the view in order to produce the desired matrix?

Thank you for our help and regards,
Daniel

[Hristo Germanov]

Hi Daniel,

Thank you for contacting us.

This is a bug and I am glad to inform you that it is already fixed. The bug fix will be included with the next official release of Telerik ASP.NET MVC components.

I have attached the modified telerik.chart.min.js and telerik.common.min.js file.

Kind regards,
Hristo Germanov
the Telerik team

[Daniel]

Hi Hristo
Thank you for your response, the problem with the tooltip is fixed, which is great.
Unfortunately, the "undefined-problem" still exists.
Please have a look at the file "debugger.png". As you can see, there are some values in the "Description"-property of each ScatterData item.
Using the template described earlier, I am not able to display the values from the Description property, neither by using "dateItem.Description" nor "value.Description", see "result.png"

Any suggestions are appreciated.

Regards,
Daniel

[Hristo Germanov]

Hello Daniel,

You can use dataItem only if your chart is bind with ajax binding. Please excuse us for the inconvenience.

All the best,
Hristo Germanov
the Telerik team

[Jerry]

Hi there,


I was wondering whether this issue has been fixed for 2012 Q1 release.

public class AlertAssetChartModel
{
    public int AssetId { get; set; }
    public string AssetName { get; set; }
    public int? DriverId { get; set; }
    public string DriverName { get; set; }
    public DateTime Date { get; set; }
    public int TotalAlerts { get; set; }
}

my chart 

@(Html.Telerik().Chart(Model)
    .Name("AlertAssetChart")
    .Title(title => title
        .Text("Number of alerts vs. Assets")
        .Visible(true)
    )
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
        .Visible(true)
    )
    .SeriesDefaults(series =>
    {
        series.Bar().Stack(false);
    })
    .Series(series =>
    {
            series.Bar(s => s.TotalAlerts).Name("Total Alerts");
    })
    .CategoryAxis(axis => axis
                                    .Categories(s => s.AssetId).Title("Asset").Labels(l => l.Template("<#= dataItem.AssetName #>"))
    )
    .ValueAxis(axis => axis
        .Numeric().Labels(labels => labels.Format("{0:#,##0}")).Title("Number of Alerts")
    )
)

when I run it, it always give me "dataitem not defined" exception.

any suggestion?

regards
Jerry Ren

[Hristo Germanov]

Hello Jerry,

We do not supported dataItem for the category axis. You can set only value(represents the category text).

Kind regards,
Hristo Germanov
the Telerik team