[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.
Code:
@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:
Code:
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.
