Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
Have datetime on scatter series
posted

Hello,

I'm trying to use a scatter serie for a chart that needs to display on X Axes a datetime and for Y a quantity (double)

I've defined my chart as 

<script type="text/javascript">
function createScatterChart(selector, seriesType, dataSource) {
$(selector).igDataChart({
width: "100%",
height: "500px",
title: "Test",
dataSource: dataSource,
axes: [
{
name: "xAxis",
type: "numericX",
label: "Label",
formatLabel: function (val) {
var bVal = new Date(1000 * val);
return bVal;
}
}
],
series: [
{
name: "series1",
title: "Test Series",
type: "scatter",
xAxis: "xAxis",
yAxis: "yAxis",
showTooltip: true,
xMemberPath: "hour",
yMemberPath: "qta"
}
],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});
}


$.ajax({
url: '@Url.Action("LoadChart", "IntraDayChart")',
dataType: "json",
type: "GET",
contentType: 'application/json; charset=utf-8',
success: function (data) {
createScatterChart("#chartScatter", "scatter", data);
},
error: function (xhr) {
alert('error');
}
});
</script>

while the datasource is composed of a list<IntraDayChartItem> where a IntraDayChartItem is

<pre>

public class IntraDayChartItem
{
[Alias("ORA")]
public DateTime hour { get; set; }

[Ignore]
public string HourString => hour.ToString("HH:mm:ss.fff");

[Alias("PREZZO")]
public double? price { get; set; }

[Alias("QTA")]
public double? qta { get; set; }

[Alias("PREZZO_ORDINE")]
public double? priceOrder { get; set; }

[Ignore]
public double? priceOrderPlus => sign == 0 ? priceOrder : null;

[Ignore]
public double? priceOrderLess => sign == 1 ? priceOrder : null;

[Alias("QTA_ORDINE")]
public double? qtaOrder { get; set; }

[Alias("SEGNO")]
public int? sign { get; set; }

[Ignore]
public long HourInt
{
get { return hour.Ticks; }
}
}

How can  I've the X axes containing datetime and possibily auto scaled?

Thanks

Parents
No Data
Reply
  • 16310
    Offline posted

    Hi,

    Generally in order to have the x axis contains real date time object you will need to have your x axis be of type categoryDateTimeX. However the scatter series do not support this type of axis, so you should keep the approach I see in your code, i.e  formatting the label to receive date. More information on configuring the axis and series can be found at http://www.igniteui.com/help/igdatachart-series-requirements

    Please let me know if you have further questions on the matter, I will be glad to help.

Children