I am using asp.net chart control to display chart on my website , below is the snippet of it:
The issue is i want to add the text and an arrow line on each point , so for instance on the point (60,october) I want to write text at this point: projection was highest and an arrow image.
Is it possible to acheive something like this, any suggestion or assistance will be highly appreciated, below is the code i have used to generate this chart:
double[] yValues = { 15, 60, 12, 13 };
string[] xValues = { "September", "October", "November", "December" };
chart.Width = 500;
chart.Height = 200;
chart.BorderSkin.SkinStyle = BorderSkinStyle.FrameThin1;
ChartArea ca = new ChartArea();
ca.Name = "Default";
ca.AxisX.LineColor = System.Drawing.ColorTranslator.FromHtml("#FEFEFE");
ca.AxisX.LineWidth = 3;
ca.AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Dash;
ca.AxisX.MajorGrid.Enabled = false;
ca.AxisX.MajorTickMark.LineWidth = 2;
ca.AxisX.LabelStyle.Format = "L";
ca.AxisY.LineColor = System.Drawing.ColorTranslator.FromHtml("#FEFEFE");
ca.AxisY.LineWidth = 3;
ca.AxisY.MajorGrid.Enabled = true;
ca.AxisY.MajorTickMark.LineWidth = 2;
ca.AxisY.Title = "yaxis";
chart.ChartAreas.Add(ca);
Legend legend = new Legend();
chart.Legends.Add(legend);
Series series = new Series("Series1");
series.IsValueShownAsLabel = false;
series.MarkerStyle = MarkerStyle.Circle;
series.BorderWidth = 5;
series.ChartType = SeriesChartType.Line;
series.ShadowOffset = 2;
series.XValueType = ChartValueType.String;
series.YValueType = ChartValueType.Double;
series.Font = new System.Drawing.Font("Trebuchet MS", 8);
series.BorderColor = System.Drawing.ColorTranslator.FromHtml("#33CCFF");
series.Color = System.Drawing.ColorTranslator.FromHtml("#33CCFF");
chart.Series.Add(series);
chart.Series["Series1"].Points.DataBindXY(xValues, yValues);
chart.DataManipulator.InsertEmptyPoints(1, System.Web.UI.DataVisualization.Charting.IntervalType.Days, "Series1");
You need to search for the largest data point and use property
datapoint.Label = "projection was highest";
Also easiest way to highlight the point is to use datapoint.MarkerStyle property. You can draw an arrow but I dont think its worth the hassle.
Related
I am quite new to ASP.NET Charting and have a question about adding custom component to a bar chart. I am trying to create a custom legend in a tabular format. What I mean is my legend style is table. And I am creating each LegendItem from database values and adding it to chart.Legends[0].CustomItems collection.
I get the data but I am getting all the LegendItems in one row. I want to display each LegendItem on new row. My current code look like this -
chart.Legends.Add(new Legend
{
LegendStyle = LegendStyle.Table,
BorderColor = Color.Black,
BorderWidth = 1,
BorderDashStyle = ChartDashStyle.Solid,
Alignment = StringAlignment.Center,
DockedToChartArea = areaCounter.ToString(),
Docking = Docking.Bottom,
Name = "CustomLegend",
IsTextAutoFit = true,
InterlacedRows = true,
TableStyle = LegendTableStyle.Auto,
IsDockedInsideChartArea = false
});
LegendItem newItem = new LegendItem();
newItem.Cells.Add(LegendCellType.Text, " - value1 - ", ContentAlignment.MiddleCenter);
newItem.Cells.Add(LegendCellType.Text, " - State Average = - ", ContentAlignment.MiddleCenter);
newItem.Cells[1].CellSpan = 2;
newItem.BorderColor = Color.Black;
newItem.Cells.Add(LegendCellType.Text, " - ", ContentAlignment.MiddleCenter);
newItem.Cells.Add(LegendCellType.Text, " - top - ", ContentAlignment.MiddleCenter);
chart.Legends[1].CustomItems.Add(newItem);
LegendItem newItem1 = new LegendItem();
newItem1.Cells.Add(LegendCellType.Text, "value1", ContentAlignment.MiddleCenter);
newItem1.Cells.Add(LegendCellType.Text, "State Average =", ContentAlignment.MiddleCenter);
newItem1.Cells[1].CellSpan = 2;
newItem1.BorderColor = Color.Black;
newItem1.Cells.Add(LegendCellType.Text, "", ContentAlignment.MiddleCenter);
newItem1.Cells.Add(LegendCellType.Text, "top", ContentAlignment.MiddleCenter);
chart.Legends[1].CustomItems.Add(newItem1);
newItem and newItem1 both appear on same row as legend. Can you please help me solve this issue ? I'd really appreciate your help.
Found out that once I add HeaderSeparator to my custom Legend object and handle the chat object's CustomizeLegend event it worked as I wanted. The custom items are displayed on separate rows. Here are the changes that I did.
chart.Legends.Add(new Legend
{
LegendStyle = LegendStyle.Table,
BorderColor = Color.Black,
BorderWidth = 1,
BorderDashStyle = ChartDashStyle.Solid,
Alignment = StringAlignment.Center,
DockedToChartArea = areaCounter.ToString(),
Docking = Docking.Bottom,
Name = "CustomLegend",
IsTextAutoFit = true,
InterlacedRows = true,
TableStyle = LegendTableStyle.Tall,
HeaderSeparator = LegendSeparatorStyle.Line,
HeaderSeparatorColor = Color.Gray,
IsDockedInsideChartArea = false
});
LegendItem newItem3 = new LegendItem();
var strVal = item.Value;
foreach (var val in strVal)
{
newItem3.Cells.Add(LegendCellType.Text, val, ContentAlignment.BottomCenter);
}
chart.Legends["CustomLegend"].CustomItems.Add(newItem3);
chart.CustomizeLegend += chart_CustomizeLegend;
void chart_CustomizeLegend(object sender, CustomizeLegendEventArgs e)
{
Chart chart = sender as Chart;
if (chart == null) return;
foreach (var item in e.LegendItems)
{
item.SeparatorType = LegendSeparatorStyle.Line;
item.SeparatorColor = Color.Black;
}
}
Hello guys I have a problem with core plot in xamarin. I managed to create a graph like below:
click here for the graph
I'm using this code:
/// <summary>
/// Configure the Axes of the graph
/// </summary>
void SetupAxes()
{
var plotspace = _graph.DefaultPlotSpace;
plotspace.AllowsUserInteraction = true;
var axisSet = (CPTXYAxisSet)_graph.AxisSet;
// Label x with a fixed interval policy
var x = axisSet.XAxis;
x.LabelingPolicy = CPTAxisLabelingPolicy.None;
x.Title = "X Axis";
x.TitleOffset = 0;
x.MinorTickLength = 5f;
x.MajorTickLength = 7f;
x.LabelOffset = 3;
x.MajorIntervalLength = 5;
x.MinorTicksPerInterval = 4;
// Label y with an automatic label policy.
var y = axisSet.YAxis;
y.LabelingPolicy = CPTAxisLabelingPolicy.None;
y.LabelOffset = 0;
y.Title = "Y Axis";
y.TitleOffset = 0;
y.MinorTickLength = 5f;
y.MajorTickLength = 7f;
y.LabelOffset = 3;
y.MajorIntervalLength = 5;
y.MinorTicksPerInterval = 4;
}
/// <summary>
/// Set up data source and configure plots
/// </summary>
void SetupBarPlots(List<float> inputSocket)
{
var barPlot = new CPTBarPlot
{
DataSource = new BarSourceData(inputSocket),
BaseValue = 0,
BarOffset = (NSDecimal)(-0.25),
Identifier = (NSString)"Bar Plot 1"
};
_graph.AddPlot(barPlot);
barPlot.Fill = new CPTFill(CPTColor.BrownColor);
_graph.AddPlot(barPlot, _graph.DefaultPlotSpace);
var space = _graph.DefaultPlotSpace as CPTXYPlotSpace;
space.ScaleToFitPlots(new CPTPlot[] { barPlot });
//get the highest value in the input data
var yMax = (decimal)inputSocket.Max();
decimal newYMax = yMax*2;
space.YRange = new CPTPlotRange(-20, new NSDecimalNumber(newYMax.ToString()).NSDecimalValue);
decimal newXMax = (decimal)space.XRange.MaxLimit + 2;
decimal newXMin = (decimal)space.XRange.MinLimit - 1;
space.XRange = new CPTPlotRange(new NSDecimalNumber(newXMin.ToString()).NSDecimalValue,
new NSDecimalNumber(newXMax.ToString()).NSDecimalValue);
//RectangleF(position x, position y, width, height
//AddSubview = adding a view on top of a View
_view.AddSubview(new CPTGraphHostingView(new RectangleF(20, 320, 662, 320))
{
HostedGraph = _graph
});
}
I want to show y value in the graph (red square in the image) so it could look like a proper graph. Anyone has an experience how to create graph using Xamarin/monotouch? There is not quite a lot of xamarin tutorial for core plot. Thanks before :)
Turns out I have to set labellingPolicy to Automatic. See below:
y.LabelingPolicy = CPTAxisLabelingPolicy.Automatic;
Then it will set the y axis value based on the data.
I am using System.Drawing to create the following image, but I want to switch over to MSChart (System.Windows.Forms.DataVisualization.Charting).
Has anyone been able to create the rounded edges that you see in my bar? Both bars (blue & gray) have rounded smooth edges.
UPDATE: (Adding a method returning my Chart that needs curves)
private MSChart.Chart createChart3(double dataPointYvalue, string chartName, MSChart.Axis yAxis, SysDraw.Size sizeChart)
{
// Chart
// --------------------------------
MSChart.Chart chart6 = new MSChart.Chart();
chart6.BorderlineWidth = 0;
chart6.BorderSkin.BackColor = SysDraw.Color.Empty;
//chart6.Name = chartName;
//chart6.Size = new SysDraw.Size(720, 90);
chart6.Width = 720;
chart6.Height = 90;
chart6.AntiAliasing = MSChart.AntiAliasingStyles.All;
chart6.TextAntiAliasingQuality=MSChart.TextAntiAliasingQuality.High;
chart6.IsSoftShadows = false;
// ChartAreas collection
// --------------------------------
string chartAreaName = "Default";
SysDraw.Font labelFont = new SysDraw.Font("Arial Narrow", 10,SysDraw.FontStyle.Regular);
SysDraw.Font labelFontBold = new SysDraw.Font("Arial Narrow", 10,SysDraw.FontStyle.Bold);
#region Chart Area
MSChart.ChartArea chartArea6 = new MSChart.ChartArea();
chartArea6.Area3DStyle.Enable3D = false;
chartArea6.BackGradientStyle = MSChart.GradientStyle.TopBottom;
chartArea6.BackColor = grayStart;
chartArea6.BackSecondaryColor = grayEnd;
chartArea6.BorderDashStyle=MSChart.ChartDashStyle.NotSet;
chartArea6.Name = chartAreaName;
// -- Axes under Area collection
// --------------------------------
chartArea6.AxisX.Enabled = MSChart.AxisEnabled.False;
chartArea6.AxisX.IsMarginVisible = false;
//chartArea6.AxisX.LabelStyle.Font = new SysDraw.Font("Trebuchet MS", 8.25F, SysDraw.FontStyle.Bold);
chartArea6.AxisX.LabelStyle.Font = labelFont;
chartArea6.AxisX.LabelStyle.Interval = 1D;
chartArea6.AxisX.LineColor = SysDraw.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
chartArea6.AxisX.MajorGrid.LineColor = SysDraw.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
chartArea6.AxisY.CustomLabels.Add(createLabelRegion(1,"Underweight",0D,18.49D,SysDraw.Color.FromArgb(((int)(((byte)(255)))), ((int)(((byte)(128)))), ((int)(((byte)(128)))))));
chartArea6.AxisY.CustomLabels.Add(createLabelRegion(1,"Normal",18.5D,24.9D,SysDraw.Color.Black));
chartArea6.AxisY.CustomLabels.Add(createLabelRegion(1,"Overweight",25D,29.9D,SysDraw.Color.FromArgb(((int)(((byte)(255)))), ((int)(((byte)(128)))), ((int)(((byte)(128)))))));
chartArea6.AxisY.CustomLabels.Add(createLabelRegion(1,"Obese",30D,50D,SysDraw.Color.Red));
chartArea6.AxisY.CustomLabels.Add(createLabelRegion(0,"18.5",15.5D,21.5D,SysDraw.Color.Black));
chartArea6.AxisY.CustomLabels.Add(createLabelRegion(0,"25",23D,27D,SysDraw.Color.Black));
chartArea6.AxisY.CustomLabels.Add(createLabelRegion(0,"30",28D,32D,SysDraw.Color.Black));
chartArea6.AxisY.Enabled = MSChart.AxisEnabled.True;
chartArea6.AxisY.Interval = 50D;
chartArea6.AxisY.Maximum = 50D;
chartArea6.AxisY.Minimum = 0D;
chartArea6.AxisY.IntervalType = MSChart.DateTimeIntervalType.Number;
//chartArea6.AxisY.LabelStyle.Font = new SysDraw.Font("Trebuchet MS", 8.25F, SysDraw.FontStyle.Bold);
chartArea6.AxisY.LabelStyle.Font = labelFontBold;
chartArea6.AxisY.LineColor = SysDraw.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
chartArea6.AxisY.MajorGrid.LineColor = SysDraw.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
chartArea6.AxisY.MajorTickMark.Enabled = false;
chartArea6.AxisY2.Enabled = MSChart.AxisEnabled.True;
chartArea6.AxisY2.Interval = 50D;
chartArea6.AxisY2.Maximum = 50D;
chartArea6.AxisY2.Minimum = 0D;
chartArea6.AxisY2.MajorTickMark.Enabled = false;
#endregion
chart6.ChartAreas.Add(chartArea6);
// Series Collection Editor
// --------------------------------
#region Series
// -- Datapoints
// --------------------------------
MSChart.DataPoint dataPoint19 = new MSChart.DataPoint(0D,dataPointYvalue);
MSChart.Series series7 = new MSChart.Series();
series7.BackGradientStyle = MSChart.GradientStyle.TopBottom;
series7.Color = blueStart;
series7.BackSecondaryColor = blueEnd;
series7.BorderColor = SysDraw.Color.FromArgb(((int)(((byte)(180)))), ((int)(((byte)(26)))), ((int)(((byte)(59)))), ((int)(((byte)(105)))));
series7.ChartArea = chartAreaName;
series7.ChartType = MSChart.SeriesChartType.Bar;
series7.Name = "PlotMemberValue";
series7.Points.Add(dataPoint19);
#endregion
chart6.Series.Add(series7);
// Legend
// --------------------------------
#region Legend
MSChart.Legend legend6 = new MSChart.Legend();
legend6.BackColor = SysDraw.Color.Transparent;
legend6.Enabled = false;
legend6.Font = new SysDraw.Font("Trebuchet MS", 8.25F, SysDraw.FontStyle.Bold);
legend6.IsTextAutoFit = false;
legend6.Name = "Default";
#endregion
//chart6.Legends.Add(legend6);
// Title
// --------------------------------
// Annotations
// --------------------------------
chart6.Annotations.Add(valueAnnotation(dataPoint19));
chart6.Annotations.Add(regionDividerLine(dataPoint19,chartAreaName,18.5D));
chart6.Annotations.Add(regionDividerLine(dataPoint19,chartAreaName,25D));
chart6.Annotations.Add(regionDividerLine(dataPoint19,chartAreaName,30D));
return chart6;
}
Can you provide the basic chart you are using and i can continue to get it closer however I believe you will be using
chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
The only way I can think of to do something like that would be to use the PostPaint event in order to draw on top of the standard square bars. You could try to hide the corner by drawing a transparent bitmap for example. It might be quite tricky to achieve pixel perfect alignment though. The code below demonstrate the principle only and does not resolve how to correctly position the bitmap.
private void chart1_PostPaint(object sender, System.Windows.Forms.DataVisualization.Charting.ChartPaintEventArgs e)
{
// Painting series object
if (e.ChartElement is System.Windows.Forms.DataVisualization.Charting.Series)
{
Series series = (Series)e.ChartElement;
foreach (DataPoint pt in series.Points)
{
// Load bitmap from resource
System.Drawing.Image bitmap = Properties.Resources.corners;
// Set Red color as transparent
ImageAttributes attrib = new ImageAttributes();
attrib.SetColorKey(Color.Red, Color.Red, ColorAdjustType.Default);
// Calculates marker position depending on the data point X and Y values
RectangleF imagePosition = RectangleF.Empty;
imagePosition.Y = (float)e.ChartGraphics.GetPositionFromAxis(
"Default", AxisName.X, pt.XValue);
imagePosition.X = (float)e.ChartGraphics.GetPositionFromAxis(
"Default", AxisName.Y, pt.YValues[0]);
imagePosition = e.ChartGraphics.GetAbsoluteRectangle(imagePosition);
imagePosition.Width = bitmap.Width;
imagePosition.Height = bitmap.Height;
imagePosition.X -= bitmap.Width - 1;
imagePosition.Y -= 1;
// Draw image
e.ChartGraphics.Graphics.DrawImage(bitmap,
Rectangle.Round(imagePosition),
0, 0, bitmap.Width, bitmap.Height,
GraphicsUnit.Pixel,
attrib);
// Dispose image object
bitmap.Dispose();
}
}
I am displaying data in asp.net chart control. Using a 3d bar chart. I am showing the values next to the bars. (seriesCount.IsValueShownAsLabel = true;). The chart control is rendering the value label still on top of the bar and is making the value hard to read. I am trying to position this label to the right but so far I've found no way to do it. I've also tried enabling Smart labels hoping and putting a marker on the bar to push the value away but I haven't been successful. Any suggestions are appreciated.
Sample code:
Chart chartSubjects = new Chart();
chartSubjects.Width = Unit.Pixel(800);
chartSubjects.Height = Unit.Pixel(300);
chartSubjects.AntiAliasing = AntiAliasingStyles.All;
Series seriesCount = new Series("subjectsCountSeries");
seriesCount.YValueType = ChartValueType.Int32;
seriesCount.ChartType = SeriesChartType.Bar;
seriesCount.IsValueShownAsLabel = true;
seriesCount.ChartArea = "subjectsCountArea";
chartSubjects.Series.Add(seriesCount);
ChartArea areaCount = new ChartArea("subjectsCountArea");
LabelStyle yAxisStyle = new LabelStyle();
yAxisStyle.ForeColor = System.Drawing.ColorTranslator.FromHtml("#444444");
yAxisStyle.Font = new System.Drawing.Font("Arial", 11, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Pixel);
areaCount.AxisY.LabelStyle = yAxisStyle;
areaCount.AxisY.IsLabelAutoFit = false;
areaCount.Position.Width = 50;
areaCount.Position.Height = 100;
areaCount.Position.X = 0;
areaCount.Position.Y = 0;
areaCount.Area3DStyle.Enable3D = true;
areaCount.Area3DStyle.LightStyle = LightStyle.Realistic;
areaCount.Area3DStyle.WallWidth = 4;
areaCount.Area3DStyle.Inclination = 10;
areaCount.Area3DStyle.Perspective = 10;
areaCount.Area3DStyle.Rotation = 20;
areaCount.Area3DStyle.PointDepth = 90;
chartSubjects.ChartAreas.Add(areaCount);
int[] pointsToAdd = new int[] { 1434, 712, 601, 204, 173, 168, 64, 35, 22, 8, 2 };
foreach (int point in pointsToAdd)
{
DataPoint dataPoint = new DataPoint();
dataPoint.SetValueY(point);
seriesCount.Points.Add(dataPoint);
}
Is this what you are looking for?
<asp:Series Name="Series1" ChartType="Bar"
CustomProperties="BarLabelStyle=Right" IsValueShownAsLabel="True"
Palette="EarthTones" XValueMember="xvalue" YValueMembers="yvalue">
</asp:Series>
CustomProperties="BarLabelStyle=Right" did it for me.
In your case I'd use:
chartSubjects.Series["seriesCount"]["LabelStyle"] = "Right";
When I generate telerik Pie chart. I want to concatenate lable value with %data value but I am not getting both values.my code-
ChartSeries objChartSeries = new ChartSeries("Pie");
objChartSeries.Type = ChartSeriesType.Pie;
objChartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels;
objChartSeries.Appearance.LabelAppearance.Visible = true;
objChartSeries.Appearance.ShowLabelConnectors = true;
objChartSeries.Appearance.ShowLabels = true;
objChartSeries.Appearance.DiameterScale = 0.6;
objChartSeries.DataLabelsColumn = Xtext + "#Y";
//objChartSeries.DefaultLabelValue = "#Y";
//RadChart1.Legend.TextBlock.Text = ddlX.SelectedItem.Text.Trim();
//RadChart1.Legend.Visible = true;
RadChart1.Series.RemoveSeries();
RadChart1.Series.Add(objChartSeriesBlank);
RadChart1.Series.Add(objChartSeries);
RadChart1.Series[1].DataYColumn = Yval;
RadChart1.DataSource = dsResult;
RadChart1.DataBind();
I want my chart like E1007(40%)...
objChartSeries.DataLabelsColumn = SomeDecimal.ToString("P");