Hi , help to change the RadChart To RadHtmlChart for line chart series , below is the existing code used RadChart . i need to update to RadHtmlChart
hartAnalysis_BLL objBLL = new ChartAnalysis_BLL();
DataTable dt = objBLL.GetMonthlySSMTotalQuantityImported(arrParameters);
// Create new chart
RadChart2.ChartTitle.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font(RadChart2.ChartTitle.TextBlock.Appearance.TextProperties.Font.FontFamily, 11, System.Drawing.FontStyle.Bold);
RadChart2.ChartTitle.TextBlock.Text = "Extended Monthly SSM Total Quantity Imported \n(" + ssm[0] + ")";
RadChart2.Width = AppConstants.CONST_CHART_WIDTH;
RadChart2.ChartTitle.Visible = true;
RadChart2.Chart.DefaultType = ChartSeriesType.Line;
RadChart2.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(10);
RadChart2.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Percentage(15);
RadChart2.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(30);
RadChart2.DataManager.ValuesXColumn = "Date";
RadChart2.DataManager.ValuesYColumns = new string[1] { "SSM Quantity" };
RadChart2.IntelligentLabelsEnabled = true;
RadChart2.DataSource = dt;
RadChart2.DataBind();
RadChart2.Skin = AppConstants.CONST_TELERIK_CHARTSKIN;
RadChart2.PlotArea.XAxis.Clear();
RadChart2.PlotArea.XAxis.IsZeroBased = false;
RadChart2.PlotArea.XAxis.AutoScale = false;
RadChart2.PlotArea.XAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate;
RadChart2.PlotArea.XAxis.Appearance.CustomFormat = "MMM yy";
RadChart2.PlotArea.XAxis.AxisLabel.Visible = true;
RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Month \n(" + AppFunctions.GetDisclaimer() + ")";
RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black;
RadChart2.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = -45;
RadChart2.PlotArea.YAxis.AxisLabel.Visible = true;
RadChart2.PlotArea.YAxis.AxisLabel.TextBlock.Text = "Total Quantity of SSM Imported (" + dt.Rows[0]["UOM"] + ")";
RadChart2.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black;
RadChart2.Series.GetSeries(0).Appearance.PointMark.Dimensions.Width = 1;
RadChart2.Series.GetSeries(0).Appearance.PointMark.Dimensions.Height = 1;
RadChart2.Series.GetSeries(0).Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
RadChart2.Series.GetSeries(0).Appearance.PointMark.FillStyle.FillType = FillType.Solid;
RadChart2.Series.GetSeries(0).Appearance.PointMark.Visible = true;
RadChart2.Series.GetSeries(0).Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Orange;
RadChart2.Series.GetSeries(0).Appearance.LineSeriesAppearance.Width = 3;
int intYear = dt_SelDateFrom.Year;
int intMonth = dt_SelDateFrom.Month;
DateTime start = new DateTime(intYear, intMonth, 1);
TimeSpan ts = dt_SelDateTo - dt_SelDateFrom;
int intMthDiff = Convert.ToInt32(Math.Ceiling((ts.TotalDays / 30)));
for (int i = 0; i < intMthDiff; i++)
{
ChartAxisItem item = new ChartAxisItem();
item.Value = (decimal)start.AddMonths(i).ToOADate();
RadChart2.PlotArea.XAxis.AddItem(item);
}
DataTable dt_avg = objBLL.GetSSMTotalImportedLastYearAverage(arrParameters);
// Define chart series
ChartSeries avg_series = new ChartSeries();
avg_series.Appearance.LabelAppearance.Visible = false;
avg_series.Name = "Last Year Average";
avg_series.Type = ChartSeriesType.Line;
avg_series.Appearance.PointMark.Dimensions.Width = 1;
avg_series.Appearance.PointMark.Dimensions.Height = 1;
avg_series.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
avg_series.Appearance.PointMark.FillStyle.FillType = FillType.Solid;
avg_series.Appearance.PointMark.Visible = true;
avg_series.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Red;
foreach (DataRow row in dt_avg.Rows)
{
foreach (DataColumn col in dt_avg.Columns)
{
Decimal dec_data = Convert.ToDecimal(row[col]);
Double dbl_data = Convert.ToInt32(dec_data);
avg_series.AddItem(dbl_data);
}
}
RadChart2.AddChartSeries(avg_series);
ArrayList arrParameterBaseline = new ArrayList();
arrParameterBaseline.Add(dt_SelBaselineFrom);
arrParameterBaseline.Add(dt_SelBaselineTo);
arrParameterBaseline.Add(dt_SelSSMSeqID);
SqlDataReader dr_baseline = objBLL.GetSSMTotalImportedBaseline(arrParameterBaseline);
ChartSeries baseline_series = new ChartSeries();
baseline_series.Appearance.LabelAppearance.Visible = false;
baseline_series.Name = "Baseline Average";
baseline_series.Type = ChartSeriesType.Line;
baseline_series.Appearance.PointMark.Dimensions.Width = 1;
baseline_series.Appearance.PointMark.Dimensions.Height = 1;
baseline_series.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
baseline_series.Appearance.PointMark.FillStyle.FillType = FillType.Solid;
baseline_series.Appearance.PointMark.Visible = true;
baseline_series.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Chartreuse;
Double dbl_baseline = 0;
if (dr_baseline == null)
{
dbl_baseline = 0;
}
else
{
try
{
while (dr_baseline.Read())
{
if (dr_baseline["TotalImportedBaseline"] == DBNull.Value)
dbl_baseline = 0;
else
{
Decimal dec_baseline = dr_baseline.GetDecimal(dr_baseline.GetOrdinal("TotalImportedBaseline"));
dbl_baseline = Convert.ToDouble(dec_baseline);
}
}
}
catch (Exception ex)
{
AppFunctions.SetMessageError(this.Page, AppConstants.CONST_ERROR_LOAD_CHART);
AppFunctions.ErrorLog(ex);
}
finally
{
if (dr_baseline != null)
{
dr_baseline.Close();
dr_baseline.Dispose();
}
}
}
for (int i = 0; i < intMthDiff; i++)
{
baseline_series.AddItem(dbl_baseline);
}
RadChart2.AddChartSeries(baseline_series);
Panel1.Controls.Add(RadChart2);
}
catch (Exception ex)
{
AppFunctions.SetMessageError(this.Page, AppConstants.CONST_ERROR_LOAD_CHART);
AppFunctions.ErrorLog(ex);
}
Currently, the HighlightAppearance of the Series does not have a property that controls the InactiveOpacity:
As a temporary workaround, this can be set through the options in the OnKendoWidgetInitializing event:
<script>
function OnKendoWidgetInitializing(sender, args) {
var series = args.series[0]
series.highlight = series.highlight || {};
series.highlight.inactiveOpacity = 0.2
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart5" runat="server" BorderColor="Fuchsia" BorderStyle="Solid" BorderWidth="1px">
<ClientEvents OnKendoWidgetInitializing="OnKendoWidgetInitializing" />
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="90">
<%-- This is how it should be configured after the feature request --%>
<%--<HighlightAppearance InactiveOpacity="0.2" />--%>
<SeriesItems>
<telerik:PieSeriesItem Name="Slice1" Y="60"></telerik:PieSeriesItem>
<telerik:PieSeriesItem Name="Slice2" Y="40"></telerik:PieSeriesItem>
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
I have an htmlchart using a scatter series and a radgrid, on the grid row hover event I call the below javascript function to show the relevant tooltip for the plotted point matching the id of the grid row.
function showToolTip(eventArgs, chart, plotXvalue, plotYvalue) {
This all works well, however I would like to also highlight the plotted point that the tooltip relates to, the same effect as the mouse over on the point within the chart.
We want the Kendo chart widget (RadHtmlChart actually) to blend in with the webpage we use it in. In this page, we use font-weight 300. Since there is no way to specify the font-weight in the chart, we have had to use a hack to specify it:
function chartLoad(chart, args) {
chart.get_kendoWidget().setOptions({ title: { font: "20px sans-serif; font-weight: 300" }});
}
This is not only a clumpsy hack, but it also make use of a custom skin impossible (for setting the font).
Hello,
I would like to highlight a GridLine based on a Labelled item when I have implemented skip in the HTML Chart.
Essentially, I have a series of days and would like to step the labels on a weekly basis. At each step I would like to highlight the GridLine associated with the label.
Label position dynamic. I'm currently using "InsideBase", but if those values are so small it's not very visible, so i'd like place those on the outside end.
Please refer to the ticket for more details.
My objective is to compare product revenue over time. This I would like to achieve using data binding. I do not have information of product names or have the product names as columns. My data table structure is having three columns: Date Product Name Revenue This I should simply be able to achieve using data binding to a table with above three columns. In result I expect each of the Product Names to appear as independent series with revenues plotted on different dates. A similar graph is displayed in the Line Chart documentation for RadHtmlChart. https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/chart-types/line-chart
Update data values using drag and drop directly from the chart, something like this: https://forio.com/app/powersim/powerwall/energy_consumption_details.html A lot of customers would have this functionality without changing the HTMLChart controls.
I get a lot of work creating BI/KPI UIs which are basically converting what you can do in Excel Charts into a Web UI. Which means anything they can do in Excel they expect the web to do. Since there is a drive to automate as much mundane human activity in the business and reduce human error (cut and paste error). I need to reproduce a graph with 'standard' Tend Lines. That is not my interpretation of a trend, but standard best practice. I want this as a checkbox, and attribute to a series for the DataFieldY value. Initially a code solution would be fine (once its got the data from the data source). http://www.telerik.com/blogs/how-to-plot-a-simple-linear-regression-in-telerik-asp.net-web-form-chart
It would be helpful to have a way to set the major tick step value via the RadHtmlChart control. This can be set on the client side, but it seems like a missing feature since I can change the major tick size and label step values via the control axis attributes. Here's an example with my suggested attribute shown in comments on the xAxis below. <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="RequestDays"> <ClientEvents OnLoad="OnLoad" /> <PlotArea> <Series> <telerik:AreaSeries Name="Last Year" DataFieldY="Last"></telerik:AreaSeries> <telerik:AreaSeries Name="Current Year" DataFieldY="Current"></telerik:AreaSeries> </Series> <XAxis Name="Days" DataLabelsField="Days" MajorTickSize="5"> <%--MajorTickStep="7"--%> <LabelsAppearance Step="14" /> </XAxis> </PlotArea> </telerik:RadHtmlChart> <script type="text/javascript"> function OnLoad(chart) { var widget = chart.get_kendoWidget(); widget.options.categoryAxis.majorTicks = { step: 7 }; widget.redraw(); } </script>
I need to bind RadhtmlChart from code behind using sql store procedure. e.g I'm having one table in which first column is containing Month Year data and others column are auto generated as per store data for specific type. I want to bind RadhtmlChart with this datasource. with specific color for series. P.S table screen shot... column number can be increases of decreases as per data...
Currently, the RadHtmlChart control allows you to create a spline series to display. But sometimes, we need the curve to follow more of a Bezier path because the points in the series aren't necessarily the local min/max for the neighborhood around them. This would function much like the smooth line that appears in Excel's scatter chart type or the ChartFX control's curve gallery type.
I would like to request a new feature in legend of RadHtmlChart that provide a tool-tip for long names because when I add a long text in legends the size of pie-chart is reduced. Sample code for what I expect to be working : <telerik:RadHtmlChart runat="server" ID="Chart" Height="400px" Width="400px"> <ClientEvents OnLoad="onChartLoad" /> function onChartLoad() { var chart = $find("Chart"); var widget = chart.get_kendoWidget(); widget.options.legend.tooltip = "#: dataItem.columnname #" //Feature Request in this line widget.redraw(); }