For the time being you can choose either approach:
1) Set the min and max dates on the kendo widget:
ASPX:
<script>
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.options.xAxis.min = new Date(2013, 04, 01);
chart._chartObject.options.xAxis.max = new Date(2013, 05, 01);
chart.repaint();
}
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
<PlotArea>
<Series>
<telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
</LabelsAppearance>
<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
</telerik:ScatterLineSeries>
</Series>
<XAxis BaseUnit="Days">
<TitleAppearance Text="Sell Date">
</TitleAppearance>
<LabelsAppearance DataFormatString="d" RotationAngle="45">
</LabelsAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
</XAxis>
<YAxis>
<TitleAppearance Text="Quantity">
</TitleAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
</YAxis>
</PlotArea>
<ChartTitle Text="Sold Cars per Date">
</ChartTitle>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
}
protected DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("SellQuantity", typeof(int));
dt.Columns.Add("SellDate", typeof(DateTime));
dt.Rows.Add(1, 2, new DateTime(2013, 05, 12));
dt.Rows.Add(2, 5, new DateTime(2013, 05, 13));
dt.Rows.Add(3, 6, new DateTime(2013, 05, 17));
dt.Rows.Add(4, 4, new DateTime(2013, 05, 18));
dt.Rows.Add(5, 7, new DateTime(2013, 05, 22));
return dt;
}
2) Set the JavaScript equivalent of min and max dates in the code behind like follows:
C#:
protected void Page_Load(object sender, EventArgs e)
{
//Set min and max date for a datetime x-axis type
RadHtmlChart1.PlotArea.XAxis.MinValue = ConvertToJavaScriptDateTime(new DateTime(2014, 02, 19));
RadHtmlChart1.PlotArea.XAxis.MaxValue = ConvertToJavaScriptDateTime(new DateTime(2014, 04, 05));
//Instantiate ScatterSeriesItem objects
ScatterSeriesItem ssi1 = new ScatterSeriesItem();
ScatterSeriesItem ssi2 = new ScatterSeriesItem();
ScatterSeriesItem ssi3 = new ScatterSeriesItem();
ScatterSeriesItem ssi4 = new ScatterSeriesItem();
//Instantiate DateTime objects
DateTime date1 = (new DateTime(2014, 03, 03, 0, 0, 0));
DateTime date2 = (new DateTime(2014, 03, 10, 0, 0, 0));
DateTime date3 = (new DateTime(2014, 03, 17, 0, 0, 0));
DateTime date4 = (new DateTime(2014, 03, 24, 0, 0, 0));
//Set the converted x values to the ScatterSeriesItem objects
ssi1.X = ConvertToJavaScriptDateTime(date1);
ssi2.X = ConvertToJavaScriptDateTime(date2);
ssi3.X = ConvertToJavaScriptDateTime(date3);
ssi4.X = ConvertToJavaScriptDateTime(date4);
//Set the y values to the ScatterSeriesItem objects
ssi1.Y = 3;
ssi2.Y = 6;
ssi3.Y = 5;
ssi4.Y = 9;
//Add the ScatterSeriesItem objects to the ScatterLineSeries
(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi1);
(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi2);
(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi3);
(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi4);
}
//A method that converts the .NET DateTime object to its JavaScript Date object representation
protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
{
return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
}
ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
<PlotArea>
<Series>
<telerik:ScatterLineSeries Name="Stock A">
<LabelsAppearance>
<ClientTemplate>
#= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #, #=kendo.format(\'{0:C0}\',value.y)#
</ClientTemplate>
</LabelsAppearance>
<TooltipsAppearance Color="White">
<ClientTemplate>
#= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #, #=kendo.format(\'{0:C0}\',value.y)#
</ClientTemplate>
</TooltipsAppearance>
</telerik:ScatterLineSeries>
</Series>
<YAxis>
<LabelsAppearance DataFormatString="C0"></LabelsAppearance>
<TitleAppearance Text="Price"></TitleAppearance>
</YAxis>
<XAxis Type="Date" BaseUnit="Days">
<TitleAppearance Text="Closing Date">
</TitleAppearance>
<LabelsAppearance DataFormatString="d">
</LabelsAppearance>
</XAxis>
</PlotArea>
<ChartTitle Text="Closing Stock Prices">
</ChartTitle>
</telerik:RadHtmlChart>