This is a migrated thread and some comments may be shown as answers.

Telerik Html chart - Column series width is not working.

7 Answers 293 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 11 Jun 2013, 07:15 AM

Column-Width.zip

Hello Mukesh,

It seems like you get the empty spaces between the series items if some of the their values are null. The behavior of the RadHtmlChart in this case is to allocate a space for the item, but as it doesn't have a value, the series item is not displayed. However, the width of every series item is determined by their overall count (if you have 2 series items, each of them will be wider than the case, where there are 20 series items). What you could do in this case in order to increase the width of each series item is to check if its value is null and if this is the case, you should not create such a series item and you should not add it to the series. This way will ensure that you will not get any empty spaces between the series items and their width will be increased..

I have also created a sample page, where I data bind a ColumnChart to a DataTable and use null values for some of the series items, so the low-width behavior is expected in this case. Could you have a look at it and inform me if you need any further clarification?

Regards,
Stamo Gochev
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 24 Jun 2013, 09:27 AM

Hi
i am not having support ticket so i post my problem here,i am new to html 5 chart i have bar chart and values in dataset
my html code is(taken from http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/barchart/defaultvb.aspx)

<telerik:RadHtmlChart runat="server" ID="BarChart" Width="800" Height="500" Transitions="true"
Skin="Forest">
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<ChartTitle Text="Revenue">
<Appearance Align="Center" BackgroundColor="White" Position="Top"></Appearance>
</ChartTitle>
<Legend>
<Appearance BackgroundColor="White" Position="Bottom"></Appearance>
</Legend>
<PlotArea>
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
Reversed="false">

<TitleAppearance Position="Center" RotationAngle="0" Text="Years"></TitleAppearance>
</XAxis>
<Series >
<telerik:BarSeries Name ="xaxis"></telerik:BarSeries>
</Series>
<YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
>

<TitleAppearance Position="Center" RotationAngle="0" Text="Sum"></TitleAppearance>
</YAxis>
<Series>


<telerik:BarSeries Name ="yaxis1">

<SeriesItems >
<telerik:CategorySeriesItem Y ="a" />

</SeriesItems>
</telerik:BarSeries>

<telerik:BarSeries Name ="yaxis2">

<SeriesItems >
<telerik:CategorySeriesItem Y ="a" />

</SeriesItems>
</telerik:BarSeries>

<telerik:BarSeries Name ="yaxis3">

<SeriesItems >
<telerik:CategorySeriesItem Y ="a" />

</SeriesItems>
</telerik:BarSeries>

</Series>
</PlotArea>
</telerik:RadHtmlChart>

and serrver side code is

For Each row As DataRow In dt.Rows
BarChart.PlotArea.XAxis.Items.Add(Convert.ToDateTime(row(0)).ToString("dd MMM"))
BarChart.PlotArea.Series.Item("yaxis1").Items.Add(row(0))
BarChart.PlotArea.Series.Item("yaxis2").Items.Add(row(0))
BarChart.PlotArea.Series.Item("yaxis3").Items.Add(row(0))

next
my need is i need to plot 3 y axis ,x axis correctly plotted but y axis not plotted,pls tell me or give some sample code plotted in server side i mean for dataset.

answered on 26 Jun 2013, 01:51 PM

BarSeries.zip

Hi Aravind,

i have created a sample page, which demonstrates how you can programmatically create three BarSeries and three YAxes. You should be aware that adding more than one YAxis requires associating its name with the AxisName of at least one series (this also applies to the default YAxis). You can also have a look at our help article about Multiple Y-Axes. Could inform me if you could apply the approach in your scenario?

I can also advice you to create a separate forum thread for your next questions as this separation helps other clients who might have the same issues.

Regards,
Stamo Gochev
Telerik

answered on 27 Jun 2013, 01:42 AM

Hi
Sorry for post here,because i am not having support ticket,thank u for ur reply ,but i have values in dataset i need plot barserie from dataset like this .
X Y
10 Apr ,20,32,44
13 Apr, 30,54,12
15 Apr,43,65,33
1 May,22,56,12

