CODEWITHSUNDEEP
jqueryasp.netrazorchartsasp.net-mvc-3
Brij
Brij

Reputation: 6122

How to show tooltip using ASP.NET MVC 3 Chart Web Helper

Is there any sample to show tooltip on chart generated by Chart Web Helper in ASP.NET MVC 3 Razor engine? I have to create and show child chart when user clicks on any point of parent chart. Please let me know how i can do this.

Upvotes: 1

Views: 3122

Answers (3)

benk
benk

Reputation: 446

There is another Chart class in System.Web.UI.DataVisualization.Charting.Chart. It uses the same renderer, but lets you create charts from code more easily. This Chart has the built in function GetHtmlImageMap, which you can use to display tooltips for each of the data points. The view model would have both the image map and the image.

Unfortunately the @Html.ImageFromByte doesn't allow you to specify an image map, but you can work around this. Convert the graph image to base64 display it using raw html.

controller:

            System.Web.UI.DataVisualization.Charting.Chart chart = // create your chart
            var stream = new MemoryStream();
            chart.SaveImage(stream, ChartImageFormat.Png);
            var vm = new YourViewModel
            {
                ChartBase64 = Convert.ToBase64String(stream.GetBuffer()),
                ChartHtmlMap = chart.GetHtmlImageMap("map")
            };

viewmodel:

        public string ChartBase64 { get; set; }
        public string ChartHtmlMap { get; set; }

cshtml:

    @Html.Raw("<img src=data:image/jpg;base64," + Model.ChartBase64 + " usemap=\"#map\">")
    @Html.Raw(Model.ChartHtmlMap)

Upvotes: 0

Brij
Brij

Reputation: 6122

Right Now, There is no way to do this.

Upvotes: 1

Beno
Beno

Reputation: 4753

I'm not entirely sure what you are asking but my take on it is this...

This will show a page with a chart. When you click on the chart, it will open a new chart. Very basic but maybe enough to play around with.

Put this in your controller:

    public ActionResult GetRainfallChart()
    {
        var key = new Chart(width: 600, height: 400)
            .AddSeries(
                chartType: "bar",
                legend: "Chart",
                xValue: new[] { "Mon", "Tue", "Wed", "Thu", "Fri" },
                yValues: new[] { "23", "12", "13", "42", "22" })
            .Write();

        return null;
    }

    public ActionResult GetRainfallChart2()
    {
        var key = new Chart(width: 600, height: 400)
            .AddSeries(
                chartType: "pie",
                legend: "Another chart",
                xValue: new[] { "Mon", "Tue", "Wed", "Thu", "Fri" },
                yValues: new[] { "23", "12", "13", "42", "22" })
            .Write();

        return null;
    }

and this for your view:

<!DOCTYPE html>
<html>
<head>
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script>
        $(function () {
            $("#dialog").dialog({
                autoOpen: false
            });

            $("#chart").click(function () {
                $("#dialog").dialog("open");
                return false;
            });
        });
    </script>
</head>

<body>

    <img id="chart" src="/Home/GetRainfallChart" alt="Chart tooltip" />

    <div id="dialog">
        <img src="/Home/GetRainfallChart2" />
    </div>

</body>
</html>

Upvotes: 0

Related Questions