DateTime Axis with Visifire

Chirag

Current release includes a major feature – DateTime Axis. If the XValue of the DataPoints are of type DateTime, Visifire automatically switches XAxis to Date Axis. For more precision on the visualization following properties can be used.

Two properties have been introduced:

  1. XValueType in DataSeries, and
  2. IntervalType in AxisX.

XValueType can have any of these following values

  • Auto (Default)
  • Numeric
  • Date
  • DateTime, or
  • Time

IntervalType property can have any of these following values

  • (Default) Auto
  • Number
  • Years
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
  • Seconds, or
  • Milliseconds

By default the XValueType is set to Date, if XValue is of type DateTime. To consider both date & time in the axis, XValueType should be set to DateTime. If you want to consider only the Time part of DateTime, it can be done so by setting XValueType to Time.

IntervalType will be set to the most relevant one internally, according to XValues. However, it can be set manually according to the requirement.

Below are some samples for DateTime Axis.

DateTime Axis Example:

<vc:Chart Name="MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
          Width="500" Height="300" ScrollingEnabled="False">

    <vc:Chart.Titles>
        <vc:Title Text="DateTime Axis"/>
    </vc:Chart.Titles>

    <vc:Chart.AxesX>
        <vc:Axis IntervalType="Days">
        </vc:Axis>
    </vc:Chart.AxesX>

    <vc:Chart.Series>
        <vc:DataSeries RenderAs="Column" XValueType="DateTime">
            <vc:DataSeries.DataPoints>
                <vc:DataPoint XValue="1/30/2000 12:00:12" YValue="20"/>
                <vc:DataPoint XValue="2/15/2000 10:12:4" YValue="10"/>
                <vc:DataPoint XValue="3/02/2000 23:00:6" YValue="30"/>
                <vc:DataPoint XValue="2/03/2000 18:45:10" YValue="40"/>
                <vc:DataPoint XValue="2/02/2000 12:00:00" YValue="15"/>
                <vc:DataPoint XValue="2/28/2000 12:22:00" YValue="28"/>
            </vc:DataSeries.DataPoints>
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

Click to see DateTimeAxis in action

Date Axis Example:

<vc:Chart Name="MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" ScrollingEnabled="False">

    <vc:Chart.Titles>
        <vc:Title Text="Date Axis"/>
    </vc:Chart.Titles>

    <vc:Chart.AxesX>
        <vc:Axis IntervalType="Months" Interval="1">
        </vc:Axis>
    </vc:Chart.AxesX>

    <vc:Chart.Series>
        <vc:DataSeries RenderAs="Column" XValueType="Date">
            <vc:DataSeries.DataPoints>
                <vc:DataPoint XValue="1/5/2000 12:00:12" YValue="20"/>
                <vc:DataPoint XValue="2/8/2000 10:12:4" YValue="10"/>
                <vc:DataPoint XValue="3/2/2000 23:00:6" YValue="30"/>
                <vc:DataPoint XValue="2/3/2000 18:45:10" YValue="40"/>
                <vc:DataPoint XValue="4/2/2000 12:00:00" YValue="15"/>
                <vc:DataPoint XValue="5/6/2000 12:22:00" YValue="28"/>
            </vc:DataSeries.DataPoints>
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

Click to see DateAxis in action

Time Axis Example:

<vc:Chart Name="MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" ScrollingEnabled="False">

     <vc:Chart.Titles>
         <vc:Title Text="Time Axis"/>
     </vc:Chart.Titles>

     <vc:Chart.AxesX>
         <vc:Axis IntervalType="Seconds">
         </vc:Axis>
     </vc:Chart.AxesX>

     <vc:Chart.Series>
         <vc:DataSeries RenderAs="Column" XValueType="Time">
             <vc:DataSeries.DataPoints>
                 <vc:DataPoint XValue="1/30/2000 1:00:12" YValue="20"/>
                 <vc:DataPoint XValue="2/15/2000 2:2:4" YValue="10"/>
                 <vc:DataPoint XValue="3/02/2000 2:12:6" YValue="30"/>
                 <vc:DataPoint XValue="2/03/2000 2:28:10" YValue="40"/>
                 <vc:DataPoint XValue="8/02/2000 3:12:6" YValue="30"/>
                 <vc:DataPoint XValue="2/04/2000 8:12:10" YValue="40"/>
             </vc:DataSeries.DataPoints>
         </vc:DataSeries>
     </vc:Chart.Series>
 </vc:Chart>

