[CLOSED] [#1392] [4.2.0] Mobile.mvc do not support PolarChart?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [#1392] [4.2.0] Mobile.mvc do not support PolarChart?

    I used Mobile.Mvc like X.PolarChart()
    but the Ext.decode(response) been given you're trying to decode an invalid json string:
    Last edited by fabricio.murta; Oct 14, 2016 at 10:14 PM.
  2. #2
    Hello @hjk1130!

    I don't really see a reason for it not to work in MVC, it must be the way you are writing it in MVC.

    But there's the possibility that a given syntax that should work was not properly supported in MVC Razor syntax. Can you provide us a test case showing how you are trying to build the chart? From that we can explore, worst case, at least a work around or another writing line to have it working.

    You probably already browsed it, but as far as WebForms is concerned, we have sample pages with them here: Mobile Examples - Polar Charts.

    Looking forward for your feedback!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    There is not any Chart Examples in http://mvc.mobile.ext.net/

    my codes :
    @{
        var X = Html.X();
    }
    
    @(
     X.PolarChart().InnerPadding(10)
        .Store(
            X.Store().ID("StoreZic")
                .ServerProxy(X.AjaxProxy().Url("/api/home/getzicdata"))
                .Model(
                    X.Model().Fields(
                        new ModelField("CltZicTyp", ModelFieldType.String),
                        new ModelField("CltZicPer", ModelFieldType.Float)
                    )
                )
         )
         .Interactions(
            X.ItemHighlightInteraction(),
            X.RotateInteraction()
         )
         .LegendConfig(X.ChartLegend().Docked(Dock.Right))
         .Series(X.PieSeries()
            .AngleField("CltZicPer").Donut(0)
            .Label(X.ChartLabel().Field("CltZicTyp").FontSize("14").Display(SeriesLabelDisplay.Rotate))
            .HighlightDefaults(X.Sprite().Margin(20))
         )
    )
    [DirectMethod]
            public ActionResult GetView(string viewName)
            {
                var path = @"~\Views\Home\";
                path = String.Concat(path, viewName, ".cshtml");
                return new Ext.Net.Mobile.MVC.PartialViewResult
                {
                    ViewName = path,
                    RenderMode = RenderMode.Config
                };
            }
    App.direct.GetView(viewName, {
            success: function (response) {
                console.log(response);
                response = Ext.decode(response);
                Ext.net.loadResources(response, function (config) {
                    var view = Ext.create(config[0]);
                    Ext.Viewport.animateActiveItem(view, {
                        type: "slide",
                        direction: 'left'
                    });
                }, this);
            }
            scope: this
        });

    finally there is a js error:you're trying to decode an invalid json string.
    the response is a invalid json string.
  4. #4
    Hello @hjk1130!

    Please provide full example so we can run it in our side.

    I've ported the WebForms example to a simple view-only page in MVC and it works fine:

    
    @{
        Layout = null;
        var X = Html.X();
    
        var n = 5;
        var floor = 20;
        
        List<object> data = new List<object>(n);
        Random random = new Random();
        double p = (random.NextDouble() * 11) + 1;
    
        for (int i = 0; i < n; i++)
        {
            data.Add(new
            {
                id = i,
                name = (char)('A' + i),
                g0 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                g1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                g2 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                g3 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                g4 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                g5 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                g6 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
            });
        }
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div> 
            @Html.X().ResourceManager().ScriptMode(Ext.Net.Mobile.ScriptMode.Debug).SourceFormatting(true)
    
            @(
                X.PolarChart()
                    .InnerPadding(10)
                    .FullScreen(true)
                    .Store(
                        X.Store().ID("StoreZic")
                            .Data(data)
                            .Fields(
                                new ModelField("id"),
                                new ModelField("g0"),
                                new ModelField("g1"),
                                new ModelField("g2"),
                                new ModelField("g3"),
                                new ModelField("g4"),
                                new ModelField("g5"),
                                new ModelField("g6"),
                                new ModelField("name")
                            )
                     )
                     .Interactions(
                        X.ItemHighlightInteraction(),
                        X.RotateInteraction()
                     )
                     .LegendConfig(X.ChartLegend().Docked(Dock.Right))
                     .Series(X.PieSeries()
                        .AngleField("g1").Donut(30)
                        .Label(
                            X.ChartLabel()
                                .Field("name")
                                .FontSize("14")
                                .Display(SeriesLabelDisplay.Rotate)
                        )
                        .HighlightDefaults(X.Sprite().Margin(20))
                     )
            )
        </div>
    </body>
    </html>
    So, there's something with your model. Additionally, please provide a sample code without layout, much like the one I just provided above. One possibility is a problem with the getzicdata action, it probably is not returning data the way it was meant to. Well, of course, it is possible that it returns correctly and Ext.NET is not handling it correctly. But only way to find out is being able to run the example.
    Fabrício Murta
    Developer & Support Expert
  5. #5

    My problem is that PolarChart can not be created through by function "Ext.Net.Mobile.Mvc.PartialViewResult" in Controlers

    yes,I know it runs very well in full example .
    But I would like to create dynamic view like your example.
    Read 'csthml' by [DirectMethod] GetView.
    And create view page by js like this.

         App.direct.GetView(viewName, {
            success: function (response) {
                console.log(response);
                response = Ext.decode(response);
                Ext.net.loadResources(response, function (config) {
                    var view = Ext.create(config[0]);
                    Ext.Viewport.animateActiveItem(view, {
                        type: "slide",
                        direction: 'left'
                    });
                }, this);
            }
            scope: this
        });
    it works well in every page,but only in PolarChart View.
  6. #6
    Hello!

    Can you draw a simple example out of the approach you are using? I'm not sure how you are calling the direct method at all. Please provide the necessary views, models and controller codes so we can reproduce the error you're seeing in our side. Then we'll be able to provide you a good advice on how to solve the issue.
    Fabrício Murta
    Developer & Support Expert
  7. #7

    this is my simple example

    controllers:
        [DirectController]
        public class HomeController : Controller
        {
            public ActionResult test()
            {
                return View();
            }
    
            [DirectMethod]
            public ActionResult GetView(string viewName)
            {
                var path = @"~\Views\Home\";
                path = String.Concat(path, viewName, ".cshtml");
                return new Ext.Net.Mobile.MVC.PartialViewResult
                {
                    ViewName = path,
                    RenderMode = RenderMode.Config
                };
            }
        }
    test.cshtml
    @{
        Layout = null;
        var X = Html.X();
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <script type="text/javascript">
            var showView = function (viewName) {
                App.direct.GetView(viewName, {
                    success: function (response) {
                        response = Ext.decode(response);
                        Ext.net.loadResources(response, function (config) {
                            var view = Ext.create(config[0]);
                            Ext.Viewport.animateActiveItem(view, {
                                type: "slide",
                                direction: 'left'
                            });
                        }, this);
                    },
                    complete: function () {
                        Ext.Viewport.setMasked(false);
                    },
                    scope: this
                });
            };
            var onBack = function () {
                var view = Ext.Viewport.getActiveItem();
                Ext.Viewport.animateActiveItem(0, {
                    type: "slide",
                    direction: 'right'
                });
                Ext.Viewport.remove(view);
                view.destroy();
            };
        </script>
    </head>
    <body>
        @X.ResourceManager()
    
        @(X.Container().FullScreen(true).Padding(10).Layout(LayoutType.VBox)
            .Items(
                X.Button().Text("chart error").Margin(10).Handler("showView('chart');"),   
                X.Button().Text("view success").Margin(10).Handler("showView('view');")
            )
        )
    
    
    </body>
    </html>
    chart.csthml
    @{
        Layout = null;
        var X = Html.X();
        var n = 5;
        var floor = 20;
        List<object> data = new List<object>(n);
        Random random = new Random();
        double p = (random.NextDouble() * 11) + 1;
        for (int i = 0; i < n; i++)
        {
            data.Add(new
            {
                id = i,
                name = (char)('A' + i),
                g1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
            });
        }
    }
    
    @(
     X.Container().Layout(LayoutType.Fit)
        .Items(
            X.TitleBar().Title("test")
                .Items(
                    X.Button().Text("back").UI(ButtonUI.Back).Handler("onBack();")
                ),
            X.PolarChart().InnerPadding(10)
                .Store(
                    X.Store().Data(data).Fields("id", "g1", "name")
                )
                .Interactions(
                    X.ItemHighlightInteraction(),
                    X.RotateInteraction()
                )
                .Series(X.PieSeries()
                    .AngleField("g1").Donut(30)
                    .Label(
                        X.ChartLabel().Field("name").Display(SeriesLabelDisplay.Rotate)
                    )   
                )             
        )
    )
    view.cshtml
    @{
        Layout = null;
        var X = Html.X();
    }
    
    @(
     X.Container()
        .Items(
            X.TitleBar().Title("this is a test view")
                .Items(
                    X.Button().Text("back").UI(ButtonUI.Back).Handler("onBack();")
                )
        )
    )
    you can tap the button in test.cshtml
    the first button runs incorrectly
    the sencond button works fine
  8. #8
    Thanks! That looks perfect! We'll be working on it and will return to you soon with a solution (or a bug statement if really hard to make it work).
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hello again!

    There's a problem both on your approach -and- in Ext.NET in this case.

    Using charts requires the chart resources to be loaded. While in a single page it can handle loading nicely, how is it supposed to load the charts dependencies from a partial load you bring as a config object?.. That's like chasing the tail.

    We can (and should) fix Ext.NET to provide the script as a config block, but as you are not running any script, but want the component JavaScript object only, it can't be helped, but the scripts must be loaded somewhere else. So you either just fall back to load the resources by yourself (and wait for a fix in this config>script issue) or use a partial view approach where you load the scripts necessary to create the components you want.

    I'm now investigating a fix for this config return so at least it returns a config when we specify we want a config object! :)
    Fabrício Murta
    Developer & Support Expert
  10. #10
    After further investigating, I found out that if the component's .ToConfig() method is called, it appends the resources that will be correctly allocated using the approach you are, and this should also happen on partial views when returning components' config objects.

    We are working in a fix, it already works in your specific case but we'll do some tests to check whether it does not affect other partialView usages before marking the issue as done.

    Github issue #1392 is logged to track this defect, and we will update here as soon as we have this fixed.

    As this issue is also present in Ext.NET, we'll apply the fix for both Ext.NET and Ext.NET mobile!
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Mar 04, 2016, 11:12 AM
  2. [CLOSED] Passing PolarChart Id to Tip Render Function
    By rguardado in forum 3.x Premium Help
    Replies: 1
    Last Post: Apr 16, 2015, 9:59 PM
  3. Replies: 1
    Last Post: Apr 16, 2015, 9:38 PM
  4. [CLOSED] How Can I get a center polarchart inside a panel?
    By rguardado in forum 3.x Premium Help
    Replies: 1
    Last Post: Apr 16, 2015, 9:32 PM
  5. [CLOSED] Center Polarchart in panel
    By rguardado in forum 3.x Premium Help
    Replies: 1
    Last Post: Apr 15, 2015, 6:54 PM

Posting Permissions