[CLOSED] Getting ExtJs error on creating bar chart.

[PriceRightHTML5team]

Hi,

Below is a very simple code for Bar chart that i am creating dynamically:

  List<NPVBarChartModel> result = new List<NPVBarChartModel>();
        result.Add(new NPVBarChartModel() { NPVMean = 100 ScenarioName = "Test1" });
        result.Add(new NPVBarChartModel() { NPVMean = 200, ScenarioName = "Test2"});

   
        Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
        {
            ID = "BarChart",
            Animate = true,
            Height = 300,
            Shadow = true,
            Theme = "White"
            //Background = new DrawBackground(){Gradient = new Gradient(){Angle =45}}
        };


 Store store = new Store();
        store.ID = "StoreBarSnapShot1";
        var model = new Model();
        
            model.Fields.Add(new ModelField("NPVMean", ModelFieldType.String));
            model.Fields.Add(new ModelField("ScenarioName", ModelFieldType.String));
                
        store.Model.Add(model);
        store.DataSource = result;

 string handlerTips = " var stringValue = Ext.util.Format.number(value, '0.0'); return stringValue;";
        AxisLabel l = new AxisLabel();
        l.Renderer.Handler = handlerTips;

 NumericAxis numericAxis = new NumericAxis()
            {
                Fields = new[] { "NPVMean" },
                Position = Ext.Net.Position.Bottom,
                Grid = true,
                Minimum = 0.00,
               Label = l 

            };
            chtGrafico.Axes.Add(numericAxis);
        chtGrafico.Store.Add(store);

 CategoryAxis categoryAxis = new CategoryAxis()
        {
            Fields = new string[] { "ScenarioName" },
            Title = CategoryTitle,
            Position = Position.Left
        };

        chtGrafico.Axes.Add(categoryAxis);

 SeriesCollection absSeries = new SeriesCollection();
absSeries.Add(
                           Html.X().BarSeries()
                                   .Axis(Position.Bottom)
                                   .XField("ScenarioName")
                                   .YField("NPVMean")
                                   .Highlight(true)                                  
                                   .Label(new SeriesLabel()
                                   {
                                       Display = SeriesLabelDisplay.None,
                                       Field = new[] { "NPVMean" },
                                       Orientation = Orientation.Horizontal,
                                       Color = "#333E",
                                       TextAnchor = "middle"

                                   })
                                   );

  foreach (var ser in absSeries)
        {
            chtGrafico.Series.Add(ser);
        }

 pnlGrafico.Items.Add(chtGrafico);

pnlGrafico is the container where i append my chart.

I am getting following javascript error in ExtJS:

JavaScript runtime error: Object doesn't support property or method 'renderer'

at this line C.label.renderer(B[r])

Not sure whats wrong / missing .

Please let me know

[Daniil]

Hi @PriceRightHTML5team,

I corrected a syntax error here adding a colon after "100":

result.Add(new NPVBarChartModel() { NPVMean = 100 ScenarioName = "Test1" });

Also I commented out the following because I don't have such a theme:

Theme = "White"

