[CLOSED] time axis and bar chart bug

[mirwais]

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.

@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.

[fabricio.murta]

Hello!

Look at the console message it drops when you try to open the page:

Uncaught Error: 'bar' series should be used with a 'category' axis. Please refer to the bar series docs.

So I went to ExtJS docs on Bar Series and I see this note:

Note: 'bar' series is meant to be used with the Ext.chart.axis.Category axis as its x-axis.

So I guess there's not much that can be done to make a chart using bar series to work with the TimeAxis axis on the x-axis. But we should, indeed, prohibit other axes not the Category one to be used with the chart.

I'm afraid best we can do (to favor code reuse) would be to throw an exception if the combination of Bar series and anything other than CategoryAxis is used on its abscissa, which is not really too different than what you are getting in client side.

I hope this helps!

[mirwais]

Thanks Fabricio for the support.
Well I don't see anything in the console, strange!
But yes I see the documentation and thanks for pointing me out. In this case I have to change to CategoryAxis even if it's a time dimension. Time Axis has a useful option FromDAte, ToDate which segments the axis very well, to achieve this option in category I need to somehow implement this feature.

[fabricio.murta]

Hello @mirwais!

Thanks for the feedback! Strange you don't see anything in the console. Maybe you're not building in debug mode? Or, more likely, you have to enable Ext.NET's ScriptMode=Debug in order to see more debugging information. In some cases, some errors and warnings only trigger when this setting is enabled.