[CLOSED] live chart with minutes as Unit.

[blueworld]

Hi Daniil,

I am trying to develop a live chart with minutes as Unit. This does work fine in terms of displaying it, but I need a live updated chart, and I cant get it working.

The hour/minute/second components of timeaxis ToDate are all 0

This is my update method (just test data):

    Public Class ChartItem
        Public Property ChartDate As Date
        Public Property ChartValue As Integer
    End Class

    <DirectMethod()>
    Public Sub GetNewLiveData()

        Dim chartdata As New List(Of ChartItem)

        Dim c1 As New ChartItem
        Dim c2 As New ChartItem

        c1.ChartDate = DateTime.Now
        c1.ChartValue = New Random().Next(0, 100)

        c2.ChartDate = DateTime.Now
        c2.ChartValue = New Random().Next(0, 100)

        Dim timeAxis As TimeAxis = DirectCast(Me.Chart1.Axes(1), TimeAxis)

        If (c1.ChartDate.TimeOfDay > timeAxis.ToDate.TimeOfDay) Then

            Me.Chart1.SetMarkerIndex(1)
            timeAxis.SetToDate(timeAxis.ToDate.AddMinutes(1))
            timeAxis.SetFromDate(timeAxis.FromDate.AddMinutes(1))

        End If
        chartdata.Add(c1)
        chartdata.Add(c2)
        Me.ChartStore.DataSource = chartdata
        Me.ChartStore.DataBind()

    End Sub

                    <ext:Chart 
                    ID="Chart1" 
                    runat="server"
                    StyleSpec="background:#fff;"                                       
                    Animate="true" Height="360">                    
                    <Store>
                        <ext:Store ID="ChartStore" runat="server">                           
                            <Model>
                                <ext:Model ID="Model13" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="ChartDate" Type="Date" />
                                        <ext:ModelField Name="ChartValue" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis                             
                            Fields="ChartValue"
                            Title="Number of Hits"                            
                            Minimum="0"
                            Maximum="100">
                            <GridConfig>
                                <Odd Opacity="1" Fill="#dedede" Stroke="#ddd" StrokeWidth="0.5" />
                            </GridConfig>
                        </ext:NumericAxis>                            

                        <ext:TimeAxis
                            Position="Bottom" 
                            Fields="ChartDate" 
                            Title="Day" 
                            DateFormat="hh:mm"
                            StepUnit="Minute"
                            Step="1" 
                            Constrain="true" 
                            FromDate="<%# DateTime.Now.AddMinutes(-1)%>"
                            ToDate="<%# DateTime.Now.addMinutes(2)%>"
                            Grid="true" 
                            AutoDataBind="true"/>
                    </Axes>
                    <Series>
                        <ext:LineSeries Axes="Left,Bottom" XField="ChartDate" YField="ChartValue">
                            <MarkerConfig Size="5" Radius="5" />
                        </ext:LineSeries>
                    </Series>
                </ext:Chart>

Any suggestion how to live update a chart with minutes as unit?

[Baidaly]

Hello!

