I'm currently doing a window form that have Pie Chart inside.I need to show the percentage of the pie.
But now I have eencountered a problem : When I add this #PERCENT{P2} to series the Pie Chart will show like this:
But if I remove it, the Pie Chart will show like this
Is there possible to make the Pie Chart Like this?
My Code：
DataTable dt = new DataTable();
dt.Columns.Add("completed", typeof(string));
dt.Columns.Add("no", typeof(int));
int noin = allitem - intime;
dt.Rows.Add("Complete In Time", intime);
dt.Rows.Add("OverDue", noin);
chart1.DataSource = dt;
chart1.DataBind();
Yes, this is easily done by setting the LegendText for each of your DataPoints like this:
foreach (DataPoint dp in yourSeries.Points) dp.LegendText = yourLabel;
If your x-values contain meaningful numbers you can use them:
foreach (DataPoint dp in s.Points) dp.LegendText = dp.XValue + "";
But if you added the x-values as strings they are lost and you have to use another source for the LegendTexts.
If you only have a fixed number of DataPoints you can set the LegendTexts directly:
yourSeries.Points[0].LegendText = "hi";
yourSeries.Points[1].LegendText = "ho";
yourSeries.Points[2].LegendText = "hum";
Note that usually a Legend shows one entry per Series. But for a Pie chart it shows one entry per DataPoint!
Related
I have:
List<string> dates1 = new List<string>();
List<string> values1 = new List<string>();
List<string> dates2 = new List<string>();
List<string> values2 = new List<string>();
That will accept my data ranges from a datasource. Dates1 and Values1 have 128 values in each list.
The dates1 data looks like this {"5/29/2015 11:02",....,"5/30/2015 11:02",....,"5/31/2015 11:02",....,"6/1/2015 11:02",....,"6/2/2015 11:02",....,"6/3/2015 11:02"} with the in between data points being different times within that day for a total 128 values.
The dates2 data looks like this {"5/29/2015 9:05","5/30/2015 9:05","5/31/2015 9:05","6/1/2015 9:05","6/2/2015 9:05","6/3/2015 9:05"} with 7 total values.
The two graphs separately look correct and like this:
The problem is getting both graphs on the same chart correctly.
If I create 2 series on the chart I will get this:
I have seen some advice to use Chart1.AlignDataPointsByAxisLabel(); and this is what I get:
The two graph should be spread out evenly over each other but the x-axis for the 2nd series is being disrupted for some reason. Is this even possible to do? I would greatly appreciate any help you can spare.
Here is the c# code if interested:
List<string> dates = new List<string>();
List<string> values = new List<string>();
List<string> dates2 = new List<string>();
List<string> values2 = new List<string>();
//*****SQL connection and code that populates the Lists is here*****
Chart1.Series.Add(new Series());
Chart1.Series[0].Points.DataBindXY(dates, values);
Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.StepLine;
Chart1.Series[0].Color = Color.Red;
Chart1.Series[0].BorderWidth = 1;
Chart1.Series[0].ToolTip = "#VALY, #VALX";
//BIND THE DATA TO THE CHART
Chart1.Series.Add(new Series());
Chart1.Series[1].Points.DataBindXY(dates2, values2);
Chart1.Series[1].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.StepLine;
Chart1.Series[1].Color = Color.Green;
Chart1.Series[1].BorderWidth = 2;
Chart1.Series[1].ToolTip = "#VALY, #VALX";
//SET THE IMAGE OUTPUT TYPE TO BE JPEG
Chart1.ImageType = System.Web.UI.DataVisualization.Charting.ChartImageType.Jpeg;
//ADD A PLACE HOLDER CHART AREA TO THE CHART
Chart1.ChartAreas.Add(new ChartArea());
Chart1.AlignDataPointsByAxisLabel(); // THIS IS THE COMBINING OF AXES
Chart1.ChartAreas[0].Area3DStyle.Enable3D = false;
Chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.FromArgb(50, 200, 200, 200);
Chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.FromArgb(50, 200, 200, 200);
//ADD A PLACE HOLDER LEGEND TO THE CHART
//SHOW THE LEGEND
Chart1.Legends.Add(new Legend());
Chart1.Legends[0].Enabled = true;
Edit: having dates, in the 2nd dataset, that match up perfectly to dates in the first seems to fix it. The issue is the dates will never match because they are taken at different times and has a time precision. Surely, there is a way to do this that I'm missing.
You can achieve your requirement using Syncfusion chart by setting columnIndex property for each axis. columnIndex is used to split the chart horizontally so that we can place series without overlapping.
Following Screenshots illustrate this
We have prepared a sample based on your requirements. Please find the sample from below link.
Sample Link:
http://jsfiddle.net/jr8x19vz/55/
Syncfusion also offers ASP.NET wrappers powered by Essential Studio for Javascript, providing client-side rendering of HTML 5-Javascript controls. You can get more information about Syncfusion’s ASP.Net suite from the following location,
http://www.syncfusion.com/products/aspnet
You can view the demos from the following link,
http://js.syncfusion.com/demos/web
Also take a look at our community license which provides free access to our entire products,
http://www.syncfusion.com/products/communitylicense
Please let me know, if you have any changes.
Thanks,
Jayavigneshwaran
I finally figure it out. One issue I had was pulling in my date as a string instead of DateTime. I switched to DateTime and it fixed the issue while using a data table and binding with Chart1.DataBindCrossTable.
var dt = new System.Data.DataTable();
dt.Columns.Add("Series", typeof(string));
dt.Columns.Add("Date", typeof(DateTime));
dt.Columns.Add("Value", typeof(string));
//looping through SQL datasource for first series
while(){
dt.Rows.Add("Today", date, value);
}
//looping through SQL datasource for second series
while(){
dt.Rows.Add("Yesterday", date, value);
}
Chart1.Series.Clear();
Chart1.DataBindCrossTable(dt.Rows, "Series", "Date", "Value", "");
I am having problems getting the XAxis to display the correct values in my chart control. Below is how I am generating each series to be displayed. I would like the XAxis to display the DataType value from s.DataType:
foreach (SummaryData s in summaryData)
{
System.Web.UI.DataVisualization.Charting.Series series = new System.Web.UI.DataVisualization.Charting.Series(s.DataType);
series.ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
DataPoint dp = new DataPoint();
dp.Name = s.DataType;
dp.SetValueY(s.Total);
dp.SetCustomProperty("DataType", s.DataType);
series.XValueMember = "DataType";
series.Points.Add(dp);
msBarVertLegRight.Series.Add(series);
}
msBarVertLegRight.DataBind();
The corect value is displayed and the correct name in the Legend, but I'm not exactly sure how to set the XAxis value.
JH
Looks like you're trying to use databinding (which is what the XValueMember is for) and add points one by one. You can do one or the other. You could use databinding like so (approximately):
series.XValueMember = "DataType";
series.YValueMember = "ThePropertyWithY";
series.DataSource = s;
series.DataBind();
or you could set each point individually:
System.Web.UI.DataVisualization.Charting.Series series = new System.Web.UI.DataVisualization.Charting.Series("mySeries");
series.ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
foreach (SummaryData s in summaryData)
{
series.AddXY(s.DataType, s.Total);
}
I'm not sure why you had each SummaryData.DataType being its own series; if that is needed, add that back in, but from the code you posted it didn't seem necessary.
When databinding, any changes to your underlying data (the SummaryData objects) will be reflected in your chart automatically; if you add points individually, you need to handle updates to your chart manually.
I have used .net chart control in a website. When I launch it with big amount of data, the chart does not show all data. If any one can help me find out if there is a way to show all the data I have. And If I can show the legends above the chart. Please reply.
Series series = new Series(name);
series.ChartType = (type == 1) ? SeriesChartType.Column : SeriesChartType.Pie;
foreach (KeyValuePair<string, double> item in xy)
{
series.Points.AddXY(item.Key,item.Value);
}
You should set maximunm and minimum values
Chart1.ChartAreas("ChartArea1").AxisY.Maximum = vMaxY
Chart1.ChartAreas("ChartArea1").AxisY.Minimum = vMaxY
I use excel to paint a pic as follow:
please pay attention to the area hightlight in red
my question is:
how to bind the datatable to legend in mschart?
so , except the legend color, also people can see the detail data from the legend.
or, you guys can tell is it feasible to bind in mschart?
Thanks in advance!
As far as I know there is nothing in the API that allows you to simply "bind" your DataTable to a legend.
But you should still be able to manage something like that with some code:
var l = chart1.Legends[0];
l.LegendStyle = LegendStyle.Table;
l.TableStyle = LegendTableStyle.Tall;
l.BorderColor = Color.OrangeRed;
l.Docking = Docking.Bottom;
l.LegendStyle = LegendStyle.Table;
l.HeaderSeparator = LegendSeparatorStyle.DashLine;
l.HeaderSeparatorColor = Color.Red;
var firstColumn = new LegendCellColumn();
l.ColumnType = LegendCellColumnType.SeriesSymbol;
l.CellColumns.Add(firstColumn);
var secondColumn = new LegendCellColumn();
l.ColumnType = LegendCellColumnType.Text;
secondColumn.Text = "#SER";
l.CellColumns.Add(secondColumn);
foreach (DataRow row in dt.Rows)
{
var column = new LegendCellColumn();
column.ColumnType = LegendCellColumnType.Text;
column.HeaderText = row["x"].ToString();
column.Text = "#VALY";
l.CellColumns.Add(column);
}
However, my suggestion would be to include the data in a separate control, rather than as part of the chart itself. It would be much easier to work with if you kept it in one of the .net controls that's meant for tabular data, whether you're in winforms or webforms.
Short Description
I am using charts for a specific application where i need to change the view angle of the rendered 3D Pie chart and value of automatic labels from pie label names to corresponding pie values.
This how the chart looks:
Initialization
This is how i initialize it:
Dictionary<string, decimal> secondPersonsWithValues = HistoryModel.getSecondPersonWithValues();
decimal[] yValues = new decimal[secondPersonsWithValues.Values.Count]; //VALUES
string[] xValues = new string[secondPersonsWithValues.Keys.Count]; //LABELS
secondPersonsWithValues.Keys.CopyTo(xValues, 0);
secondPersonsWithValues.Values.CopyTo(yValues, 0);
incomeExpenseChart.Series["Default"].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Pie;
incomeExpenseChart.Series["Default"].Points.DataBindXY(xValues, yValues);
incomeExpenseChart.ChartAreas["Default"].Area3DStyle.Enable3D = true;
incomeExpenseChart.Series["Default"].CustomProperties = "PieLabelStyle=Outside";
incomeExpenseChart.Legends["Default"].Enabled = true;
incomeExpenseChart.ChartAreas["Default"].Area3DStyle.LightStyle = System.Windows.Forms.DataVisualization.Charting.LightStyle.Realistic;
incomeExpenseChart.Series["Default"]["PieDrawingStyle"] = "SoftEdge";
Basically i am querying data from database using the HistoryModel.getSecondPersonWithValues(); to get pairs as Dictionary<string, decimal> where key is the person and value is ammount.
Problem #1
What i need is to be able to change the marked labels from person names to the ammounts or add another label of ammounts with the same colors (See Image).
Problem #2
Another problem is that i need to change the view angle of 3D Pie chart. Maybe it's very simple and I just don't know the needed property or maybe i need to override some paint event. Either ways any kind of ways would be appriciated.
Thanks in advance George.
Solution for Problem #1
Adding new Label and filling with custom values helped.
In addition i changed the Series.IsValueShownAsLabel = true;
Solution for Problem #2
I should have set the ChartArea.Area3DStyle.IsClustered = true; and then set the ChartArea.Area3DStyle.Inclination;
Use xlhart.Rotation and xlchart.Elevation.