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.
Add a comment
|
3 Answers
Right Now, There is no way to do this.
Comments
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>
2 Comments
Brij
I have to show tooltip means if user mouse over the point of Mon in chart it should show 23 in your example and 12 for Tue.
Beno
gotcha... since these charts are rendered as images, I don't think this can be easily done. You could try and put an image map on it but I don't think it would be worth the effort. you could try one of the jquery charting products eg. plugins.jquery.com/project/gchart or jqplot.com (i haven't used these before but from what I can see, they are free options)
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)
