Jan 24, 2017, 3:41 PM
[OPEN] [#1420] [4.1.0] Show Tooltip, anchered on series after click event
Dear Ext.net Team,
Based on the example posted below, I have a question about the Tooltip. The expected solution is to show a tooltip after a tap-Event, which is anchored on the series you clicked on. Best solution would be with the showOnTap Event. This didn't work out and I used ItemClick event (ChartItemEvents plugin included). I tested the situation with the google chrome dev tools (device toolbar). Is there a way to get the showOnTap-Event working?
Based on the example posted below, I have a question about the Tooltip. The expected solution is to show a tooltip after a tap-Event, which is anchored on the series you clicked on. Best solution would be with the showOnTap Event. This didn't work out and I used ItemClick event (ChartItemEvents plugin included). I tested the situation with the google chrome dev tools (device toolbar). Is there a way to get the showOnTap-Event working?
@using Ext.Net
@using Ext.Net.MVC
@{
ViewBag.Title = "Errorin_Chart";
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<script>
function renderTooltipS1(toolTip, record, ctx) {
var past = record.get("Past");
var present = record.get("Present");
var dataDiff = present - past;
toolTip.setHtml(ctx.field + ': ' + present);
}
function renderTouchtoolTip(series, item, e) {
var seriesTooltip = series.getTooltip();
seriesTooltip.setHtml("Tooltip to be shown on Series.");
console.log(seriesTooltip.html);
seriesTooltip.show();
}
</script>
</head>
<body>
<h1>Example Chart</h1>
@(Html.X().ResourceManager().ShowWarningOnAjaxFailure(false))
@(X.CartesianChart()
.ID("testchart2")
.Height(400)
.Plugins(p => p.Add(X.ChartItemEvents()))
.InsetPadding(40).Flex(1)
.Bin(
X.Hidden().ID("isNextPressed").Value("false"))
.Store(Html.X().Store().ID("ChartStore")
.Model(Html.X().Model().Fields(f =>
{
f.Add(Html.X().ModelField().Name("Intervall"));
f.Add(Html.X().ModelField().Name("Present"));
})).Proxy(Html.X().RestProxy().AppendAction(false).Reader(
Html.X().JsonReader().RootProperty("data")).API(urls => { urls.Read = Url.Action("GenerateDummyData", "Chart"); })
).Parameters(pm => { pm.Add(new StoreParameter("isNextPressed", "App.isNextPressed.value", ParameterMode.Raw)); })
)
.Axes(
Html.X().CategoryAxis()
.Position(Position.Bottom)
.Fields("Intervall")
.Label(Html.X().ChartLabel().RotationDegrees(-45))
)
.Series(
Html.X().BarSeries()
.XField("Intervall")
.StyleSpec(Html.X().Sprite()
.Opacity(2)
.FillStyle("#0000CD"))
.YField(new[] {"Present"})
.Titles(new[] {"Present"})
.Listeners(li => li.ItemClick.Fn = "renderTouchtoolTip") //2nd solution tried
.Tooltip(Html.X().ChartTip()
//.Config("showOnTap", true) //1st Solution tried
.Renderer(x => x.Fn = "renderTooltipS1"))
))
</body>
</html>
public StoreResult GenerateDummyData(bool isNextPressed)
{
//get the location
//get the counts for location with granularity and offset
var data = new List<object>();
var rnd = new Random();
//Hour aggregation
for (var i = 8; i < 14; i++)
{
data.Add(new { Intervall = i + ":00", Present = rnd.Next(5, 12) });
}
return new StoreResult(data);
}