Please, take a look at this sample:

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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
    public class DataItem
    {
        public DateTime Date
        {
            get;
            set;
        }

        public int Visits
        {
            get;
            set;
        }

        public int Views
        {
            get;
            set;
        }

        public int Users
        {
            get;
            set;
        }
    }

    public DataItem LastDataItem
    {
        get
        {
            if ((!this.IsPostBack && !X.IsAjaxRequest))
            {
                this.Session["LiveUpdatesDataItem"] = null;
            }

            return this.Session["LiveUpdatesDataItem"] as DataItem;
        }
        set
        {
            this.Session["LiveUpdatesDataItem"] = value;
        }
    }

    public DataItem Data
    {
        get
        {
            DataItem dataItem = this.LastDataItem;                                
            Random random = new Random();

            DataItem di = new DataItem
            {
                Date = dataItem != null ? dataItem.Date.AddMinutes(1) : new DateTime(2011, 1, 1, 0, 0, 0),
                Visits = Convert.ToInt32(Math.Min(100, Math.Max(dataItem != null ? (dataItem.Visits + (random.NextDouble() - 0.5) * 20) : random.NextDouble() * 100, 0))),
                Views = Convert.ToInt32(Math.Min(100, Math.Max(dataItem != null ? (dataItem.Views + (random.NextDouble() - 0.5) * 10) : random.NextDouble() * 100, 0))),
                Users = Convert.ToInt32(Math.Min(100, Math.Max(dataItem != null ? (dataItem.Users + (random.NextDouble() - 0.5) * 20) : random.NextDouble() * 100, 0)))
            };

            this.LastDataItem = di;
            
            return di;
        }
    }

    protected void GetNewData(object sender, DirectEventArgs e)
    {
        DataItem data = this.Data;
        TimeAxis timeAxis = (TimeAxis)Chart1.Axes[1];

        if (new DateTime(2011, 1, 1, 0, 7, 0) < data.Date)
        {            
            this.Chart1.SetMarkerIndex(1);            
            timeAxis.SetToDate(data.Date);
            timeAxis.SetFromDate(DateUnit.Minute, 1);            
        }

        this.Chart1.GetStore().LoadData(new DataItem[] { data }, true);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.Chart1.GetStore();
            
            store.DataSource = new List<DataItem>{this.Data};
            store.DataBind();
        }
    }
</script>    

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Live Updated Chart</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel 
            runat="server"
            Title="Live Animated Chart"
            Width="800"
            Height="600"
            Layout="FitLayout">            
            <Items>
                <ext:Chart 
                    ID="Chart1" 
                    runat="server"
                    StyleSpec="background:#fff;"                                       
                    Animate="true">                    
                    <Store>
                        <ext:Store runat="server">                           
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Date" Type="Date" />
                                        <ext:ModelField Name="Visits" />
                                        <ext:ModelField Name="Views" />
                                        <ext:ModelField Name="Users" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Listeners>
                                <%--remove old (time) data--%>
                                <DataChanged Handler="if(this.getCount() > 10){this.suspendEvents(); this.removeAt(0);this.resumeEvents();}" />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis                             
                            Fields="Views,Visits,Users"
                            Title="Number of Hits"                            
                            Minimum="0"
                            Maximum="100">
                            <GridConfig>
                                <Odd Opacity="1" Fill="#dedede" Stroke="#ddd" StrokeWidth="0.5" />
                            </GridConfig>
                        </ext:NumericAxis>                            

                        <ext:TimeAxis 
                            Position="Bottom" 
                            Fields="Date" 
                            Title="Day" 
                            DateFormat="hh:mm" 
                            Constrain="true" 
                            StepUnit="Minute"
                            FromDate="<%# new DateTime(2011, 1, 1, 0, 0, 0) %>"
                            ToDate="<%# new DateTime(2011, 1, 1, 0, 7, 0) %>"
                            Grid="true" 
                            AutoDataBind="true"
                            />
                    </Axes>
                    <Series>
                        <ext:LineSeries Axes="Left,Bottom" XField="Date" YField="Visits">
                            <Label Display="None" Field="Visits" TextAnchor="middle" />
                            <MarkerConfig Size="5" Radius="5" />
                        </ext:LineSeries>

                        <ext:LineSeries Axes="Left,Bottom" XField="Date" YField="Views">
                            <Label Display="None" Field="Visits" TextAnchor="middle" />
                            <MarkerConfig Size="5" Radius="5" />
                        </ext:LineSeries>

                        <ext:LineSeries Axes="Left,Bottom" XField="Date" YField="Users">
                            <Label Display="None" Field="Visits" TextAnchor="middle" />
                            <MarkerConfig Size="5" Radius="5" />
                        </ext:LineSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>

        <ext:TaskManager runat="server">
            <Tasks>
                <ext:Task TaskID="DataTask" AutoRun="true" Interval="2000">
                    <DirectEvents>
                        <Update OnEvent="GetNewData" />
                    </DirectEvents>
                </ext:Task>
            </Tasks>
        </ext:TaskManager>
    </form>    
</body>
</html>

[blueworld]

Thank Baidaily.

So far this example does work fine.

In my real application, I need to work with exact timestamps, so I need to take care of seconds as well.

What should happen is that the graph for example moves 30 times between 12:01 and 12:02. The the chart should scroll and the graph should move another 30 times, and scroll again.