Your code with those two changes above goes into the following example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    public class NPVBarChartModel
    {
        public int NPVMean { get; set; }
        public string ScenarioName { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            List<NPVBarChartModel> result = new List<NPVBarChartModel>();
            result.Add(new NPVBarChartModel() { NPVMean = 100, ScenarioName = "Test1" });
            result.Add(new NPVBarChartModel() { NPVMean = 200, ScenarioName = "Test2" });


            Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
            {
                ID = "BarChart",
                Animate = true,
                Height = 300,
                Shadow = true
                //, Theme = "White"
            };


            Store store = new Store();
            store.ID = "StoreBarSnapShot1";
            var model = new Model();

            model.Fields.Add(new ModelField("NPVMean", ModelFieldType.String));
            model.Fields.Add(new ModelField("ScenarioName", ModelFieldType.String));

            store.Model.Add(model);
            store.DataSource = result;

            string handlerTips = " var stringValue = Ext.util.Format.number(value, '0.0'); return stringValue;";
            AxisLabel l = new AxisLabel();
            l.Renderer.Handler = handlerTips;

            NumericAxis numericAxis = new NumericAxis()
                       {
                           Fields = new[] { "NPVMean" },
                           Position = Ext.Net.Position.Bottom,
                           Grid = true,
                           Minimum = 0.00,
                           Label = l

                       };
            chtGrafico.Axes.Add(numericAxis);
            chtGrafico.Store.Add(store);

            CategoryAxis categoryAxis = new CategoryAxis()
                   {
                       Fields = new string[] { "ScenarioName" },
                       Title = "CategoryTitle",
                       Position = Position.Left
                   };

            chtGrafico.Axes.Add(categoryAxis);

            SeriesCollection absSeries = new SeriesCollection();
            absSeries.Add(
                Html.X().BarSeries()
                        .Axis(Position.Bottom)
                        .XField("ScenarioName")
                        .YField("NPVMean")
                        .Highlight(true)
                        .Label(new SeriesLabel()
                        {
                            Display = SeriesLabelDisplay.None,
                            Field = new[] { "NPVMean" },
                            Orientation = Ext.Net.Orientation.Horizontal,
                            Color = "#333E",
                            TextAnchor = "middle"

                        })
            );

            foreach (var ser in absSeries)
            {
                chtGrafico.Series.Add(ser);
            }

            pnlGrafico.Items.Add(chtGrafico);
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel 
            ID="pnlGrafico" 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FitLayout" />
    </form>
</body>
</html>

It appears to be working well and I don't see any JavaScript error.

If you use Razor, I think it should work in the same way.

If the issue persists, please provide a full test case.

[PriceRightHTML5team]

Hi @PriceRightHTML5team,

I corrected a syntax error here adding a colon after "100":

result.Add(new NPVBarChartModel() { NPVMean = 100 ScenarioName = "Test1" });

Also I commented out the following because I don't have such a theme:

Theme = "White"

Your code with those two changes above goes into the following example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    public class NPVBarChartModel
    {
        public int NPVMean { get; set; }
        public string ScenarioName { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            List<NPVBarChartModel> result = new List<NPVBarChartModel>();
            result.Add(new NPVBarChartModel() { NPVMean = 100, ScenarioName = "Test1" });
            result.Add(new NPVBarChartModel() { NPVMean = 200, ScenarioName = "Test2" });


            Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
            {
                ID = "BarChart",
                Animate = true,
                Height = 300,
                Shadow = true
                //, Theme = "White"
            };


            Store store = new Store();
            store.ID = "StoreBarSnapShot1";
            var model = new Model();

            model.Fields.Add(new ModelField("NPVMean", ModelFieldType.String));
            model.Fields.Add(new ModelField("ScenarioName", ModelFieldType.String));

            store.Model.Add(model);
            store.DataSource = result;

            string handlerTips = " var stringValue = Ext.util.Format.number(value, '0.0'); return stringValue;";
            AxisLabel l = new AxisLabel();
            l.Renderer.Handler = handlerTips;

            NumericAxis numericAxis = new NumericAxis()
                       {
                           Fields = new[] { "NPVMean" },
                           Position = Ext.Net.Position.Bottom,
                           Grid = true,
                           Minimum = 0.00,
                           Label = l

                       };
            chtGrafico.Axes.Add(numericAxis);
            chtGrafico.Store.Add(store);

            CategoryAxis categoryAxis = new CategoryAxis()
                   {
                       Fields = new string[] { "ScenarioName" },
                       Title = "CategoryTitle",
                       Position = Position.Left
                   };

            chtGrafico.Axes.Add(categoryAxis);

            SeriesCollection absSeries = new SeriesCollection();
            absSeries.Add(
                Html.X().BarSeries()
                        .Axis(Position.Bottom)
                        .XField("ScenarioName")
                        .YField("NPVMean")
                        .Highlight(true)
                        .Label(new SeriesLabel()
                        {
                            Display = SeriesLabelDisplay.None,
                            Field = new[] { "NPVMean" },
                            Orientation = Ext.Net.Orientation.Horizontal,
                            Color = "#333E",
                            TextAnchor = "middle"

                        })
            );

            foreach (var ser in absSeries)
            {
                chtGrafico.Series.Add(ser);
            }

            pnlGrafico.Items.Add(chtGrafico);
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel 
            ID="pnlGrafico" 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FitLayout" />
    </form>
</body>
</html>

It appears to be working well and I don't see any JavaScript error.

If you use Razor, I think it should work in the same way.

If the issue persists, please provide a full test case.

Ok i removed "Theme =White" and it worked