Jump to content
Software FX Community

X Axis Dates

User (Legacy)

By User (Legacy)
in Web Forms

Recommended Posts

User (Legacy) Newbie

User (Legacy)

Posted
Posted 

I know that you have had many questions on this and appologize for asking

again but I have not found the answers to my questions amoung the other post

or in the support docs.

The Y Axis seems pretty straight forward and I think I can dynamically scale

it depending on Min and Max of the values I return.

The X Axis is not as straight forward.

I need to plot data that is begin created on a 15 second frequency from

process control data.  I would like to dynamically scale the X Axis

depending on the number of days requested.  I would like to label the X Axis

with the date in the format "MM/DD/YYYY" or similar staggered.  I need to

indicate the time between these dates appropriately.

I am evaluating GigaSoft's graphing tool and it auto scales the X Axis very

nicely.  However, I do not like their implementation.  It makes building

graphs dynamically based on user selection very bulky.  Yours is much

better.

You can see by my included code that I have tried a lot of different

scenarios but have not hit on the right combination.  I was able to get

Hours to display 0 - 24 at one point and that is where the AxisX Min, Max,

Step, etc. was used.

Here is some example data returned from SQL Server in a DataSet.  The

Value_Date field is a TimeStamp SQL Server datatype converted to a DateTime

datatype during the Select.

Value_Date                           Value

2004-04-29 00:00:06.730     72.985474

2004-04-29 00:00:21.733     72.985474

2004-04-29 00:00:36.733     72.986038

2004-04-29 00:00:51.737     73.121170

2004-04-29 00:01:06.737     73.785461

2004-04-29 00:01:21.737     73.385918

2004-04-29 00:01:36.740     73.386490

2004-04-29 00:01:51.740     72.985474

2004-04-29 00:02:06.743     73.119141

2004-04-29 00:02:21.743     73.116547

2004-04-29 00:02:36.747     73.387939

2004-04-29 00:02:51.747     73.116547

Here is my code:

Private Sub btnRefresh_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles btnRefresh.Click

Try

If tbBeginDate.Text.Length = 0 Then

Dim oJava As New JAVA.Script

MasterPage.StartupScript = oJava.SetFocus("tbBeginDate")

Throw New Exception("Begin Date Required")

End If

If tbEndDate.Text.Length = 0 Then

Dim oJava As New JAVA.Script

MasterPage.StartupScript = oJava.SetFocus("tbEndDate")

Throw New Exception("End Date Required")

End If

If tbBeginDate.Text > tbEndDate.Text Then

Dim oJava As New JAVA.Script

MasterPage.StartupScript = oJava.SetFocus("tbBeginDate")

Throw New Exception("Begin Date must be earlier than End Date.")

End If

Cache.Remove("chart1")

Dim oDataGraph As New

ProcessData(ConfigurationSettings.AppSettings("HydraDataSource"))

Dim sbTitle As New System.Text.StringBuilder

Dim GraphFontSmall As New System.Drawing.Font("Arial", 8,

System.Drawing.FontStyle.Bold)

Dim GraphFontLarge As New System.Drawing.Font("Arial", 14,

System.Drawing.FontStyle.Bold)

Dim Title As Internet.Server.TitleDockable

Title = Chart1.Titles(0)

'Need to create the title dynamically

sbTitle.Append(ddlPoint.SelectedItem.Text)

sbTitle.Append(": ")

sbTitle.Append(tbBeginDate.Text)

sbTitle.Append(" to ")

sbTitle.Append(tbEndDate.Text)

Title.Text = sbTitle.ToString

Title.Font = GraphFontLarge

Chart1.ContextMenus = True

Chart1.Gallery = SoftwareFX.ChartFX.Gallery.Lines

'Colors

Title.TextColor = Color.Red

Chart1.BorderColor = Color.Black

Chart1.BackColor = Color.Black

Chart1.InsideColor = Color.Black

Chart1.PageColor = Color.Red

Chart1.AxisX.Grid.Color = Color.Black

Chart1.AxisX.TextColor = Color.Red

Chart1.AxisY.TextColor = Color.Red

Chart1.Series(1).Color = Color.Red

Chart1.AxisX.LabelsFormat.Format = AxisFormat.DateTime

Chart1.AxisX.LabelsFormat.CustomFormat = "mm/dd/yyyy"

Chart1.AxisX.Staggered = True

Chart1.AxisX.Visible = True

Chart1.AxisX.Min = 0

Chart1.AxisX.Max = 24

Chart1.AxisX.Step = 240