in each row i have above values,i mean in data row ("row") below the for each statemen
like this i have in dataset,what need to plot x axis and 3 yaxis
For Each row As DataRow In dt.Rows
HOW TO PLOT X AXIS AND 3 Y AXIS HERE ?............... PLS REPLY ME ASAP
next

Note: in vb coding ,not in c# code
Regards
Aravind

answered on 28 Jun 2013, 04:47 PM

RadHtmlChart-DataTable.zip

Hello Aravind,

Please find attached to this post an example on how to databind barseries to the mentioned data table, so that each barseries plots its values according to particular yaxis scale. You can also find useful HtmlChart - DataSet online demo.

Regards,
Danail Vasilev
Telerik

answered on 12 Jul 2013, 09:22 AM

chart-column-width-problem.jpg

Hi Stamo Gochev,



  In the following scenario, I am facing column width problem.

  I have given code to duplicate the problem what I had faced.

  And attached screen shot also.

  How to fix this? thanks in advance.



Technical details:



Version: Telerik.Web.UI.dll 2013.1.403.40

Operating System: windows xp professional, service pack 3

.Net Framework: 4.0

Visual studio: 2012

Browser: Firefox 22.0




------------------------------------------------------------------------------------------------------------



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestChart.aspx.cs" Inherits="TestApp.WebSite.TestChart" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadHtmlChart ID="MonthlyViewChart" runat="server" Transitions="true">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle>

<Appearance Align="Center" BackgroundColor="White" Position="Top">

<TextStyle FontFamily="segoe ui" FontSize="15px" Bold="true"/>

</Appearance>

</ChartTitle>

<Legend>

<Appearance BackgroundColor="White" Position="Bottom">

</Appearance>

</Legend>

<PlotArea>

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<XAxis AxisCrossingValue="0" Color="#696969" MajorTickType="Outside" MinorTickType="Outside"

Reversed="false" >

<LabelsAppearance RotationAngle="270">

<TextStyle FontFamily="segoe ui" FontSize="12px"/>

</LabelsAppearance>

<MajorGridLines Width="0" Color="#FFFFFF"></MajorGridLines>

<MinorGridLines Width="0" Color="#FFFFFF"></MinorGridLines>

</XAxis>

<YAxis AxisCrossingValue="0" Color="#696969" MajorTickType="Outside"

MaxValue="100" MinorTickType="Outside" MinValue="0" Reversed="false"

Step="25">

<LabelsAppearance DataFormatString="{0}%" RotationAngle="0">

<TextStyle FontFamily="segoe ui" FontSize="12px"/>

</LabelsAppearance>

<MajorGridLines Width="0" Color="#FFFFFF"></MajorGridLines>

<MinorGridLines Width="0" Color="#FFFFFF"></MinorGridLines>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

using System.Data;

using Telerik.Web.UI;

namespace TestApp.WebSite

{

public partial class TestChart : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

DrawChart();

}

private void DrawChart()