Click to see TimeAxis in action

Cheers,

Team Visfire


Comments

  1. March 20th, 2009 | 1:00 pm

    May I suggest also including support for TimeSpan axes, so e.g. I can have axes labels ranging from 0:00 through 48:00? As I understand it, the above would only let me have 0:00 through 23:00, then another 0:00 up through 23:00, then a final 0:00 (since all of those would be the actual time components of a date).

  2. vivek
    March 23rd, 2009 | 12:43 am

    Hi Domenic,

    Please create a forum topic with the issue. We will make sure that your query will not go unaddressed.

  3. alex1
    April 15th, 2009 | 5:57 pm

    Is this feature in the Visifire v2.1.0 ?

  4. alex1
    April 15th, 2009 | 6:52 pm

    apparently not, i’ve already downloaded the latest version of visifire and test it.. it’s working fine now.
    I have a doubt now, can i change the orientation of the axis X labels text?, when i resize my browser the datetime values can’t read properly because they are overlapped.

  5. April 16th, 2009 | 5:57 am

    Hi Alex,

    You can refer to our documentation for details.
    http://www.visifire.com/visifire_charts_documentation.php

    Please post your queries on forum so that others can also get benefited out of it.

    Regards,
    Sunil Urs

  6. bdemijolla
    May 7th, 2009 | 5:13 am

    Hi all,
    I have a problem to use this option on the Secondary axis X. Indeed, only numerics values appear : no time values

    regards,
    bdemijolla

  7. Chirag
    May 7th, 2009 | 5:46 am

    @bdemijolla,

    At present only Primary Axis supports DateTime. Support for DateTime in secondary axes is in our wishlist.

    Regards,
    Chirag

  8. vkapoor
    May 12th, 2009 | 4:11 pm

    Can i use the datetime axis to plot chart only between a certain time range within the day for multiple days. E.g. plot datapoints for a week (5 days) for time span between 9:00 and 16:00 everyday

  9. vivek
    May 13th, 2009 | 1:49 am

    Hi vKapoor,

    Currently its not possible to plot chart as you required. In order to do this you have to use AxisXLabel property in DataPoint instead of XValue as DateTime.

  10. vkapoor
    May 13th, 2009 | 10:05 am

    Can you provide a sample / example which demonstrates that.

  11. vivek
    May 13th, 2009 | 12:21 pm

    Hi vKapoor,

    Please post your queries in Forums so that it will be helpful for others.

  12. Paul
    July 23rd, 2009 | 9:35 am

    Absolutely loving it!

  13. Tinu
    May 24th, 2010 | 9:31 am

    Hi,

    How can I set the value for the Axis Title. I tried doing it as per your documentation given –

    But this gives me a squiggly saying that AxesX is not part of the namespace.

    Any inputs on this would be very helpful.

    -Thanks,
    Tinu

  14. vivek
    May 25th, 2010 | 11:35 am

    Hi Tinu,

    If you are working in XAML, you have to set Title in Axis as shown below:

    If you are working with managed code then follow the code below:

    Chart chart = new Chart();

    Axis axis = new Axis();
    axis.Title = “AxisY”;
    chart.AxesX.Add(axis);

    Regards,
    Vivek

  15. June 15th, 2010 | 1:22 am

    I have 2.1.0.0 version of visifire is there IntervalType property available ? Or I need to get latest version of the visifire ? Please reply me as soon as possible

  16. vivek
    June 21st, 2010 | 5:57 am

    Hi Asim,

    IntervalType property is supported from 2.2.0 onwards. I suggest you to download the latest version of Visifire and check.

Leave a reply