Completed
Last Updated: 24 Aug 2016 12:46 by ADMIN
ADMIN
Danail Vasilev
Created on: 02 Dec 2014 12:33
Category: HtmlChart
Type: Feature Request
3
Improve MinDateValue and MaxDateValue properties in RadHtmlChart to take effect for numeric series
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>
0 comments