Chart1.AxisX.MinorStep = 60

'(4 values a minute. 1 Every 15 sec * 60 minute in an Hour)

'Will probably need to adjust this by multiplying by the number of days

selected. Days

'will be a minor label. MinorStep is the 60 minute in an hour so shows a

mark every 15 mintues

Chart1.AxisX.MinorTickMark = SoftwareFX.ChartFX.TickMark.Cross

'Chart1.AxisX.Gridlines = True

'Chart1.AxisX.Grid.Style = System.Drawing.Drawing2D.DashStyle.Dot

Chart1.AxisX.Title.Font = GraphFontSmall

'Chart1.AxisX.Style = Chart1.AxisX.Style And Not AxisStyle.AutoFirstLabel

'Chart1.AxisY.Interlaced = True

Chart1.AxisY.LabelsFormat.Format = AxisFormat.Number

Chart1.AxisY.Min = 72 'Will need to determine and set based on Max and Min

of dataset retrieved.

Chart1.AxisY.Max = 78.5 'Will need to determine and set based on Max and Min

of dataset retrieved.

Chart1.AxisY.Step = 1 '? Not sure where to set this. Probably based on some

calculation

'based on range of difference between Max and Min of values. Difference now

is 5.5. Don't know where

'I would need to set the Step if it was 10, 20, 50? Have to come up with

some kind of calculation.

Chart1.AxisY.Title.Alignment = StringAlignment.Center

Chart1.AxisY.Title.Text = "Value"

Chart1.AxisY.Title.Font = GraphFontSmall

Chart1.AxisY.Font = GraphFontSmall

Chart1.AxisY.ForceZero = False

Chart1.DataSourceSettings.DataType(0) = DataType.Label

Chart1.DataSourceSettings.DataType(0) = DataType.Value

Chart1.DataSourceSettings.DataType(1) = DataType.Value

Chart1.DataEditorObj.Visible = False

Chart1.Series(1).LineStyle = Drawing2D.DashStyle.Solid

Chart1.Series(1).LineWidth = 0.5

Chart1.Series(1).YAxis = YAxis.Main

Chart1.DataSource = oDataGraph.GetRawData(ddlPoint.SelectedItem.Text,

tbBeginDate.Text, tbEndDate.Text).Tables(0)

Chart1.DataBind()

'Need to implement the auto refresh feature. Have a toggle button to turn

feature on and off.

'Also, dress the chart up as much as possible. Implement MouseOver Data

Label.

Chart1.Visible = True

Cache.Insert("chart1", Chart1)

Catch ex As Exception

lblStatus.Text = ex.Message

End Try

End Sub
Link to comment
Share on other sites
Software FX Newbie

Software FX

Posted
Posted 

If you pass X-Values to the Chart the X-Axis will behave the same way as the 

Y-Axis if the chart supports X-Values (Lines, Area, Scatter).

A few things about you code:

1) The most important mistake is this:

Chart1.DataSourceSettings.DataType(0) = DataType.Label

By this line you are telling Chart FX to "Forget about these dates", you are 

converting them to strings and therefore the underlying value is lost. You 

don't want to do that, you want to leave this column as X-Values so that 

they can be treated as dates. Simply eliminate the DataType lines, the 

defaults will do what you want.

1) All dates passed to Chart FX are in OLE Date format, this format 

represents a date as a floating point number. The integral part represents 

the date and the decimal part represents the time.

The following line, is incorrect:

Chart1.AxisX.Min = 0

Chart1.AxisX.Max = 24

You want to set the Min and Max to an actual Date, like 2004-04-29 

00:00:06.730, I suggest you leave Min and Max untouched and let Chart FX 

calculate them.If you want to pass a Min and Max use DateTime.ToOADate() 

method.

Chart1.AxisX.Step = 240

Chart1.AxisX.MinorStep = 60

This is also incorrect, you are saying that you want the Step to be 240 

days. Again I suggest you leave the step untouched and let Chart FX 

calculate it for you.

2) Since you want to display only dates (no time). The line:

Chart1.AxisX.LabelsFormat.Format = AxisFormat.DateTime

Should read:

Chart1.AxisX.LabelsFormat.Format = AxisFormat.Date

In conclusion, you are just doing too much. Maybe because you are used to 

GigaSoft. The chart you want can be achieved with practically no code in 

Chart FX, simply pass the data, set the gallery type and Chart FX will 

figure out much of the rest.

-- 

FP

Software FX
Link to comment
Share on other sites
User (Legacy) Newbie

User (Legacy)

Posted
  • Author
Posted 

