Jun 09, 2017, 12:27 PM
[CLOSED] time axis and bar chart bug
Hi
the following example is based on column chart in the examples project. I merely replace the category axis by time axis and it does not show any data. Some rendering issue? It works fine if it's area series or line series.
the following example is based on column chart in the examples project. I merely replace the category axis by time axis and it does not show any data. Some rendering issue? It works fine if it's area series or line series.
@model List<object>
@{
ViewBag.Title = "Column Chart - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}
@section headtag
{
<script>
var saveChart = function (btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice === 'yes') {
btn.up('panel').down('chart').download();
}
});
};
</script>
}
@section example
{
<h1>Column Chart Sample</h1>
<p>Display a sets of random data in a column series. Reload data will randomly generate a new set of data in the store.</p>
@(X.Panel()
.Width(800)
.Height(600)
.Layout("fit")
.TopBar(X.Toolbar()
.Items(
X.ToolbarFill(),
X.Button()
.Text("Reload Data")
.Icon(Icon.ArrowRefresh)
.Handler("App.Store1.reload();"),
X.Button()
.Text("Save Chart")
.Icon(Icon.Disk)
.Handler("saveChart")
)
)
.Items(X.CartesianChart()
.Store(X.Store()
.ID("Store1")
.Data(Model)
.Model(X.Model().Fields(f =>
{
f.Add(new ModelField("Name", ModelFieldType.Date));
f.Add(new ModelField("Data1"));
}
))
.ServerProxy(X.AjaxProxy().Url(Url.Action("GetData")))
)
.Axes(
X.NumericAxis()
.Position(Position.Left)
.Fields("Data1")
.Grid(true)
.Title("Number of Hits")
.Minimum(0)
.Renderer(r => r.Handler="return Ext.util.Format.number(label, '0,0');"),
//the category works just fine:
//X.CategoryAxis()
// .Position(Position.Bottom)
// .Fields("Name")
// .Title("Month of the Year")
// .Label(X.ChartLabel().RotationDegrees(-45))
//time axis does not work with Barseries, but fine with area or line
X.TimeAxis()
.FromDate(new DateTime(2017,06,1))
.ToDate(new DateTime(2017, 06, 30))
.Position(Position.Bottom)
.Fields("Name")
.Title("date")
.Label(X.ChartLabel().RotationDegrees(-45))
)
.Series(X.BarSeries()
.Highlight(true)
.XField("Name")
.YField("Data1")
//.Tooltip(
//X.ChartTip()
// .TrackMouse(true)
// .Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));")
//)
.Label(X.ChartLabel()
.Display(SeriesLabelDisplay.InsideEnd)
.Field("Data1")
.Orientation(Orientation.Horizontal)
.Color("#333")
.TextAlign(TextSpriteAlign.Center)
.Renderer(r => r.Handler = "return Ext.util.Format.number(text, '0');")
)
)
)
)
}
controller: public StoreResult GetData()
{
List<object> data = new List<object>(30);
Random random = new Random();
double floor = (random.NextDouble() * 11) + 1;
DateTime dt = DateTime.Now;
for (int i = 0; i < 30; i++)
{
data.Add(new
{
Name = dt.AddDays(i),
Data1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data2 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data3 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data4 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data5 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data6 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data7 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data8 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
Data9 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
});
}
return new StoreResult(data);
}
Is this true that timeaxis anyways buggy and better to avoid it? it seems having problem with step and stepunit, you can try it in this example.
Last edited by fabricio.murta; Jun 14, 2017 at 1:19 PM.