{

try

{

DateTime endDate = DateTime.Now;

DateTime startDate = endDate.AddDays(-30);

MonthlyViewChart.ChartTitle.Text = string.Format("Monthly Sales Report - {0} to {1}", startDate.ToShortDateString(), endDate.ToShortDateString());

Dictionary<int, Color> seriesItemColor = new Dictionary<int

, Color> { { 0, Color.FromArgb(0, 103, 56) }, { 1, Color.FromArgb(39, 170, 226) }, { 2, Color.FromArgb(191, 30, 46) }, { 3, Color.FromArgb(43, 182, 115) }, { 4, Color.FromArgb(142, 198, 63) }, { 5, Color.FromArgb(242, 90, 41) }, { 6, Color.FromArgb(43, 57, 145) }, { 7, Color.FromArgb(146, 39, 143) }, { 8, Color.FromArgb(238, 43, 122) }, { 9, Color.FromArgb(248, 237, 51) }, { 10, Color.FromArgb(0, 167, 157) }, { 11, Color.FromArgb(102, 46, 145) }, { 12, Color.FromArgb(252, 176, 64) }, { 13, Color.FromArgb(214, 223, 34) }, { 14, Color.FromArgb(158, 31, 100) }, { 15, Color.FromArgb(139, 119, 101) }, { 16, Color.FromArgb(99, 184, 255) }, { 17, Color.FromArgb(139, 87, 66) }, { 18, Color.FromArgb(139, 139, 0) }, { 19, Color.FromArgb(240, 128, 128) } };

MonthlyViewChart.PlotArea.Series.Clear();

MonthlyViewChart.PlotArea.XAxis.Items.Clear();

List<Department> departmentReports = new Department().MonthlySales();

//Create a DataTable with two columns

DataTable tbl = new DataTable();

tbl.Columns.Add(new DataColumn("DepartmentName"));

int j = 0;

Enumerable.Range(0, departmentReports.Count).ToList().ForEach(x =>

{

tbl.Rows.Add();

tbl.Rows[j]["DepartmentName"] = departmentReports[j].DepartmentName;

j++;

});

MonthlyViewChart.PlotArea.XAxis.DataLabelsField = "DepartmentName";

int i = 0;

foreach (var report in departmentReports)

{

ColumnSeries series = new ColumnSeries();

series.Name = report.DepartmentName;

series.Appearance.FillStyle.BackgroundColor = seriesItemColor.Where(x => x.Key == i).FirstOrDefault().Value;

series.TooltipsAppearance.BackgroundColor = Color.White;

series.LabelsAppearance.Visible = false;

//Create columns used for DataFieldY and ClientTemplate properties

string currDSColumn = "DataSourceColumn" + i;

string tooltipColumn = "ToolTipColumn" + i;

tbl.Columns.Add(new DataColumn(currDSColumn));

tbl.Columns.Add(new DataColumn(tooltipColumn));

series.DataFieldY = currDSColumn;

series.TooltipsAppearance.ClientTemplate = "#=dataItem." + tooltipColumn + "#";

MonthlyViewChart.PlotArea.Series.Add(series);

//Fill values for Series YValues and ToolTips

tbl.Rows[i][currDSColumn] = report.SalesPercentage;

tbl.Rows[i][tooltipColumn] = string.Format(" Number of Employees: {0} <br /> Possible Sales: {1} <br /> Actual Sales: {2} ", report.NumberOfEmployees, report.NumberOfGoods, report.Sold);

i++;

}

MonthlyViewChart.DataSource = tbl;

MonthlyViewChart.DataBind();

}

catch (Exception ex)

{

Response.Write(ex.Message);

}

public class Department

{

public int SalesPercentage { get; set; }

public int Sold { get; set; }

public string DepartmentName { get; set; }

public int NumberOfGoods { get; set; }

public int NumberOfEmployees { get; set; }

public Department()

{

}

public List<Department> MonthlySales()

{

List<Department> list = new List<Department>();

list.Add(new Department { DepartmentName = "Department 1", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 2", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 3", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 4", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 5", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 6", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 7", NumberOfEmployees = 1, NumberOfGoods = 90, SalesPercentage = 22, Sold = 20 });

list.Add(new Department { DepartmentName = "Department 8", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 9", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 10", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 11", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 12", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 13", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 14", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

list.Add(new Department { DepartmentName = "Department 15", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });

return list.OrderBy(x => x.DepartmentName).ToList();

}

answered on 16 Jul 2013, 08:42 AM

Chart-Column-Width.zip

Hello Mukesh,

Thank you for providing a runnable sample page - it really helped me investigate your issue. As I mentioned earlier, setting a value of 0 (zero) for a series' item will allocate space in the RadHtmlChart's PlotArea, but it will look like the item is not displayed (you could try changing the value of SalesPercentage to anything which is not equal to zero) in order to display it). What you could do in this situation is to check if the data bound value that you use (SalesPercentage ) is equal to zero and if this is the case you don't need to add such a series item in the RadHtmlChart. This could be done very easily like this:

foreach (var report in departmentReports)

{

if (report.SalesPercentage != 0)

{

//Your ColumnSeries creation

...

Of course, you could apply the following approach for the XAxis' Items - you can create only the axis' items whose corresponding department has SalesPercentage not equal to zero.

I also attach the modified version of your sample page with the if statement above and the change to SalesPercentage for two more items. You can have a look at it and inform me if you need further clarification.

Regards,
Stamo Gochev
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Telerik Html chart - Column series width is not working.

7 Answers, 1 is accepted