So If I get 30 different timestamps within a minute, it should behave like that.

Is it possible at the moment?

Or in other words, the behavior in the demo is right (scroll every minute), but the graph steps need to be done in seconds

[Baidaly]

Thank Baidaily.

So far this example does work fine.

In my real application, I need to work with exact timestamps, so I need to take care of seconds as well.

What should happen is that the graph for example moves 30 times between 12:01 and 12:02. The the chart should scroll and the graph should move another 30 times, and scroll again.

So If I get 30 different timestamps within a minute, it should behave like that.

Is it possible at the moment?

Or in other words, the behavior in the demo is right (scroll every minute), but the graph steps need to be done in seconds

I believe it's possible. You can declare own data in this method:

protected void GetNewData(object sender, DirectEventArgs e)

And set required interval between requests:

<ext:Task TaskID="DataTask" AutoRun="true" Interval="2000">

[blueworld]

Hi Baidaily,

this does work for the first minute, after that, the chart scrolls at every update because New DateTime(2011,1,1,0,1,0) is always lower than data.[Date] -> the minute component already has been increased

    Protected Sub GetNewData(sender As Object, e As DirectEventArgs)
        Dim data As DataItem = Me.Data
        Dim timeAxis As TimeAxis = DirectCast(Chart1.Axes(1), TimeAxis)

        If New DateTime(2011, 1, 1, 0, 1, 0) < data.[Date] Then
            Me.Chart1.SetMarkerIndex(1)
            timeAxis.SetToDate(DateUnit.Minute, 1)
            timeAxis.SetFromDate(DateUnit.Minute, 1)
        End If

        Me.Chart1.GetStore().LoadData(New DataItem() {data}, True)
    End Sub

I update every 5 seconds, this is the date part of my new data:

di.[Date] = If(dataItem IsNot Nothing, dataItem.[Date].AddSeconds(5), New DateTime(2011, 1, 1, 0, 0, 0))

[Baidaly]

Sorry, I don't quite understand your requirements. If you update every 5 second but your TimeAxis displays Minutes then how it should correspond. Maybe you should set Chart's unit to Seconds and Step to 5 seconds?

Can you clarify your requirements?

[blueworld]

Hi Baidaily,

I press a button.
A window opens.
This Window displays the chart.
The chart should display a whole minute.
The minute starts from now.

So if I open the window at 13:47 the chart should display 13:47 - 13:48
If the line reaches the end of the chart at 13:48 it should scroll and then display 13:48 - 13:49 and so on

I am displaying the speed of a car, and I want to update it every 5 seconds.

Maybe I am thinking too complicated, could you please explain how Unit and Step do work? I havent seen these properties in the demos.

[Baidaly]

Unit means what unit do you want to use for the Time axis, Step means step division for the Time axis.

Take a look at the following sample, it should help you. Pay attention to StartDate and how it is stored.

<%@ Page Language="C#" %>
 
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
 
