Trying to show a single point that actually lays on the line of other series. I could select the value in one series and highlight it but I think it would be harder. I choose to make a new lineseries called series2 and put my point in it. My other lineseries called series1 contain the actual points to be plotted.
/// <summary>
/// Streaming plot
/// </summary>
private void InitiateStreamPlot(List<double> time, List<double> sample, params object[] restOfPointsToPlote)
{
myModel = new PlotModel { Title = "Voltage level" };
ss = "New streaming plot is starting" + Environment.NewLine;
series1 = new LineSeries
{
MarkerType = MarkerType.Circle,
StrokeThickness = 1,
MarkerSize = 1,
Smooth = true,
Title = "Voltage level",
CanTrackerInterpolatePoints = false,
};
series2 = new LineSeries
{
Color = OxyColors.LightBlue,
MarkerFill = OxyColors.Blue,
MarkerType = MarkerType.Plus,
MarkerSize = 15,
};
linearAxis1 = new LinearAxis { Position = AxisPosition.Bottom, Title = "Time in nanosec" };
linearAxis2 = new LinearAxis { Position = AxisPosition.Left, Title = "Voltage" };
myModel.Axes.Add(linearAxis1);
myModel.Axes.Add(linearAxis2);
// Show the triggered value on the plot
//series2.Points.Add(new ScatterPoint(timeAtIndex, sampleAtIndex));
//myModel.Series.Add(series2);
if (restOfPointsToPlote.Length > 0)
{
double timeAtIndex = (double)restOfPointsToPlote[0];
double sampleAtIndex = (double)restOfPointsToPlote[1];
series2.Points.Add(new OxyPlot.DataPoint(timeAtIndex, sampleAtIndex));
myModel.Series.Add(series2);
}
for (int i = 0; i < time.Count - 1; i++)
{
series1.Points.Add(new OxyPlot.DataPoint(time[i], sample[i]));
}
myModel.Series.Add(series1);
plotView1.Model = myModel;
sendit = true;
}
The result I see from this plot is just the series1 and no series2 appears. Following is the result :
The plot(chart)
However as you see the point is not shown. when debugging I see that that single point exist. There is always a value in serie1 that is equal to that single point. I have no idea what I'm doing wrong.
I changed the code to following. I believe the reason was the configuration of series2 :
series2 = new LineSeries
{
Color = OxyColors.Red,
MarkerFill = OxyColors.Blue,
MarkerStroke = OxyColors.Red,
MarkerType = MarkerType.Circle,
StrokeThickness = 0,
MarkerSize = 4,
};
Related
So I have begun using Dotnet.Highcharts in Visual Studio with C# and MVC,
Its quite different from its javascript counterpart, I need to use ghostjs to take a picture from my web page to send as a report, as many must know, this means that animations interfere with this working properly as bars show up to half of the height they should be.
I'm using the recommended coding from Dotnet.highcharts which mostly uses Razor to configure the chart.
I have tried disabling animations in all these places:
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
Animation = new Animation() { Enabled = false, Duration = 0 }
},
Series = new PlotOptionsSeries
{
Animation = new Animation() { Enabled = false, Duration = 0}
}
},
chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
chartOptions.Chart.Animation.Enabled = false;
and still the chart keeps animating, I just don't know what is going on
here is my full Razor code for the chart
var chartOptions = new Highcharts
{
Title = new Title { Text = "Transactions" },
Subtitle = new Subtitle { Text = "December" },
XAxis = new List<XAxis>
{
new XAxis
{
Categories = ViewBag.ListCategories
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Tx"
}
}
},
Tooltip = new Tooltip
{
HeaderFormat = "<span style='font-size:10px'>{point.key}</span><table style='font-size:12px'>",
PointFormat = "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.0f}</b></td></tr>",
FooterFormat = "</table>",
Shared = true,
UseHTML = true
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
Animation = new Animation() { Enabled = false, Duration = 0 }
},
Series = new PlotOptionsSeries
{
Animation = new Animation() { Enabled = false, Duration = 0}
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "TX",
Data = ViewData["DataTX"] as List<ColumnSeriesData>
}
}
};
chartOptions.ID = "chart";
chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
chartOptions.Chart.Animation.Enabled = false;
var renderer = new HighchartsRenderer(chartOptions);
This one worked for me. Had to play with it a while, seems there's no clear documentation.
DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Areaspline})
.SetTitle(new Title
{
Text = "myLabel",
X = -20
})
.SetSeries(new[]
{
new Series { Name = "MyUsers", Data = new Data(myData), PlotOptionsSeries=new PlotOptionsSeries(){Animation=new Animation(false)} }
});
I found a way to disable the animation inside highcharts.js (From another question for the js version)
showCheckbox: !1,
animation: { duration: 1E3 }
, events: {},
I changed 1E3 to 0 and it worked, however, this is not the optimal solution, there must be a way to achieve this the right way. The whole point of the highcharts dll for visual studio is the ability to use highcharts without touching javascript
For now, I won't accept my own answer as the answer
Does anyone have a working example of using the new Dot Net Highcharts wrapper and changing the series colour? I just cant get it to change for the life of me, think I must have changed every single color property going. None of them default from the normal palette.
#(Html.Highsoft().Highcharts(
new Highcharts
{
Title = new Title
{
Text = "Picks Grouped By Target And Week Of Year"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = WeeksOfYear.ConvertAll<string>(x => x.ToString())
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Number of picks"
},
StackLabels = new YAxisStackLabels
{
Enabled = true,
Style = new Hashtable
{
{ "fontWeght", "bold" }
}
}
}
},
Legend = new Legend
{
Align = LegendAlign.Right,
X = -30,
VerticalAlign = LegendVerticalAlign.Top,
Y = 25,
Floating = true,
BorderColor = "#CCC",
BorderWidth = 1,
BackgroundColor = "white"
},
Tooltip = new Tooltip
{
Formatter = "formatToolTip"
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
DataLabels = new PlotOptionsColumnDataLabels
{
Enabled = true,
Color = "#FFFFFF",
Shadow = new Shadow()
{
Enabled = true,
Color = "black",
Width = 10,
OffsetX = 0,
OffsetY = 0
}
}
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "Over 45 Min",
Data = #ViewData["StackedColumnOver45Min"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "Under 45 Min",
Data = #ViewData["StackedColumnUnder45Min"] as List<ColumnSeriesData>
}
}
}
, "WeekOfYearSlaStackedColumn")
)
Series color could be set in series as explained in API reference for .NET Highcharts.
...
Series = new List<Series>
{
new ColumnSeries
{
Color = "rgba(165,170,217,1)",
...
for setting colors (anywhere in Highcharts in asp.net) you should use this construction:
using System.Drawing;
Color = ColorTranslator.FromHtml("#DFEEB2"),
Can someone explain me how I can create chart like this one using itextsharp library.
As you can see here, this chart has attached table with legends to its bottom side. And each bar has year attached to it. I want to create something like that.
Second picture. This is what i have so far. I don't have year attached to each bar, and my legends are not beneath each bar like in top graph. If someone could guide me how to create identical graph like one on top i would be grateful. Thanks in advance!
How can I turn those labels to be displayed horizontally, and put those legends beneath years in table like one in picture number 1.
// Chart Centers By Year
var chartCentersByYear = new Chart
{
Width = 1000,
Height = 450,
RenderType = RenderType.ImageTag,
AntiAliasing = AntiAliasingStyles.Graphics,
TextAntiAliasingQuality = TextAntiAliasingQuality.High
};
chartCentersByYear.Titles.Add("Centers By Year");
chartCentersByYear.Titles[0].Font = new Font("Arial", 16f);
chartCentersByYear.Titles[0].Alignment = System.Drawing.ContentAlignment.TopLeft;
chartCentersByYear.ChartAreas.Add("");
chartCentersByYear.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
chartCentersByYear.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
chartCentersByYear.Series.Add("Count");
chartCentersByYear.Series.Add("Cases");
chartCentersByYear.Series[0].ChartType = SeriesChartType.Column; //Pie
chartCentersByYear.Series[1].ChartType = SeriesChartType.StepLine; //StepLine
chartCentersByYear.Series[1].BorderDashStyle = ChartDashStyle.DashDot;
chartCentersByYear.Series[1].BorderWidth = 3;
chartCentersByYear.Series[0].Color = Color.Brown;
chartCentersByYear.Legends.Add("1");
chartCentersByYear.Legends.Add("2");
chartCentersByYear.Legends[0].HeaderSeparator = LegendSeparatorStyle.Line;
chartCentersByYear.Legends[0].HeaderSeparatorColor = Color.Black;
chartCentersByYear.Legends[0].ItemColumnSeparator = LegendSeparatorStyle.Line;
chartCentersByYear.Legends[0].ItemColumnSeparatorColor = Color.Black;
chartCentersByYear.Legends[1].HeaderSeparator = LegendSeparatorStyle.Line;
chartCentersByYear.Legends[1].HeaderSeparatorColor = Color.Black;
chartCentersByYear.Legends[1].ItemColumnSeparator = LegendSeparatorStyle.Line;
chartCentersByYear.Legends[1].ItemColumnSeparatorColor = Color.Black;
//For the Legend
LegendCellColumn firstColumn = new LegendCellColumn();
firstColumn.ColumnType = LegendCellColumnType.SeriesSymbol;
firstColumn.HeaderBackColor = Color.WhiteSmoke;
chartCentersByYear.Legends[0].CellColumns.Add(firstColumn);
chartCentersByYear.Legends[1].CellColumns.Add(firstColumn);
LegendCellColumn secondColumn = new LegendCellColumn();
secondColumn.ColumnType = LegendCellColumnType.Text;
secondColumn.Text = "#LEGENDTEXT";
secondColumn.HeaderBackColor = Color.WhiteSmoke;
LegendItem newItemCount = new LegendItem();
newItemCount.Cells.Add(LegendCellType.Text, "Count", System.Drawing.ContentAlignment.MiddleCenter);
newItemCount.BorderWidth = 1;
newItemCount.BorderDashStyle = ChartDashStyle.Solid;
LegendItem newItemCases = new LegendItem();
newItemCases.Cells.Add(LegendCellType.Text, "Cases", System.Drawing.ContentAlignment.MiddleCenter);
newItemCases.BorderWidth = 1;
newItemCases.BorderDashStyle = ChartDashStyle.Solid;
// Getting data from a stored procedure
var totalCentersByYearResult = new Repository().GetTotalCentersByYear();
foreach (IGD_spInternationalReportCenterWithTots1_Result item in totalCentersByYearResult)
{
// For Series
chartCentersByYear.Series[0].Points.AddXY(item.YearEcmo, item.Count);
chartCentersByYear.Series[1].Points.AddY(item.Cases);
// For Legend
newItemCount.Cells.Add(LegendCellType.Text, item.Count.ToString(), System.Drawing.ContentAlignment.MiddleCenter);
newItemCases.Cells.Add(LegendCellType.Text, item.Cases.ToString(), System.Drawing.ContentAlignment.MiddleCenter);
}
chartCentersByYear.Legends[0].CustomItems.Add(newItemCount);
chartCentersByYear.Legends[0].CustomItems.Add(newItemCases);
chartCentersByYear.Legends[0].Docking = Docking.Bottom;
chartCentersByYear.Legends[1].Docking = Docking.Bottom; //Top
chartCentersByYear.Series[0].YAxisType = AxisType.Primary;
chartCentersByYear.Series[1].YAxisType = AxisType.Secondary;
//For two coordinate systems
chartCentersByYear.ChartAreas[0].AxisY2.LineColor = Color.Transparent;
chartCentersByYear.ChartAreas[0].AxisY2.MajorGrid.Enabled = false;
chartCentersByYear.ChartAreas[0].AxisY2.Enabled = AxisEnabled.True;
chartCentersByYear.ChartAreas[0].AxisY2.IsStartedFromZero = chartCentersByYear.ChartAreas[0].AxisY.IsStartedFromZero;
using (var chartimage = new MemoryStream())
{
chartCentersByYear.SaveImage(chartimage, ChartImageFormat.Png);
Byte[] newChart = chartimage.GetBuffer(); //return chartimage.GetBuffer();
var image = Image.GetInstance(newChart); //Image.GetInstance(Chart());
image.ScalePercent(50f);
image.SetAbsolutePosition(document.LeftMargin + 40, document.BottomMargin + 100);
document.Add(image);
}
I'm using to Oxyplot for my Xamarin.iOS project for plotting a bar chart..
This is what my graph currently looks likes currently
here's instead of x axis values which are numbers, I want to show sun, mon true, wed.....
I can see that CategoryAxis has a method called LabelFormatter which returns Func<double, string>, but how do I use it?
And also why are the Y-Axis labels not showing?
public class MyClass
{
/// <summary>
/// Gets or sets the plot model that is shown in the demo apps.
/// </summary>
/// <value>My model.</value>
public PlotModel MyModel { get; set; }
/// <summary>
/// Initializes a new instance of the <see cref="OxyPlotSample.MyClass"/> class.
/// </summary>
public MyClass()
{
var model = new PlotModel { Title = "ColumnSeries" };
model.PlotAreaBorderColor = OxyColors.Transparent;
// A ColumnSeries requires a CategoryAxis on the x-axis.
model.Axes.Add(new CategoryAxis()
{
Position = AxisPosition.Bottom,
MinorTickSize = 0,
MajorTickSize = 0,
//MajorGridlineStyle = LineStyle.Solid,
//MinorGridlineStyle = LineStyle.Solid,
});
model.Axes.Add(new LinearAxis()
{
AxislineStyle = LineStyle.None,
Position = AxisPosition.Left,
MinorTickSize = 0,
MajorTickSize = 0,
MajorGridlineStyle = LineStyle.Solid,
MinorGridlineStyle = LineStyle.Solid,
Minimum = 0,
Maximum = 400,
});
var series = new ColumnSeries();
series.Items.Add(new ColumnItem() { Value = 200, Color = OxyColors.Orange});
series.Items.Add(new ColumnItem(200));
series.Items.Add(new ColumnItem(300));
series.Items.Add(new ColumnItem(100));
series.Items.Add(new ColumnItem(200));
series.Items.Add(new ColumnItem(100));
series.Items.Add(new ColumnItem(130));
model.Series.Add(series);
this.MyModel = model;
}
}
To show the label on the axis you have to specify the property MajorStep, Oxyplot will paint only the labels matching the major step.
model.Axes.Add(new LinearAxis()
{
MajorStep = 10,
Position = AxisPosition.Left,
...
});
And to modify the labels with the day name, you can use a DateTimeAxis instead of LinearAxis:
model.Axes.Add(new DateTimeAxis()
{
StringFormat = "ddd",
Position = AxisPosition.Bottom,
...
});
If you want something more customized you will have to use the LabelFormatter attribute.
EDIT:
Labels in CategoryAxis:
var categoryAxis = new CategoryAxis()
{
Position = AxisPosition.Bottom,
...
};
categoryAxis.ActualLabels.Add("Mon");
categoryAxis.ActualLabels.Add("Tue");
categoryAxis.ActualLabels.Add("Wed");
categoryAxis.ActualLabels.Add("Thu");
categoryAxis.ActualLabels.Add("Fri");
categoryAxis.ActualLabels.Add("Sat");
categoryAxis.ActualLabels.Add("Sun");
Model.Axes.Add(categoryAxis);
CategoryAxis.ActualLabels is readOnly, so you will have to Add the items one by one.
I'm a student that is still learning C# and I ran into a problem.
I'm trying to make a graphic (pie chart) with 7 different fields and seven different legendas.
I've got this code:
private void InitializeChart()
{
this.components = new System.ComponentModel.Container();
ChartArea chartArea1 = new ChartArea();
Legend legend1 = new Legend()
{ BackColor = Color.FromArgb(97,97,97), //achtergrondkleur legende
ForeColor = Color.White, //kleur van tekst in legende
Title = "Legende grafiek", //titel legende
TitleForeColor = Color.White}; //kleur titel legende
pieChart = new Chart();
((ISupportInitialize)(pieChart)).BeginInit();
SuspendLayout();
//===Pie chart
chartArea1.Name = "PieChartArea";
pieChart.ChartAreas.Add(chartArea1);
pieChart.Height = 300;
pieChart.Width = 300;
pieChart.Dock = System.Windows.Forms.DockStyle.Fill;
legend1.Name = "Legend1";
pieChart.Legends.Add(legend1);
pieChart.Location = new System.Drawing.Point(0, 50);
//====Bar Chart
chartArea1 = new ChartArea();
chartArea1.Name = "BarChartArea";
AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.Load += new EventHandler(StatistiekenForm_Load);
((ISupportInitialize)(this.pieChart)).EndInit();
this.ResumeLayout(false);
}
private void LoadPieChart()
{
pieChart.Series.Clear();
pieChart.Width = 300;
pieChart.Height = 300;
pieChart.Palette = ChartColorPalette.Excel;
pieChart.BackColor = Color.Transparent;
//pieChart.Titles.Add("Overzicht uitgaven");
pieChart.ChartAreas[0].BackColor = Color.Transparent;
Series series = new Series
{
Name = "Overzicht",
IsVisibleInLegend = true,
Color = System.Drawing.Color.FromArgb(97,97,97),
ChartType = SeriesChartType.Pie
};
pieChart.Series.Add(series);
int teller, prijsje = 50;
for (teller = 0; teller < 7; teller++)
{
series.Points.Add(teller);
var p1 = series.Points[teller];
p1.AxisLabel = Convert.ToString(prijsje + "€");
p1.LegendText = Convert.ToString("legende " + teller);
prijsje += 50;
}
pieChart.Invalidate();
panelPie.Width = 400;
panelPie.Height = 400;
panelPie.Controls.Add(pieChart);
}
Could anybody explain me why I keep seeing SIX slices, but the legenda shows me seven?
You can see the problem in this image:
http://i.imgur.com/4xciNUG.png?1
Thank you very much,
Yenthe.
There are 7 slices. The first one is too small though and you only see a sliver. Try changing this line: prijsje += 50 to prijsje += 10. his should allow you to better see that there are indeed 7 slices.
UPDATED:
I think you are using the Add Method incorrectly. I think what you are thinking is that by calling series.Points.Add(teller);, that C# is adding a point to teller position in the collection. This is actually incorrect.
What its doing is its inserting a point with the value of teller. The first one has a value of 0, which is why you aren't seeing it. Then the next one has a value of 1, which is the "100" label. Then the next one has a value of 2 (which is double the size of the one before it..1), which is the "150" label. If you were to cut out the "100" slice and overlay it on top of the "200" slice, you'd probably think by looking at the labels that two "100" slices could exactly fit into one "200" slice. In actuality, three can fit into one. The reason is because the value assigned to the "200" slice is 3.
To fix your problem, You should be using the Insert method instead of Add. Try this:
for (teller = 0; teller < 7; teller++)
{
var dp = new DataPoint(prijsje, prijsje);
dp.AxisLabel = Convert.ToString(prijsje + "€");
dp.LegendText = Convert.ToString("legende " + teller);
series.Points.Insert(teller, dp);
prijsje += 50;
}