[CLOSED] Line series broken with javascript error

  1. #1

    [CLOSED] Line series broken with javascript error

    A simple line chart throws javascript error after getting latest from trunk. 'index' is not defined anywhere.

    Click image for larger version. 

Name:	exterror.png 
Views:	101 
Size:	41.5 KB 
ID:	5647

    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Me.ResourceManager1.RegisterIcon(Ext.Net.Icon.Disk)
     
            If Not IsPostBack Then
                Dim data As New List(Of Object)
                
                data.Add(New With {.XField = "Jan", .Value = 75})
                data.Add(New With {.XField = "Feb", .Value = 8})
                data.Add(New With {.XField = "Mar", .Value = 85})
                data.Add(New With {.XField = "Apr", .Value = 9})
                data.Add(New With {.XField = "May", .Value = 8})
                data.Add(New With {.XField = "Jun", .Value = 75})
                data.Add(New With {.XField = "Jul", .Value = 85})
                
                Me.store.DataSource = data
                Me.store.DataBind()
                
            End If
        End Sub
        
    
    
        
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <script type="text/javascript">
    
    
        </script>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
        <ext:Panel runat="server" Title="Chart" Width="400" Height="400" Layout="FitLayout">
            <Items>
                <ext:Chart runat="server">
                    <LegendConfig Position="Top">
                    </LegendConfig>
                    <Axes>
                        <ext:NumericAxis Position="Left" Fields="Value">
                        </ext:NumericAxis>
                        <ext:CategoryAxis Position="Bottom" Fields="XField">
                        </ext:CategoryAxis>
                    </Axes>
                    <Series>
                        <ext:LineSeries XField="XField" YField="Value" />
                    </Series>
                    <Store>
                        <ext:Store runat="server" ID="store">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="XField">
                                        </ext:ModelField>
                                        <ext:ModelField Name="Value">
                                        </ext:ModelField>
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                </ext:Chart>
            </Items>
        </ext:Panel>
        <ext:TextField runat="server">
        </ext:TextField>
        </form>
    </body>
    </html>
    Last edited by Daniil; Mar 04, 2013 at 10:04 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Please, try the following overriding:

    <script type="text/javascript">
    	Ext.override(Ext.chart.LegendItem, {
    		createSeriesMarkers: function(config) {
    			var me = this,
    				index = config.yFieldIndex,
    				series = me.series,
    				seriesType = series.type,
    				surface = me.surface,
    				z = me.zIndex;
    
    			// Line series - display as short line with optional marker in the middle
    			if (seriesType === 'line' || seriesType === 'scatter') {
    				if(seriesType === 'line') {
    					var seriesStyle = Ext.apply(series.seriesStyle, series.style);
    					me.drawLine(0.5, 0.5, 16.5, 0.5, z, seriesStyle, index);
    				};
    		
    				if (series.showMarkers || seriesType === 'scatter') {
    					var markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {}, {
    						fill: series.getLegendColor(index)
    					});
    					me.drawMarker(8.5, 0.5, z, markerConfig);
    				}
    			}
    			// All other series types - display as filled box
    			else {
    				me.drawFilledBox(12, 12, z, index);
    			}
    		},
    
    		/**
    		 * @private Creates line sprite for Line series.
    		 */
    		drawLine: function(fromX, fromY, toX, toY, z, seriesStyle, index) {
    			var me = this,
    				surface = me.surface,
    				series = me.series;
    	
    			return me.add('line', surface.add({
    				type: 'path',
    				path: 'M' + fromX + ',' + fromY + 'L' + toX + ',' + toY,
    				zIndex: (z || 0) + 2,
    				"stroke-width": series.lineWidth,
    				"stroke-linejoin": "round",
    				"stroke-dasharray": series.dash,
    				stroke: seriesStyle.stroke || series.getLegendColor(index) || '#000',
    				style: {
    					cursor: 'pointer'
    				}
    			}));
    		}
    
    	});
    
    </script>
    We are investigating.
  3. #3
  4. #4
    Sencha fixed the bug. It will appear in Ext.NET with the next ExtJS upgrade.

    Thank you again for the report.

Similar Threads

  1. Replies: 13
    Last Post: Apr 26, 2016, 10:11 PM
  2. [CLOSED] [#8] Chart: Hide Line Series values
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 14, 2013, 5:41 AM
  3. [CLOSED] [#18] Chart: Single Column Series yField incorrect
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 29, 2012, 11:15 AM
  4. [CLOSED] chart series double click event
    By SymSure in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 04, 2012, 2:03 PM
  5. Replies: 3
    Last Post: Jul 13, 2012, 10:28 AM

Posting Permissions