Accessing DateTime XValue on Mouse Events of PlotArea Using Javascript

In this topic, we will explain how to access XValue of type DateTime on Mouse events of PlotArea from Javascript.

 

Below is the code for creating a Chart.

 

<div id="VisifireChart">

 

<script language="javascript" type="text/javascript">

    var chartXmlString = ''

+ '<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme1">'

 

+ '<vc:Chart.Titles>'

+ '<vc:Title Text="Visifire Chart" />'

+ '</vc:Chart.Titles>'

 

+ '<vc:Chart.Series>'

+ '<vc:DataSeries RenderAs="Column">'

+ '<vc:DataSeries.DataPoints>'

+ '<vc:DataPoint XValue="1/1/2009" YValue="592796" />'

+ '<vc:DataPoint XValue="2/1/2009" YValue="250473" />'

+ '<vc:DataPoint XValue="3/1/2009" YValue="40304" />'

+ '<vc:DataPoint XValue="4/1/2009" YValue="22254" />'

+ '<vc:DataPoint XValue="5/1/2009" YValue="10993" />'

+ '</vc:DataSeries.DataPoints>'

+ '</vc:DataSeries>'

+ '</vc:Chart.Series>'

+ '</vc:Chart>';

 

    var vChart = new Visifire('SL.Visifire.Charts.xap', "MyChart", 500, 300);

    vChart.setDataXml(chartXmlString);

 

    /* First Chart Reference. If there are multiple charts in a XAML file,

       array of chart references will be available as an event argument,

       e.g. args[0], args[1], args[2] etc. */      

    vChart.loaded = function(args)

    {

        var chart = args[0];

    };

 

    vChart.render("VisifireChart");

 

</script>

</div>

 

Here we are using loaded event because default chart references (PlotArea in this case) will be available only after the chart is loaded.

 

Now inside the loaded event handler, attach MouseLeftButtonUp event to PlotArea. Function attached to PlotArea event will give XValue as an event argument.

 

chart.PlotArea.MouseLeftButtonUp = function(sender, eventArgs)

{

    alert(eventArgs.XValue);

};

 

 If you try to access this XValue, it will return DateTime value in a different format as shown below:

 

 

So in order to format it, you can write code as shown below:

 

chart.PlotArea.MouseLeftButtonUp = function(sender, eventArgs)

{

    var dateTime = new Date(eventArgs.XValue);

    var localDateTime = dateTime.toLocaleDateString();

    alert(localDateTime);

};

 

This will return you a proper DateTime value as shown below: