Jan 18, 2017, 7:25 AM
[CLOSED] series renderer problems by store reload
Dear Ext.Net Team,
Based on Chart renderer example, I created following example which when swiped to right/left refreshes the store and hence the chart/series. However some generated sprites remains and are not cleared from the surface. Any solution?
Based on Chart renderer example, I created following example which when swiped to right/left refreshes the store and hence the chart/series. However some generated sprites remains and are not cleared from the surface. Any solution?
@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>
var onSwipe = function(e) {
switch (e.direction) {
case "right":
App.isNextPressed.setValue("false");
break;
case "left":
App.isNextPressed.setValue("true");
break;
default:
}
//console.log(App.Offset.value +' swiped ' + e.direction);
debugger;
App.ChartStore.reload();
}
function renderData(sprite, config, rendererData, index) {
var store = rendererData.store,
storeItems = store.getData().items,
last = storeItems.length - 1,
record = storeItems[index],
diff = record && 1,
changes = {},
surface = sprite.getParent(),
isRtl = this.getSurface().getInherited().rtl,
textSprites,
textSprite,
rectSprite;
if (!record) {
return;
}
// This renderer function draws a red label if series #2 is greater than series #1.
// The label displays the difference between the values of series #1 and series #2.
//
// Note: The two renderer functions in this test case cannot be consolidated. The red labels
// are rendered here because they are positioned relatively to the series #2 columns.
if (diff > 0) {
changes.strokeStyle = 'tomato';
changes.fillStyle = 'mistyrose';
changes.opacity = 1.0;
textSprites = surface.myTextSprites;
if (!textSprites) {
textSprites = surface.myTextSprites = [];
}
textSprite = textSprites[index];
if (!textSprite) {
textSprite = textSprites[index] = surface.add({ type: 'text' });
rectSprite = textSprite.rectSprite = surface.add({ type: 'rect' });
} else {
rectSprite = textSprite.rectSprite;
textSprite.show();
rectSprite.show();
}
rectSprite.setAttributes({
x: config.x + (index == last ? -17 : (isRtl ? -50 : 16)),
y: config.y - 36,
width: 30 + (diff >= 10 ? (diff >= 100 ? (diff >= 1000 ? 18 : 12) : 6) : 0),
height: 18,
stroke: 'tomato',
fill: 'mistyrose',
lineWidth: 1,
radius: 4,
zIndex: 10000
});
textSprite.setAttributes({
text: "+ " + diff,
x: config.x + (index == last ? -11 : (isRtl ? -46 : 20)),
y: config.y - 23,
fill: 'red',
fontSize: 12,
zIndex: 10001,
scalingY: -1
});
} else {
changes.strokeStyle = 'dodgerblue';
changes.fillStyle = 'palegreen';
changes.opacity = 0.6;
textSprites = surface.myTextSprites;
if (textSprites) {
textSprite = textSprites[index];
if (textSprite) {
textSprite.rectSprite.hide();
textSprite.hide();
}
}
}
return changes;
}
</script>
</head>
<body>
<h1>Buggy Chart</h1>
@(Html.X().ResourceManager().ShowWarningOnAjaxFailure(false))
@(X.CartesianChart()
.ID("testchart2")
.Height(400)
.InsetPadding(40).Flex(1)
.Listeners(l =>
{
//l.Swipe.Handler = "";
//l.Tap.Handler = "console.log('tapped');";
l.Swipe.Fn = "onSwipe";
})
.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"})
.Renderer(r => r.Fn = "renderData")
))
</body>
</html> public StoreResult GenerateDummyData(bool isNextPressed)
{
//get the location
//get the counts for location with granularity and offset
var data = new List<object>();
Random rnd = new Random();
if (isNextPressed)
{
//Hour aggregation
for (var i = 8; i < 14; i++)
{
data.Add(new { Intervall = i + ":00", Present = rnd.Next(5, 12)});
}
for (var i = 14; i < 18; i++)
{
data.Add(new { Intervall = i + ":00", Present = rnd.Next(5, 12)});
}
}
else
{
//Weekly aggregation
for (var i = 1; i < 53; i++)
{
data.Add(new { Intervall = "W" + i, Present = rnd.Next(100, 150)});
}
}
return new StoreResult(data);
}
Last edited by fabricio.murta; Feb 25, 2017 at 4:07 AM.
Reason: no user feedback for 7+ days
