I'm doing currently some first Windows Phone 8 / XAML experiments and use the WinRTXamlToolkit chart control. While I managed to get my data drawn, I have problems to redraw the control to display changed data.
CHART_Overview.Series.Add(_lsChartOvw);
((AreaSeries)CHART_Overview.Series[0]).ItemsSource = _lstLogOvw;
LinearAxis dta = new LinearAxis();
dta.Title = "X";
dta.Orientation = AxisOrientation.X;
dta.ShowGridLines = true;
CHART_Overview.Axes.Add(dta);
CHART_Overview.Axes.Add(new LinearAxis()
{
Minimum = 0,
Maximum = 100,
Orientation = AxisOrientation.Y,
Interval = 20,
ShowGridLines = true,
Title = "Y"
});
Random rd = new Random((int)DateTime.Now.ToFileTimeUtc());
for(int i = 0; i < 20; i++)
{
_lstLogOvw.Add(new GenericValueItem() { X = i, Y = rd.Next(1, 100) });
}
I tried the following update scheme
_lstLogOvw.Clear();
for (int i = 0; i < 20; i++)
{
_lstLogOvw.Add(new GenericValueItem() { X = i, Y = rd.Next(1, 100) });
}
((AreaSeries)CHART_Overview.Series[0]).ItemsSource = _lstLogOvw;
The list is of type ObservableCollection. It's probably a binding problem but I've not much XAML experience at the moment to fully understand the refresh mechanism.
Don't know the proper way of doing it, but you can get around it by force the ItemSource to be null before assigning back to the actual list.
((AreaSeries)CHART_Overview.Series[0]).ItemsSource = null;
((AreaSeries)CHART_Overview.Series[0]).ItemsSource = _lstLogOvw;
Related
I'm creating a dotnet high chart by using the code:
object[,] data1 = new object[Dt.Rows.Count, 2];
for (int i = 0; i < Dt.Rows.Count; i++)
{
data1[i, 0] = Dt.Rows[i]["IncDate"];
data1[i, 1] = Dt.Rows[i]["IncCost"];
}
object[,] data2 = new object[Dt2.Rows.Count, 2];
for (int i = 0; i < Dt2.Rows.Count; i++)
{
data2[i, 0] = Dt2.Rows[i]["ExpDate"];
data2[i, 1] = Dt2.Rows[i]["ExpCost"];
}
Highcharts chart = new Highcharts("graph")
.SetTitle(new Title { Text = "Money Analysis" })
.SetXAxis(new XAxis { Type = AxisTypes.Datetime })
.SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Amount (£)" } })
.SetSeries(new[]
{
new Series { Name = "Incomings", Color = Color.LimeGreen, Data = new Data(data1) },
new Series { Name = "Expenditures", Color = Color.Red, Data = new Data(data2) }
})
which outputs:
I was wondering how I'm able to make the red line continue along the current cost until the end of the graph (the last date for the incoming.) And also do the same for the green line if the expenditures have a later date than the last incomings date. Hopefully people know what I mean. Thanks in advance
So, no - the chart won't do that for you automatically, but we can do it ourselves easy enough.
1) retrieve the final y value of your data
2) retrieve the final x value that you want it to extend until
3) add a new point to the data with those x and y values.
Example function:
function extendData(series, axis) {
var ext = axis.getExtremes();
var x = ext.dataMax;
var y = series.data[series.data.length -1].y;
series.addPoint({'x':x, 'y':y, marker: { enabled: true }});
}
Working example:
http://jsfiddle.net/jlbriggs/omtugbvo/
And just to show an example using any number of series:
http://jsfiddle.net/jlbriggs/omtugbvo/3/
Example image:
OK so i'm trying to clean up my code because it is a mess and what i have is 25 richtext boxes and i want to put their .Visible variable into an array and have a for statement go through and make each false so that the text box doesn't show up what i have tried hasn't worked and i can't figure it out what i have is.
bool[] box = new bool[25];
box[0] = richTextBox1.Visible;
box[1] = richTextBox2.Visible;
box[2] = richTextBox3.Visible;
box[3] = richTextBox4.Visible;
box[4] = richTextBox5.Visible;
box[5] = richTextBox6.Visible;
box[6] = richTextBox7.Visible;
box[7] = richTextBox8.Visible;
box[5] = richTextBox6.Visible;
box[6] = richTextBox7.Visible;
box[7] = richTextBox8.Visible;
box[8] = richTextBox9.Visible;
box[9] = richTextBox10.Visible;
box[10] = richTextBox11.Visible;
box[11] = richTextBox12.Visible;
box[12] = richTextBox13.Visible;
box[13] = richTextBox14.Visible;
box[14] = richTextBox15.Visible;
box[15] = richTextBox16.Visible;
box[16] = richTextBox17.Visible;
box[17] = richTextBox18.Visible;
box[18] = richTextBox19.Visible;
box[19] = richTextBox20.Visible;
box[20] = richTextBox21.Visible;
box[21] = richTextBox22.Visible;
box[22] = richTextBox23.Visible;
box[23] = richTextBox24.Visible;
box[24] = richTextBox25.Visible;
for(int y = 0; y <25; y++)
{
box[y] = false;
}
You canot change the bool in the array and expect that that changes the Visible state of the TextBoxes.
You have to change that property. Therefore you either have to store these controls in a collection or use a different approach: If they are in the same container control (like Form, GroupBox, Panel etc.) you could use Enumerable.OfType.
For example:
var allRichTextBoxes = this.Controls.OfType<RichTextBox>()
.Where(txt => txt.Name.StartsWith("richTextBox"));
foreach(var rtb in allRichTextBoxes)
rtb.Visible = false;
I think, this is what you need:
for(int y =0; y < box.Length; y++)
{
((RichTextBox)this.FindControl("richTextBox" + (y+1).ToString()))
.Visible = box[y];
}
Booleans are value types, and thus when you assign:
box[0] = richTextBox1.Visible;
you are only copying the boolean, this is completely independent of the object (referenced by richTextBox1) and changing to a different boolean value will only change the content of the array, there is no link to an object to change its property.
The simplest approach – there are others that might suit better but are more complex – is to store the object references in an array and set the property directly:
var boxes = new RichTextBox[...]
boxes[0] = richTextBox1;
...
for (int y = 0; y < boxes.Lengthl y++) {
boxes[y].Visible = false;
}
TextBox.Visible is a property and as such returns a value. Your array of Boolean therefore contains values as well. Changing this value does nothing to your textbox, because it doesn't know anything of the textbox anymore.
Storing a reference to a value is not possible in C#, so try the following instead:
RichtTextBox[] box = new RichTextBox[25];
box[0] = richTextBox1;
box[1] = richTextBox2;
box[2] = richTextBox3;
box[3] = richTextBox4;
box[4] = richTextBox5;
// ...
for(int y = 0; y <25; y++)
{
box[y].Visible = false;
}
Sometimes you can't get around it, so put it in a separate method and assign them all in one go
private void SetVisibilityForAllTextBoxesTo(bool isVisible)
{
this.richTextBox1.Visible =
this.richTextBox2.Visible =
this.richTextBox3.Visible =
this.richTextBox4.Visible =
this.richTextBox5.Visible =
this.richTextBox6.Visible =
this.richTextBox7.Visible =
this.richTextBox8.Visible =
this.richTextBox6.Visible =
this.richTextBox7.Visible =
this.richTextBox8.Visible =
this.richTextBox9.Visible =
this.richTextBox10.Visible =
this.richTextBox11.Visible =
this.richTextBox12.Visible =
this.richTextBox13.Visible =
this.richTextBox14.Visible =
this.richTextBox15.Visible =
this.richTextBox16.Visible =
this.richTextBox17.Visible =
this.richTextBox18.Visible =
this.richTextBox19.Visible =
this.richTextBox20.Visible =
this.richTextBox21.Visible =
this.richTextBox22.Visible =
this.richTextBox23.Visible =
this.richTextBox24.Visible =
this.richTextBox25.Visible = isVisible;
}
Put all your controls inside a asp:Panel then change the visibility of the panel.visible = false.... why over complicate things?
As you can clearly see the XAMDataChart is skipping putting the label on every other column.
I have no clue why this is happening. The code is the same for all of them and I have verified that the data is there.
Here is how they are generated
CategoryXAxis catX = new CategoryXAxis();
NumericYAxis numY = new NumericYAxis();
foreach (var series in control.masterCollection)
{
catX.Name = "catX";
catX.ItemsSource = series;
catX.Label = "{Label}";
catX.Gap = 20;
numY.Name = "numY";
ColumnSeries cs = new ColumnSeries()
{
ItemsSource = series,
ValueMemberPath = "YPoint",
XAxis = catX,
YAxis = numY
};
}
The answer to this question is setting the Category X Axis objects interval to 1.
catX.Interval = 1;
I am trying to create a line chart that shows test results over a period of time (interval of weeks). It's the first time I've used the chart control and I seem to keep displaying a grey square if I add points in from a loop:
Like this http://imageshack.us/a/img69/4718/69sq.png
I just can't see where I'm going wrong in my code - if i add some generic points in by hand then it will display properly.
Here is the code I'm using:
chtBreakdown.ChartAreas[0].AxisY.Minimum = 0;
chtBreakdown.ChartAreas[0].AxisY.Maximum = 100;
chtBreakdown.ChartAreas[0].AxisY.Interval = 10;
chtBreakdown.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Weeks;
chtBreakdown.ChartAreas[0].AxisX.Interval = 1;
dtiStart.Value = DateTime.Now.AddMonths(-3);
dtiEnd.Value = DateTime.Now;
chtBreakdown.Series.Clear();
DateTimeOffset minimum = dtiStart.Value;
DateTimeOffset maximum = dtiEnd.Value;
chtBreakdown.ChartAreas[0].AxisX.Minimum = minimum.DateTime.ToOADate();
chtBreakdown.ChartAreas[0].AxisX.Maximum = maximum.DateTime.ToOADate();
foreach (User u in allUsers)
{
List<Training> userTraining = u.TrainingList.Where(t => t.StartTime >= minimum && t.StartTime <= maximum).OrderBy(t => t.EndTime).ToList();
if (userTraining.Count != 0)
{
Series series = new Series(u.DisplayName);
series.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
series.BorderWidth = 2;
series.XValueType = ChartValueType.DateTime;
foreach (Training t in userTraining) series.Points.AddXY(t.StartTime.DateTime, t.PassPercentage);
chtBreakdown.Series.Add(series);
}
}
Can anybody show me where I'm going wrong?
Your Series instances are probably not associated to any ChartArea by default. Try to add this:
series.ChartArea = chtBreakdown.ChartAreas[0].Name;
I have 2 problems:
I want the names from the datatable but it is showing me in numeric form.
I would like a gap between the two bars but I can't find a way.
Here is the code:
private void InitializeGraph (DataTable poDt)
{
Telerik.Charting.ChartSeries chartseries = new Telerik.Charting.ChartSeries();
try
{
chartseries.Type = Telerik.Charting.ChartSeriesType.Bar;
Telerik.Charting.ChartSeriesItem csItem;
RadChart1.PlotArea.XAxis.AutoScale = true;
RadChart1.PlotArea.XAxis.DataLabelsColumn = "Name";
for (int iRow = 0; iRow < poDt.Rows.Count; iRow++)
{
chartseries = new Telerik.Charting.ChartSeries();
chartseries.Type = Telerik.Charting.ChartSeriesType.Bar;
chartseries.Name = poDt.Rows[iRow]["Name"].ToString().Trim();
csItem = new Telerik.Charting.ChartSeriesItem();
csItem.Name = poDt.Rows[iRow]["Name"].ToString();
csItem.Label.TextBlock.Text = poDt.Rows[iRow]["Value"].ToString();
RadChart1.PlotArea.XAxis.Appearance.TextAppearance.AutoTextWrap = Telerik.Charting.Styles.AutoTextWrap.True;
csItem.YValue = Int32.Parse(poDt.Rows[iRow]["Value"].ToString());
chartseries.AddItem(csItem);
RadChart1.Series.Add(chartseries);
}
RadChart1.PlotArea.XAxis.AddRange(1, poDt.Rows.Count, 1);
RadChart1.PlotArea.XAxis[poDt.Rows.Count].TextBlock.Text = chartseries.Name;
poDt.Rows.Count.ToString();
RadChart1.PlotArea.XAxis.AutoShrink = false;
RadChart1.PlotArea.XAxis.AutoShrink = true;
RadChart1.Series.Add(chartseries);
RadChart1.PlotArea.Appearance.Border.Visible = false;
RadChart1.Appearance.Border.Visible = true;
RadChart1.PlotArea.YAxis.IsLogarithmic = true;
RadChart1.PlotArea.YAxis.AutoScale = true;
RadChart1.PlotArea.YAxis.Appearance.ValueFormat=Telerik.Charting.Styles.ChartValueFormat.Number;
RadChart1.Appearance.BarWidthPercent = 50;
RadChart1.Chart.Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
RadChart1.Chart.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent;
RadChart1.Legend.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent;
}
catch (Exception Ex)
{
//throw;
}
finally
{
poDt.Clear();
poDt = null;
chartseries = null;
}
}
Sorry, I do not believe there is a way to display two X-axis at the same time.
My suggestion is you use a CategoricalAxis for your X axis and create a custom bar chart that has a legend which differentiates the two values. I don't have any working samples, however you can use this Telerik Silverlight demo for starters.
Also, switch to RadChartView if you can. Because I would then suggest an easier approach, which is using a Categorical X-Axis and create multiple Y axes. If you go that route, you can do something like this for a DateTimeContinuous (or Categorical) X-axis with multiple Y-axes :
int count = 0;
LineSeries lineSeries = new LineSeries();
lineSeries.CategoryBinding = new PropertyNameDataPointBinding() { PropertyName = "TimeStamp" };
lineSeries.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "Value" };
lineSeries.VerticalAxis = new LinearAxis()
{
Title = "Title Here"
};
lineSeries.ItemsSource = yourCollection.Values;
//First Y-axis to be placed on the left of X-axis,
//additional Y-axes to be placed on right
if (count > 0 )
{
lineSeries.VerticalAxis.HorizontalLocation = Telerik.Charting.AxisHorizontalLocation.Right;
}
count++;
chartName.Series.Add(lineSeries);
Hope this helps.