Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Tooltips attributes don't update by client API

Answered Tooltips attributes don't update by client API

Feed from this thread
  • Achilles avatar

    Posted on Mar 8, 2012 (permalink)

    Hi,
    I am using charts where I change the Value-axis / Y-Axis characteristic by Client API. However, I am not able to update the chart tool-tip attributes, either using "format" or "template". Here is a sample code where I use a drop-down list to invoke the Client API.

    @using Telerik.Web.Mvc.UI
     
     
    <script type="text/javascript">
        $(document).ready(function () {
     
            $('#CbType').change(function () {
     
                var type = $('#CbType').val();
                var chart = getChart();
     
                if (type == "Voltage") {
                    chart.options.valueAxis.title.text = "Voltage (V)";
                    chart.options.valueAxis.max = 300;
                    //chart.options.tooltip.format = "{0:N} V";
                    chart.options.tooltip.template = "<#= value #> V ";
                    chart.options.tooltip.background = "#ddbbbb";
                }
                else {
                    chart.options.valueAxis.title.text = "Current (Amps)";
                    chart.options.valueAxis.max = 20;
                    //chart.options.tooltip.format = "{0:N} A";
                    chart.options.tooltip.template = "<#= value #> A ";
                    chart.options.tooltip.background = "#bbbbdd";
     
                }
     
                chart.refresh();
                //.Format("{0:0.0} V")
            });
     
        });
        function getChart() {
            return $("#chart").data("tChart");
        }
    </script>
     
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "chartForm" }))
    {
        <div class="index-page">
            <div>
     
     
    @(Html.Telerik().Chart()
            .Name("chart")
            .Title("Performance")
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom)
            )
        .PlotArea(area => area                      
            .Border(1, "black", ChartDashType.Solid)
            )          
            .Series(series =>
            {
                series.Line(new[] { 1, 2, 3, 4 }).Name("test");
                series.Line(new[] { 2, 2, 5, 3 }).Name("test2");
            })
        .ValueAxis(axis => axis
            .Numeric().Title(title => title
                .Text("Voltage (V)"))
            .Labels(labels => labels.Format("{0:#,##0}"))
            .MajorGridLines(majorGridLines => majorGridLines.Visible(false))
            .Max(300)
        )
        .Tooltip(tooltip => tooltip
            .Background("#ddbbbb")
            .Template("<#= value #> V ")
           .Visible(true))
        .HtmlAttributes(new { style = "width: 600px; height: 400px; margin: auto;" })
            )
            </div>
    </div>
     
         <div>
            @Html.DropDownList("Type",
                        new SelectList(new List<string> { "Voltage", "Current" }, "Voltage"), new { @id = "CbType" })
        </div>

    Thanks & Warm Regards

    Achilles

    Reply

  • Answer Iliana Nikolova Iliana Nikolova admin's avatar

    Posted on Mar 13, 2012 (permalink)

    Hello,
    Thank you for contacting Telerik support.
    Generally speaking, the update of the MVC Chart tooltip through "options" is currently not supported. As possible workaround you could set a "template" to the tooltip of each of the Chart Series.
    For example:
    $('#CbType').change(function () {
        var type = $('#CbType').val();
        var chart = getChart();
        var series = chart.options.series;
        var template;
     
        if (type == "Voltage") {
            ...
            template = "<#= value #> V ";
            ...
        }
        else {
            ...
            template = "<#= value #> A ";
            ...
        }
     
        for (var i = 0; i < series.length; i++) {
            series[i].tooltip.template = template;
        }
        
        chart.refresh();
    });


    At this stage our developers are working on most popular feature requests but in a short period of time this it will be possible to use "options" for customizing the tooltip.
    I hope this helps.



    Greetings,
    Iliana Nikolova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.

    Reply

  • Achilles avatar

    Posted on Mar 13, 2012 (permalink)

    Thanks a lot. It works

    Achilles

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Tooltips attributes don't update by client API
Related resources for "Tooltips attributes don't update by client API"

ASP.NET MVC Chart Features  |  Documentation  |  Demos  |  Telerik TV ]