Line chart is displaying as in attached file chart 1. I need to updated the code to display as in attached file chart 2. Also find code from.aspx and .cs files.
aspx file:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:radscriptmanager ID="QsfScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
</Scripts>
</telerik:radscriptmanager>
<telerik:radhtmlchart runat="server" ID="RadHtmlChart1" Width="800px" Height="400px">
<PlotArea>
<XAxis DataLabelsField="Measured_depth" MajorTickType="None">
<MinorGridLines Visible="false" />
<MajorGridLines Visible="false" />
</XAxis>
<YAxis MajorTickType="None">
<MinorGridLines Visible="false" />
</YAxis>
</PlotArea>
</telerik:radhtmlchart>
<telerik:radajaxloadingpanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
</telerik:radajaxloadingpanel>
<telerik:radajaxmanager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:radajaxmanager>
</div>
<div>
<asp:button ID="Button1" runat="server" text="Submit" OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>
cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using Telerik.Web.UI.HtmlChart;
using Telerik.Web.UI.HtmlChart.Enums;
using System.Data.SqlClient;
using System.Data;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
try
{
DataTable dt = new DataTable();
DataColumn dcMeasuredDepth = new DataColumn("Measured_depth", typeof(System.Decimal));
DataColumn dcTrueVerticalDepth = new DataColumn("True_Vertical_Depth", typeof(System.Decimal));
dt.Columns.Add(dcMeasuredDepth);
dt.Columns.Add(dcTrueVerticalDepth);
DataRow dr = dt.NewRow();
dr[0] = 0.00;
dr[1] = 0.00;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 858.60;
dr[1] = 858.60;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 1740.40;
dr[1] = 1740.35;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 1882.60;
dr[1] = 1882.54;
dt.Rows.Add(dr);
RadHtmlChart1.DataSource = dt;
LineSeries ls = new LineSeries();
ls.DataFieldY = "True_Vertical_Depth";
RadHtmlChart1.PlotArea.Series.Add(ls);
RadHtmlChart1.DataBind();
}
catch (Exception ex)
{
}
finally
{
}
}
}
1 Answer, 1 is accepted
This is available as of R1 2019 that came out yesterday, under the Justified property of the x-axis. You can see it in action in the following demo: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/linechart/defaultcs.aspx.
On a side note, since you seem to be feeding the chart numerical data only, you mayu want to use a ScatterLineSeries instead. It will not use categories on the x-axis like the LineSeries and you cna control at what value the axis starts through its MinValue property: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/scatterlinechart/defaultcs.aspx.
Regards,
Marin Bratanov
Progress Telerik