[CLOSED] Configure marker for one datapoint for line graph

**PriceRightHTML5team** · Nov 18, 2013, 9:46 AM

Hi Ext Team,

I have a scenario where in if a flag is true for a particular datapoint i need to display a "circle" instead of a "diamond" only for that data point.
Rest of them should be diamond.

Below snapshot will give u the better idea.

Click image for larger version.

Name: Circle.PNG
Views: 18
Size: 4.3 KB
ID: 7224

Wondering if this can be achieved with Ext.Net / Ext Js

Please do let me know

Thanks in advance

**Daniil** · Nov 18, 2013, 11:54 AM

Hi @PriceRightHTML5team,

Well, it is possible to configure a marker's attributes this way.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store s = this.Chart1.GetStore();
            s.DataSource = new object[]
            {
                new 
                {
                    x = 0,
                    y = 0  
                },
                new 
                {
                    x = 50,
                    y = 50  
                },
                new 
                {
                    x = 100,
                    y = 100   
                }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Chart 
            ID="Chart1" 
            runat="server" 
            Width="400" 
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="x" />
                                <ext:ModelField Name="y" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y">
                    <Renderer Handler="if (this.markerGroup.contains(sprite)) {
                                           if (index === 1) {
                                               attributes.fill = 'red';
                                           } else {
                                               attributes.fill = 'green';
                                           } 
                                       }
                        
                                       return attributes;" />
                </ext:LineSeries>
            </Series>
        </ext:Chart>
    </form>
</body>
</html>

Though, I am afraid it won't work for a marker's type. I mean that this is not going to work:

attributes.type = 'diamond'; // or 'circle', etc.

I can suggest you to try the following - create a new marker at all (still inside a Series' Renderer) and replace an existing one in markerGroup.

**PriceRightHTML5team** · Nov 19, 2013, 8:44 AM

Originally Posted by Daniil

Hi @PriceRightHTML5team,

Well, it is possible to configure a marker's attributes this way.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store s = this.Chart1.GetStore();
            s.DataSource = new object[]
            {
                new 
                {
                    x = 0,
                    y = 0  
                },
                new 
                {
                    x = 50,
                    y = 50  
                },
                new 
                {
                    x = 100,
                    y = 100   
                }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Chart 
            ID="Chart1" 
            runat="server" 
            Width="400" 
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="x" />
                                <ext:ModelField Name="y" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y">
                    <Renderer Handler="if (this.markerGroup.contains(sprite)) {
                                           if (index === 1) {
                                               attributes.fill = 'red';
                                           } else {
                                               attributes.fill = 'green';
                                           } 
                                       }
                        
                                       return attributes;" />
                </ext:LineSeries>
            </Series>
        </ext:Chart>
    </form>
</body>
</html>

Though, I am afraid it won't work for a marker's type. I mean that this is not going to work:

attributes.type = 'diamond'; // or 'circle', etc.

I can suggest you to try the following - create a new marker at all (still inside a Series' Renderer) and replace an existing one in markerGroup.

Thanks Daniil for the reply..
Can you please provide a brief snippet on how can i create a marker inside a Renderer?

**Daniil** · Nov 19, 2013, 12:43 PM

It looks quite a challenge task. I don't have a snippet.

You can start with reviewing how it is created in the sources:
http://docs.sencha.com/extjs/4.2.1/s...cfg-drawSeries

Search for the "marker = Ext.chart.Shape" text.

**PriceRightHTML5team** · Nov 20, 2013, 10:50 AM

How can i increase the size of the marker..below code is not working

 .Renderer(r => r.Handler = @"
                                        if (this.markerGroup.contains(sprite)) {                                     
                                        var item = store.getAt(index);
                                        var s = item.get('IS-Schedule" + row + "');" +
                                           @"if (s === 'True') {
                                              attributes.fill = 'red';
                                              attributes.size = 6;
                                           } 
                                       }                         
                                       return attributes;")

**Daniil** · Nov 20, 2013, 12:18 PM

Well, it depends on the shape of markers.

For example, with circles, you should use "radius".

<Renderer Handler="if (this.markerGroup.contains(sprite)) {
                        if (index === 1) {
                            attributes.radius = 10;
                        } else {
                            attributes.radius = 5;
                        } 
                    }
                         
                    return attributes;" />

**PriceRightHTML5team** · Nov 21, 2013, 5:34 AM

Originally Posted by Daniil

Well, it depends on the shape of markers.

For example, with circles, you should use "radius".

<Renderer Handler="if (this.markerGroup.contains(sprite)) {
                        if (index === 1) {
                            attributes.radius = 10;
                        } else {
                            attributes.radius = 5;
                        } 
                    }
                         
                    return attributes;" />

I have marker type as diamond for this case and using the below code:

.Renderer(r => r.Handler = @"
                                        if (this.markerGroup.contains(sprite)) {                                      
                                        var item = store.getAt(index);
                                        var s = item.get('IS-Schedule" + row + "');" +
                                           @"if (s === 'True') {										     
                                              attributes.fill = 'red';
                                              attributes.size = 50;
                                              attributes.radius = 50;										
                                           } 
                                       }                         
                                       return attributes;")

but its not working..only the color is getting applied

**Daniil** · Nov 21, 2013, 12:49 PM

The radius and size options are used to create a diamond's path. By the time a Renderer executes, it is too late to change those settings because a Sprite diamond object is already created.

You have to change the path attribute. Here is an example.

Example

<%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store s = this.Chart1.GetStore();
            s.DataSource = new object[]
            {
                new 
                {
                    x = 0,
                    y = 0  
                },
                new 
                {
                    x = 50,
                    y = 50  
                },
                new 
                {
                    x = 100,
                    y = 100   
                }
            };
        }
    }
</script>
 
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Chart
            ID="Chart1"
            runat="server"
            Width="400"
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="x" />
                                <ext:ModelField Name="y" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y">
                    <MarkerConfig Type="Diamond" />
                    <Renderer Handler="if (this.markerGroup.contains(sprite)) {
                                           var defaultPath = sprite.path;

                                           if (index === 1) {
                                               var r = 10;
                                               attributes.path = ['M', 0, - r, 'l', r, r, -r, r, -r, -r, r, -r, 'z']
                                           } else {
                                               attributes.path = defaultPath;
                                           } 
                                       }
                         
                                       return attributes;" />
                </ext:LineSeries>
            </Series>
        </ext:Chart>
    </form>
</body>
</html>

**PriceRightHTML5team** · Feb 04, 2014, 12:21 PM

Hi Daniil,

I am using a markertype Cross for some specific condition. How can i increase its size .
I tried:

 if(isProvisional == '1'){

                                                var r = 12;
                                                attributes.path = ['M', 0, - r, 'l', r, r, -r, r, -r, -r, r, -r, 'z'];                                               
                                             
                                           }

Above code is working for diamond but not for cross.

Please let me know how can we increase the size of cross?

Thanks in advance

**Daniil** · Feb 05, 2014, 2:58 AM

You should use the Radius setting.

<MarkerConfig Type="Cross" Radius="10" />

Thread: [CLOSED] Configure marker for one datapoint for line graph

Thread Tools

Search Thread

Display

[CLOSED] Configure marker for one datapoint for line graph

Similar Threads

[OPEN] [#1547] [2.x] Offseting the first datapoint on the x- axis

[CLOSED] Configure Legend of Line Chart Series

[CLOSED] Line Graph in ext.net

[CLOSED] Vertical Marker on partial line series

[CLOSED] Scatter Graph

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Configure marker for one datapoint for line graph

[CLOSED] Configure marker for one datapoint for line graph

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us