I have a chart in ASP.NET (.NET 3.5) that contains 3 series. The date is filled dynamic in code. How can I set a label to each X-entry from code? (Label1, Label2, Label3, etc)
Maybe you mean this
in aspx
<asp:Chart ID="Chart1" runat="server" Height="400px" Width="500px">
<Series>
<asp:Series Name="Series1" ChartType="Column" ChartArea="ChartArea1" />
<asp:Series Name="Series2" ChartType="Column" ChartArea="ChartArea1" />
<asp:Series Name="Series3" ChartType="Column" ChartArea="ChartArea1" />
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" />
</ChartAreas>
</asp:Chart>
Binding data
protected void Page_Load(object sender, EventArgs e)
{
// Initialize arrays for series 1
double[] yval1 = { 2, 6, 5 };
string[] xval1 = { "Peter", "Andrew", "Julie" };
// Initialize arrays for series 2
double[] yval2 = { 4, 5, 3 };
string[] xval2 = { "Peter", "Andrew", "Julie" };
// Initialize arrays for series 3
double[] yval3 = { 6, 5,7 };
string[] xval3 = { "Peter", "Andrew", "Julie" };
// Bind the arrays to each data series
Chart1.Series["Series1"].Points.DataBindXY(xval1, yval1);
Chart1.Series["Series2"].Points.DataBindXY(xval2, yval2);
Chart1.Series["Series3"].Points.DataBindXY(xval3, yval3);
// Align series using their X axis labels
Chart1.AlignDataPointsByAxisLabel();
}
Related
I have a pie chart that takes values from a datatable.
This is my code:
ASP.NET Code:
<asp:Chart ID="Chart1" runat="server" EnableViewState="True">
<Series>
<asp:Series ChartType="Pie" Legend="% Completed" Name="Series1" XAxisType="Secondary" XValueType="Double" YValueType="Double">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea BorderWidth="5" Name="ChartArea1">
<Area3DStyle Enable3D="True" WallWidth="15" />
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="% Completed" Title="% Completed">
</asp:Legend>
</Legends>
<Titles>
<asp:Title Name="Completed" Text="Completed">
</asp:Title>
<asp:Title Name="Title1">
</asp:Title>
</Titles>
</asp:Chart>
VB.NET Code:
Sets Session Variables for GetTable()
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load, Chart1.Load
Dim ProjectID As Integer = Session("project_id")
Session("ProjectID") = ProjectID
lblProjNameHeading.Text = "[ " + ProjectID.ToString + " ]"
Dim conn As New SqlConnection("Data Source=BRIAN-PC\SQLEXPRESS;Initial Catalog=master_db;Integrated Security=True")
Dim projComm As String = "SELECT project_id, project_start, project_finish, project_budget, project_cost FROM projects WHERE project_id=#parameter"
Dim projSQL As New SqlCommand
conn.Open()
projSQL = New SqlCommand(projComm, conn)
projSQL.Parameters.AddWithValue("#parameter", ProjectID.ToString)
Dim datareader As SqlDataReader = projSQL.ExecuteReader()
While datareader.Read
lblProjectCode.Text = datareader("project_id").ToString
lblProjectStart.Text = datareader("project_start").ToString
lblProjectStart2.Text = datareader("project_start").ToString
lblProjectEnd.Text = datareader("project_finish").ToString
lblProjectEnd2.Text = datareader("project_finish").ToString
lblProjectBudget.Text = datareader("project_budget").ToString
lblProjectBudget2.Text = datareader("project_budget").ToString
lblProjectCost.Text = datareader("project_cost").ToString
lblProjectCost2.Text = datareader("project_cost").ToString
' lblProjectLeader.Text = datareader("project_cost").ToString
'lblProjectExpenditures.Text = agdgssag
Dim StartDate As DateTime = datareader("project_start")
Dim FinishDate As DateTime = datareader("project_finish")
Dim today As DateTime = DateTime.Now
Dim sumDays = (FinishDate - StartDate).TotalDays
Dim daysToNow = (today - StartDate).TotalDays
Dim percentage = daysToNow / sumDays * 100
Dim percentageLeft = 100 - percentage
Session("PercentageCompleted") = percentage
Session("PercentageLeft") = percentageLeft
GetTable()
lblProjectPercentage.Text = percentage.ToString("N2") + "%"
End While
datareader.Close()
conn.Close()
If Not Page.IsPostBack Then
BindData()
End If
End Sub
The Problem is that when I run the code, the pie chart is not displayed.
Can someone tell me what's wrong?
I think the issue is you haven't set the XvalueMember and YvalueMember for the chart.
<Series>
<asp:Series ChartType="Pie" Legend="% Completed" Name="Series1" XAxisType="Secondary" XValueType="Double" YValueType="Double" XValueMember="yourXValue" YValueMember="YourYvalue">
</asp:Series>
</Series>
Check out the below example.
http://itzonesl.blogspot.com/search/label/Charts
I am trying to use a pie chart and I expect 2 regions get displayed on it. But for my following code, only the last one is shown.
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("status");
dt.Columns.Add("count");
DataRow dr = dt.NewRow();
dr["status"] = "safe";
dr["count"] = loadChart("safe");
dt.Rows.Add(dr);
dr["status"] = "unsafe";
dr["count"] = loadChart("unsafe");
dr = dt.NewRow();
dt.Rows.Add(dr);
Chart1.DataSource = dt;
Chart1.Series[0].XValueMember = "status";
Chart1.Series[0].YValueMembers = "count";
Chart1.DataBind();
}
Mark up:
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Pie" Name="Series1">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>
output:
I want to see the safe portion also. I have value for it.how to resolve this issue ?
You are setting values in the same row twice:
DataRow dr = dt.NewRow();
dr["status"] = "safe";
dr["count"] = loadChart("safe");
dt.Rows.Add(dr);
//still in the same row
dr["status"] = "unsafe";
dr["count"] = loadChart("unsafe");
dr = dt.NewRow();
dt.Rows.Add(dr);
you should create new row and then set second values:
DataRow dr = dt.NewRow();
dr["status"] = "safe";
dr["count"] = loadChart("safe");
dt.Rows.Add(dr);
//new row creation
dr = dt.NewRow();
dr["status"] = "unsafe";
dr["count"] = loadChart("unsafe");
dt.Rows.Add(dr);
Is it possible to show multiple columns and headers inside of a combo box/dropdown list in asp.net and show related columns values, for an example, if I click on a country name then it should show me all the cities for that country and clicking on city name should show me all the related places.
Is there any third part control available? I have checked telerik and they have combo box with multiple columns but not with related values.
I hope this will help you to get started.
<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
<ItemTemplate>
<table width="100%">
<tr>
<td>
<%# Eval("Name") %>
</td>
<td>
<%# Eval("Population")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox2" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged">
<ItemTemplate>
<table width="100%">
<tr>
<td>
<%# Eval("Name") %>
</td>
<td>
<%# Eval("Population")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox3" runat="server">
<ItemTemplate>
<table width="100%">
<tr>
<td>
<%# Eval("Name") %>
</td>
<td>
<%# Eval("Population")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
public int Population { get; set; }
}
public class State
{
public int Id { get; set; }
public int CountryId { get; set; }
public string Name { get; set; }
public int Population { get; set; }
}
public class City
{
public int Id { get; set; }
public int StateId { get; set; }
public string Name { get; set; }
public int Population { get; set; }
}
public List<Country> Countries
{
get
{
return new List<Country>
{
new Country {Id = 1, Name = "United States", Population = 1000},
new Country {Id = 2, Name = "Canada", Population = 2000},
new Country {Id = 3, Name = "Mexico", Population = 3000}
};
}
}
public List<State> States
{
get
{
return new List<State>
{
new State {Id = 1, CountryId = 1, Name = "California", Population = 100},
new State {Id = 2, CountryId = 1, Name = "New York", Population = 200},
new State {Id = 3, CountryId = 2, Name = "Quebec", Population = 300},
new State {Id = 4, CountryId = 2, Name = "Ontario", Population = 400}
};
}
}
public List<City> Cities
{
get
{
return new List<City>
{
new City {Id = 1, StateId = 1, Name = "Los Angeles", Population = 10},
new City {Id = 2, StateId = 1, Name = "San Diego", Population = 20},
new City {Id = 3, StateId = 1, Name = "San Francisco", Population = 30},
new City {Id = 4, StateId = 1, Name = "San Joe", Population = 40},
new City {Id = 5, StateId = 2, Name = "New York", Population = 50},
new City {Id = 6, StateId = 2, Name = "Paterson", Population = 60},
new City {Id = 7, StateId = 2, Name = "Newark", Population = 70},
new City {Id = 8, StateId = 2, Name = "Smithtown", Population = 80},
};
}
}
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
RadComboBox1.DataSource = Countries;
RadComboBox1.DataValueField = "Id";
RadComboBox1.DataTextField = "Name";
RadComboBox1.DataBind();
RadComboBox1.Items.Insert(0, new RadComboBoxItem("Select Country", ""));
}
}
protected void RadComboBox1_SelectedIndexChanged(
object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
RadComboBox2.Items.Clear();
RadComboBox3.Items.Clear();
int countryId;
if (Int32.TryParse(e.Value, out countryId))
{
RadComboBox2.DataSource = States.Where(s => s.CountryId == countryId);
RadComboBox2.DataValueField = "Id";
RadComboBox2.DataTextField = "Name";
RadComboBox2.DataBind();
RadComboBox2.Items.Insert(0, new RadComboBoxItem("Select State", ""));
}
}
protected void RadComboBox2_SelectedIndexChanged(
object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
RadComboBox3.Items.Clear();
int stateId;
if (Int32.TryParse(e.Value, out stateId))
{
RadComboBox3.DataSource = Cities.Where(c => c.StateId == stateId);
RadComboBox3.DataValueField = "Id";
RadComboBox3.DataTextField = "Name";
RadComboBox3.DataBind();
RadComboBox3.Items.Insert(0, new RadComboBoxItem("Select City", ""));
}
}
I don't know about 'related' values, per sé; however you may need to develop that on your own.
Besides Telerik, if you don't mind using jQuery, here are a couple of plugins you can use for free to achieve the multi-column/header aspect:
mcDropdown jQuery Plug-in v1.3.1
Jquery Multi Column Selectbox
There are a few others you can take a peak at using this google search.
Helpful reference: jQuery
I want to change color of each row in a listview based on a data which is stored in database.
I've written following code but I don't know by the help of which object I can access to markup property of listview :
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if(e.Item.ItemType == ListViewItemType.DataItem)
{
ListViewDataItem dataitem = (ListViewDataItem)e.Item;
int policyid = (int)DataBinder.Eval(dataitem.DataItem, "policyID");
if(policyid == 3)
//what should I write here to change the corresponding row's color?
}
}
regards.
Hey Austin Powers here is the code
ASPX CODE :
<asp:ListView ID="ListView1" runat="server"
onitemdatabound="ListView1_ItemDataBound">
<LayoutTemplate>
<table id="itemPlaceholderContainer" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>
EmpID
</th>
<th>
EmpName
</th>
<th>
Department
</th>
<th>
Age
</th>
<th>
Address
</th>
</tr>
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="MainTableRow" runat="server">
<td id="EmpID" runat="server">
<asp:Label ID="EmpIDLabel" runat="server" Text='<%# Eval("EmpID") %>' />
</td>
<td id="EmpNameTD" runat="server">
<asp:Label ID="EmpNameLabel" runat="server" Text='<%# Eval("EmpName") %>' />
</td>
<td id="DepartmentTD" runat="server">
<asp:Label ID="DepartmentLabel" runat="server" Text='<%# Eval("Department") %>' />
</td>
<td id="AgeTD" runat="server">
<asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />
</td>
<td id="AddressTD" runat="server">
<asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
AND HERE IS THE CODEBEHIND CODE
protected void Page_Load(object sender, EventArgs e)
{
var Employee = new { EmpID = 1, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" };
var customerList = (new[] { Employee }).ToList();
customerList.Add(new { EmpID = 2, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 3, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 4, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 5, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 6, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 7, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 8, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 9, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
customerList.Add(new { EmpID = 10, EmpName = "Rahul Jain", Department = "IT", Age = 33, Address = "Hello" });
ListView1.DataSource = customerList;
ListView1.DataBind();
}
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
ListViewDataItem dataitem = (ListViewDataItem)e.Item;
int policyid = (int)DataBinder.Eval(dataitem.DataItem, "EmpID");
if (policyid == 3)
{
HtmlTableRow cell = (HtmlTableRow)e.Item.FindControl("MainTableRow");
cell.BgColor = "Red";
}
}
}
tHANKS
I am creating a 3d chart using Microsoft Chart controls. Here is the image:
(source: highoncoding.com)
I want to show the point on the top of each bar graph. Like for Exam 1 on top of bar chart it should show 2 (as in 2 points) etc.
Here is the code:
private void BindData() {
var exams = new List<Exam>()
{
new Exam() { Name = "Exam 1", Point = 10 },
new Exam() { Name = "Exam 2", Point = 12 },
new Exam() { Name = "Exam 3", Point = 15 },
new Exam() { Name = "Exam 4", Point = 2 }
};
var series = ExamsChart.Series["ExamSeries"];
series.YValueMembers = "Point";
series.XValueMember = "Name";
//series.MarkerStyle = System.Web.UI.DataVisualization.Charting.MarkerStyle.Circle;
//series.MarkerSize = 20;
//series.LegendText = "hellow";
//series.Label = "something";
var chartAreas = ExamsChart.ChartAreas["ChartArea1"];
ExamsChart.DataSource = exams;
ExamsChart.DataBind();
}
and here is the html code:
<asp:Chart ID="ExamsChart" Width="600" Height="320" runat="server">
<Titles>
<asp:Title Text="Exam Report" />
</Titles>
<Series>
<asp:Series Name="ExamSeries" ChartType="Column">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="true" WallWidth="10" />
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
UPDATE:
Here is the answer:
foreach (var exam in exams) {
var point = new DataPoint();
point.SetValueXY(exam.Name, exam.Point);
point.Label = exam.Name;
series.Points.Add(point);
}
Directly from the MS chart samples:
// Show data points values as labels
chart1.Series["Series1"].IsValueShownAsLabel = true;
// Set data point label
chart1.Series["Series1"].Points[2].Label = "My Point Label\nLabel Line #2";