<script runat="server">
    public class DataItem
    {
        public DateTime Date
        {
            get;
            set;
        }
 
        public int Visits
        {
            get;
            set;
        }
 
        public int Views
        {
            get;
            set;
        }
 
        public int Users
        {
            get;
            set;
        }
    }
 
    public DataItem LastDataItem
    {
        get
        {
            if ((!this.IsPostBack && !X.IsAjaxRequest))
            {
                this.Session["LiveUpdatesDataItem"] = null;
            }
 
            return this.Session["LiveUpdatesDataItem"] as DataItem;
        }
        set
        {
            this.Session["LiveUpdatesDataItem"] = value;
        }
    }
 
    public DataItem Data
    {
        get
        {
            DataItem dataItem = this.LastDataItem;                                
            Random random = new Random();
            
            DataItem di = new DataItem
            {
                Date = dataItem != null ? dataItem.Date.AddSeconds(5) : this.StartDate,
                Visits = Convert.ToInt32(Math.Min(100, Math.Max(dataItem != null ? (dataItem.Visits + (random.NextDouble() - 0.5) * 20) : random.NextDouble() * 100, 0))),
                Views = Convert.ToInt32(Math.Min(100, Math.Max(dataItem != null ? (dataItem.Views + (random.NextDouble() - 0.5) * 10) : random.NextDouble() * 100, 0))),
                Users = Convert.ToInt32(Math.Min(100, Math.Max(dataItem != null ? (dataItem.Users + (random.NextDouble() - 0.5) * 20) : random.NextDouble() * 100, 0)))
            };
 
            this.LastDataItem = di;
             
            return di;
        }
    }
 
    protected void GetNewData(object sender, DirectEventArgs e)
    {
        DataItem data = this.Data;
        TimeAxis timeAxis = (TimeAxis)Chart1.Axes[1];
 
        if ((this.StartDate).AddMinutes(1) < data.Date)
        {            
            this.Chart1.SetMarkerIndex(1);            
            timeAxis.SetToDate(data.Date);
            timeAxis.SetFromDate(DateUnit.Minute, 1);            
        }
 
        this.Chart1.GetStore().LoadData(new DataItem[] { data }, true);
    }
    
    private DateTime StartDate
    {
        get
        {
            if (!X.IsAjaxRequest && !IsPostBack)
            {
                var d = DateTime.Parse(String.Format("{0:d M yyyy HH:mm}:00", DateTime.Now));
                this.Session["StartDate"] = d;
            }
            
            return (DateTime)this.Session["StartDate"];
        }
    }
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {          
            Store store = this.Chart1.GetStore();
             
            store.DataSource = new List<DataItem>{this.Data};
            store.DataBind();
        }
    }
</script>    
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Live Updated Chart</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
 
        <ext:Panel
            runat="server"
            Title="Live Animated Chart"
            Width="800"
            Height="600"
            Layout="FitLayout">            
            <Items>
                <ext:Chart
                    ID="Chart1"
                    runat="server"
                    StyleSpec="background:#fff;"                                      
                    Animate="true">                    
                    <Store>
                        <ext:Store runat="server">                           
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Date" Type="Date" />
                                        <ext:ModelField Name="Visits" />
                                        <ext:ModelField Name="Views" />
                                        <ext:ModelField Name="Users" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Listeners>
                                <%--remove old (time) data--%>
                                <DataChanged Handler="if(this.getCount() > 10){this.suspendEvents(); this.removeAt(0);this.resumeEvents();}" />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis                            
                            Fields="Views,Visits,Users"
                            Title="Number of Hits"                           
                            Minimum="0"
                            Maximum="100">
                            <GridConfig>
                                <Odd Opacity="1" Fill="#dedede" Stroke="#ddd" StrokeWidth="0.5" />
                            </GridConfig>
                        </ext:NumericAxis>                            
 
                        <ext:TimeAxis
                            Position="Bottom"
                            Fields="Date"
                            Title="Minutes"
                            DateFormat="hh:mm:ss"
                            Constrain="true"
                            StepUnit="Second"
                            Step="5"
                            FromDate="<%# StartDate %>"
                            ToDate="<%# StartDate.AddMinutes(1) %>"
                            Grid="true" 
                            AutoDataBind="true"
                            />
                    </Axes>
                    <Series>
                        <ext:LineSeries Axes="Left,Bottom" XField="Date" YField="Visits">
                            <Label Display="None" Field="Visits" TextAnchor="middle" />
                            <MarkerConfig Size="5" Radius="5" />
                        </ext:LineSeries>
 
                        <ext:LineSeries Axes="Left,Bottom" XField="Date" YField="Views">
                            <Label Display="None" Field="Visits" TextAnchor="middle" />
                            <MarkerConfig Size="5" Radius="5" />
                        </ext:LineSeries>
 
                        <ext:LineSeries Axes="Left,Bottom" XField="Date" YField="Users">
                            <Label Display="None" Field="Visits" TextAnchor="middle" />
                            <MarkerConfig Size="5" Radius="5" />
                        </ext:LineSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
 
        <ext:TaskManager runat="server">
            <Tasks>
                <ext:Task TaskID="DataTask" AutoRun="true" Interval="5000">
                    <DirectEvents>
                        <Update OnEvent="GetNewData" />
                    </DirectEvents>
                </ext:Task>
            </Tasks>
        </ext:TaskManager>
    </form>    
</body>
</html>