I am sorry but I think my previous question was not very well stated.

I have modified the code as attached.  I want to use the

Chart1.AxisX.Min

Chart1.AxisX.Max

Chart1.AxisX.Step

Chart1.AxisX.MinorStep

settings because I want to scale the axis to the time.  I do want to show

the time.  However, I want to show the date in format 'MM/DD/YYYY'

seperately.  In other words, I want to show the time as the main lable and

have accomplished this but I also want to indicate when the date changes.

Something like this:

1, 2, 3, 4, 5, ...... 24, 1, 2, 3, 4, 5, ......

9/19/2004...........9/20/2004

etc.  If  I show the date and time the axis labelling becomes to busy.  I

realized that the

Chart1.DataSourceSettings.DataType(0) = DataType.Label

setting was overriding the DataType.Value setting for the XAxis and simply

created another column for the Label as you will see in my code.  How can I

include the date when it changes?

Thanks and sorry for the earlier confusion.  I hope this makes more sense.

Jay Barbee

Here is the data:

Value_Date_1                        Value_Date_2

Value

2004-04-29 00:00:06.730      2004-04-29 00:00:21.730       72.985474

2004-04-29 00:00:06.733     2004-04-29 00:00:06.733        72.985474

Here is the code:

Private Sub btnRefresh_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles btnRefresh.Click

        Try

            If tbBeginDate.Text.Length = 0 Then

                Dim oJava As New JAVA.Script

                MasterPage.StartupScript = oJava.SetFocus("tbBeginDate")

                Throw New Exception("Begin Date Required")

            End If

            If tbEndDate.Text.Length = 0 Then

                Dim oJava As New JAVA.Script

                MasterPage.StartupScript = oJava.SetFocus("tbEndDate")

                Throw New Exception("End Date Required")

            End If

            If tbBeginDate.Text > tbEndDate.Text Then

                Dim oJava As New JAVA.Script

                MasterPage.StartupScript = oJava.SetFocus("tbBeginDate")

                Throw New Exception("Begin Date must be earlier than End

Date.")

            End If

            Cache.Remove("chart1")

            Dim oDataGraph As New

ProcessData(ConfigurationSettings.AppSettings("HydraDataSource"))

            Dim sbTitle As New System.Text.StringBuilder

            Dim GraphFontSmall As New System.Drawing.Font("Arial", 8,

System.Drawing.FontStyle.Bold)

            Dim GraphFontLarge As New System.Drawing.Font("Arial", 14,

System.Drawing.FontStyle.Bold)

            Dim Title As Internet.Server.TitleDockable

            'Calculate the diffence between the dates entered.

            Dim dteDiff As Long = 0

            dteDiff = DateDiff(DateInterval.Day, CDate(tbBeginDate.Text),

CDate(tbEndDate.Text))

            Title = Chart1.Titles(0)

            'Need to create the title dynamically

            sbTitle.Append(ddlPoint.SelectedItem.Text)

            sbTitle.Append(": ")

            sbTitle.Append(tbBeginDate.Text)

            sbTitle.Append(" to ")

            sbTitle.Append(tbEndDate.Text)

            Title.Text = sbTitle.ToString

            Title.Font = GraphFontLarge

            Chart1.ContextMenus = True

            Chart1.Gallery = SoftwareFX.ChartFX.Gallery.Lines

            'Colors

            Title.TextColor = Color.Red

            Chart1.BorderColor = Color.Black

            Chart1.BackColor = Color.Black

            Chart1.InsideColor = Color.Black

            Chart1.PageColor = Color.Red

            Chart1.AxisX.Grid.Color = Color.Black

            Chart1.AxisX.TextColor = Color.Red

            Chart1.AxisY.TextColor = Color.Red

            Chart1.Series(1).Color = Color.Red

            Chart1.AxisX.LabelsFormat.Format = AxisFormat.DateTime

            Chart1.AxisX.LabelsFormat.CustomFormat = "HH:mm"

            'Chart1.AxisX.LabelsFormat.CustomFormat = "yyyy-mm-dd hh:mm:ss"

            Chart1.AxisX.Staggered = True

            Chart1.AxisX.Visible = True

            Chart1.AxisX.Min = 0 * dteDiff

            Chart1.AxisX.Max = 24 * dteDiff

            Chart1.AxisX.Step = 240 * dteDiff

            Chart1.AxisX.MinorStep = 60 * dteDiff

            'Max - 24 hours in a day.

            'Step - (4 values a minute - 1 Every 15 sec.  4 * 60 in an hour.

4*60 = 240)

            'MinorStep is the 60 minute in an hour so shows a mark every 15

mintues

            Chart1.AxisX.MinorTickMark = SoftwareFX.ChartFX.TickMark.Cross

            'Chart1.AxisX.Gridlines = True

            'Chart1.AxisX.Grid.Style =

System.Drawing.Drawing2D.DashStyle.Dot

            Chart1.AxisX.Title.Font = GraphFontSmall

            'Chart1.AxisX.Style = Chart1.AxisX.Style And Not

AxisStyle.AutoFirstLabel

            'Chart1.AxisY.Interlaced = True

            Chart1.AxisY.LabelsFormat.Format = AxisFormat.Number

            Chart1.AxisY.Min =

oDataGraph.MinValue(ddlPoint.SelectedItem.Text, tbBeginDate.Text,

tbEndDate.Text)

            Chart1.AxisY.Max =

oDataGraph.MaxValue(ddlPoint.SelectedItem.Text, tbBeginDate.Text,

tbEndDate.Text)

            Chart1.AxisY.Step = Math.Round(((Chart1.AxisY.Max -

Chart1.AxisY.Min) * 0.1))

            Chart1.AxisY.Title.Alignment = StringAlignment.Center

            Chart1.AxisY.Title.Text = "Value"

            Chart1.AxisY.Title.Font = GraphFontSmall

            Chart1.AxisY.Font = GraphFontSmall

            Chart1.AxisY.ForceZero = False

            Chart1.DataSourceSettings.DataType(0) = DataType.Label

            Chart1.DataSourceSettings.DataType(1) = DataType.Value

            Chart1.DataSourceSettings.DataType(2) = DataType.Value

            Chart1.DataEditorObj.Visible = False

            Chart1.Series(1).LineStyle = Drawing2D.DashStyle.Solid

            Chart1.Series(1).LineWidth = 0.5

            Chart1.Series(1).YAxis = YAxis.Main

            Chart1.DataSource =

oDataGraph.GetRawData(ddlPoint.SelectedItem.Text, tbBeginDate.Text,

tbEndDate.Text).Tables(0)

            Chart1.DataBind()

            'Need to implement the auto refresh feature.  Have a toggle

button to turn feature on and off.

            'Also, dress the chart up as much as possible.  Implement

MouseOver Data Label.

            Chart1.Visible = True

            Cache.Insert("chart1", Chart1)

        Catch ex As Exception

            lblStatus.Text = ex.Message

        End Try

    End Sub

"SoftwareFX Support" <noreply@softwarefx.com> wrote in message

news:ARPphUynEHA.416@webserver3.softwarefx.com...

> If you pass X-Values to the Chart the X-Axis will behave the same way as

the

> Y-Axis if the chart supports X-Values (Lines, Area, Scatter).

>

> A few things about you code:

>

> 1) The most important mistake is this:

>

> Chart1.DataSourceSettings.DataType(0) = DataType.Label

>

> By this line you are telling Chart FX to "Forget about these dates", you

are

> converting them to strings and therefore the underlying value is lost. You

> don't want to do that, you want to leave this column as X-Values so that

> they can be treated as dates. Simply eliminate the DataType lines, the

> defaults will do what you want.

>

> 1) All dates passed to Chart FX are in OLE Date format, this format

> represents a date as a floating point number. The integral part represents

> the date and the decimal part represents the time.

>

> The following line, is incorrect:

>

> Chart1.AxisX.Min = 0

> Chart1.AxisX.Max = 24

>

> You want to set the Min and Max to an actual Date, like 2004-04-29

> 00:00:06.730, I suggest you leave Min and Max untouched and let Chart FX

> calculate them.If you want to pass a Min and Max use DateTime.ToOADate()

> method.

>

> Chart1.AxisX.Step = 240

>

> Chart1.AxisX.MinorStep = 60

>

> This is also incorrect, you are saying that you want the Step to be 240

> days. Again I suggest you leave the step untouched and let Chart FX

> calculate it for you.

>

> 2) Since you want to display only dates (no time). The line:

>

> Chart1.AxisX.LabelsFormat.Format = AxisFormat.DateTime

>

> Should read:

>

> Chart1.AxisX.LabelsFormat.Format = AxisFormat.Date

>

> In conclusion, you are just doing too much. Maybe because you are used to

> GigaSoft. The chart you want can be achieved with practically no code in

> Chart FX, simply pass the data, set the gallery type and Chart FX will

> figure out much of the rest.

>

>

> -- 

> FP

> Software FX

>

>
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...