Hello!
I made a line graph that is giving me the following output:
Below is the basic code:
chartProcessStats1.ChartType = Infragistics.UltraChart.Shared.Styles.ChartType.LineChart 'chartProcessStats1.ChartType = Infragistics.UltraChart.Shared.Styles.ChartType.ScatterLineChart
Dim temparrayx() As Decimal = New Decimal() {-10, 10, 100, 110, 120} Dim temparrayy() As Decimal = New Decimal() {0.5, 3, 2, 3, 1}
Dim graphval As New NumericSeries()
Dim k As Integer = 0
chartProcessStats1.LineChart.ChartComponent.Series.Clear()
While (k < temperaturearray.Length)
graphval.Points.Add(New NumericDataPoint(temparrayy(k), temparrayx(k), False))
k = k + 1 End While
chartProcessStats1.LineChart.ChartComponent.Series.Add(graphval)
temperaturearray = {} errorarray = {}
It appears the output is a result of the x axis being entered as a string rather than a decimal (despite the fact the actual array is made up of decimal values). Is there a way to enter the x axis as decimals (so the graph scales properly)?
Thanks in advance!
Actually, if there's a way to change the range of the y axis as well (I want to change it to 0 to 3, for instance), that would be helpful to know as well. I've tried sorting through the pages on the site and I haven't been able to find the property I need to set. Thanks!
Hello Jeremy,
The LineChart will populate the series’ Y values with one row’s data found in each numeric column, and populate the X values according to the string keys of the columns themselves. It knows the x values only by the string keys, so this doesn’t provide the functionality of the chart understanding your x values that you want.
The Scatter Chart will populate the series using 2 numeric columns, and you will specify the X and Y columns via the UltraChart.ScatterChart.ColumnX and UltraChart.ScatterChart.ColumnY properties. For more information on this, please visit: http://help.infragistics.com/doc/WinForms?page=Chart_Working_with_Scatter_Chart_Data.html
This will allow the chart to understand your X values and, among other things, space out your points along the X axis according to their value. I’ve attached a sample project which should show you how you can create a ScatterChart with this ability.
Concerning changing the range of the axis, you’ll need to set the Axis’ RangeType to Custom to see your RangeMin and RangeMax settings appear.
Please let me know if there’s anything further I can help you with.
Consolidated Below
...Sorry again for all the posts but I was able to chip away at my issues. Just have a few outstanding. Below is what I'm aiming for (made in Excel):
Here is what I currently have:
Below is my sample code:
Dim temprow
UltraGrid1.DataSource = UltraDataSource1UltraDataSource1.Reset()
UltraDataSource1.Band.Columns.Add("Temp", GetType(Decimal))UltraDataSource1.Band.Columns.Add("Error 1", GetType(Decimal))UltraDataSource1.Band.Columns.Add("Error 2", GetType(Decimal))
While (k < temparrayx.Length)
temprow = New Object() {temparrayx(k), temparrayy(k), temparrayy2(k)}UltraDataSource1.Rows.Add(temprow)k = k + 1
End While
chartProcessStats1.ChartType = Infragistics.UltraChart.Shared.Styles.ChartType.ScatterChart
chartProcessStats1.Axis.X.Labels.ItemFormatString = AxisItemLabelFormat.CustomchartProcessStats1.Axis.X.Labels.ItemFormatString = ""chartProcessStats1.Axis.X.Labels.Orientation = Infragistics.UltraChart.Shared.Styles.TextOrientation.HorizontalchartProcessStats1.Axis.X.RangeMin = -40chartProcessStats1.Axis.X.RangeMax = 140chartProcessStats1.Axis.X.Extent = 20chartProcessStats1.Axis.X.RangeType = AxisRangeType.Custom
chartProcessStats1.Axis.Y.Labels.ItemFormatString = AxisItemLabelFormat.CustomchartProcessStats1.Axis.Y.Labels.ItemFormatString = ""chartProcessStats1.Axis.Y.Labels.Orientation = Infragistics.UltraChart.Shared.Styles.TextOrientation.HorizontalchartProcessStats1.Axis.Y.RangeMin = 0chartProcessStats1.Axis.Y.RangeMax = 3.5chartProcessStats1.Axis.Y.Extent = 20chartProcessStats1.Axis.Y.RangeType = AxisRangeType.Custom
Dim ChartColors() As ColorChartColors = New Color() {Color.Blue, Color.Red, Color.Green, Color.Yellow, Color.Orange, Color.Indigo, Color.Violet}chartProcessStats1.ColorModel.CustomPalette = ChartColors
chartProcessStats1.ScatterChart.Icon = SymbolIcon.CirclechartProcessStats1.ScatterChart.IconSize = SymbolIconSize.SmallchartProcessStats1.ScatterChart.LineAppearance.DrawStyle = LineDrawStyle.SolidchartProcessStats1.ScatterChart.LineAppearance.SplineTension = 0chartProcessStats1.ScatterChart.LineAppearance.Thickness = 3
chartProcessStats1.ScatterChart.ConnectWithLines = True
chartProcessStats1.DataSource = UltraDataSource1
'chartProcessStats1.Data.IncludeColumn(0, True)'chartProcessStats1.Data.IncludeColumn(1, false)'chartProcessStats1.Data.IncludeColumn(2, True)chartProcessStats1.ScatterChart.ColumnX = 0chartProcessStats1.ScatterChart.ColumnY = 1
'chartProcessStats1.DataBind()
The last outstanding issues are:
1) I need to add an additional set of data onto the graph but I don't see how this is possible as I don't see how it's possible to do so using:
chartProcessStats1.ScatterChart.ColumnX = 0chartProcessStats1.ScatterChart.ColumnY = 1
If I have different X and Y axis', there doesn't appear to be a way to set them. I've tried commenting out the ColumnY line (since there are two other columns, I assume that, since it's linked to a datasource, there would be a way to setup multiple data sets but I can't seem to figure out how. (HIGH Priority)
2) When I hover over the points on the graph, I'd like it to display the x and y information (for example, -10,0.5 for one of the points rather than just -10), rather than just the x information (-10, in that example) (medium priority)
3) X Axis Label (low priority)
4) Y Axis Label (low priority)
5) Chart Label (low priority)
I imagine these are all very basic things that can be fixed with a few lines of code but, after combing through directories, examples in your forums, etc, it appears I'm unable to progress any further. Thank you again for all your help!
Jeremy,
I’m glad you were able to work through a lot of the functionality for the UltraChart. Regarding your still outstanding questions, I have found resources for each question and implemented the functionality in the attached sample, and will briefly explain their implementation here:
I’ve noticed in your code that you’ve been using ScatterLineChart as your chart type. If this is still true, you will be unable to bind more than 1 series to it, and will have to create a composite chart to bind multiple series. However, for your purposes I recommend using the ScatterChart, with the ConnectWithLines property set to true. This will allow you to bind more than 1 XYSeries to your chart, and you will show both data sets on your chart. For more information about binding series to the UltraChart, please see: http://help.infragistics.com/doc/WinForms?page=Chart_Requirements_for_Series_Binding.html
For the chart, y axis, and x axis labels I assumed you were referring to the titles to each, as is found on your Excel sample (Temp Vs. Error, Error, and Temp respectively). If this is true, the functionality can be found in the UltraChart.TitleTop, .TitleLeft, and .TitleBottom appearances, respectively. These titles can be formatted to as you need to ensure they are clearly the respective titles. For more info, please see: http://help.infragistics.com/Help/Doc/WinForms/2015.2/CLR4.0/html/Chart_Assign_Chart_Titles.html If I am mistaken and you did mean you want to know how to change the axes’ increment labels, you can do so through the UltraChart.Axis.X.Labels.ItemFormatString property (as well as for the Y, X2, and Y2 axes; see answer 4 for more information)
The line color properties can be found in UltraChart.ColorModel property. The simplest way to achieve what you’re looking for here, setting 1 line color to blue, would be to set the ColorModel.ModelStyle to CustomLinear, and set the ColorModel.CustomPalette property to an array of 1 color, Blue. But there are many ways to achieve different color schemes for your Chart, including manually setting each series through ModelStyle=CustomLinear. For more information please visit: http://help.infragistics.com/doc/WinForms?page=Chart_Assign_Custom_Colors_to_Chart_Elements.html
The label which appears as you mouse over the data points is the tooltip, so customizing its appearance is done through the UltraChart.Tooltips property. You can designate what the tooltip shows through the FormatString property. Please note how I define what data is shown by the tooltip in my sample on line 56. For more information on how to use custom FormatStrings, please see: http://help.infragistics.com/Help/Doc/WinForms/2012.2/CLR4.0/html/Chart_Label_Formatting.html and the “Use Predefined and Custom Label Styles” link at the bottom of that page.
I hope that this will enable you to use the UltraChart in every capacity you need. Concerning your issue with the designer on my previous sample, if the problem persists you should still be able to see how I set the necessary properties in my code behind and see its effects on the running project, as the only things in the designer are an UltraChart docked to the Form and an UltraDataSource as a component of the Form. However, I double checked the root causes that typically cause designer failure to samples, so you should be able to see the designer on this one.
Please let me know if I can help you any further with the UltraChart.
John,
I looked at your code but I can't see how to make multiple data sets on the same graph and your example doesn't really demonstrate how to do so (for the most part, it's mainly just a single set of data, which I more or less already have working correctly). Both forms in the example you sent rely on the following lines to set the X and Y axis:
UltraChart1.ScatterChart.ColumnX = 0 UltraChart1.ScatterChart.ColumnY = 1
Which only allow for a single X column and a single Y column.
I actually spent a while trying to get this working yesterday but couldn't get any closer. Below is the code I tried using the composite code info:
Dim temparrayx() As Decimal = New Decimal() {-10, 10, 100, 110, 120}DateTime.Today.AddMonths(4)} Dim temparrayy() As Decimal = New Decimal() {0.5, 3, 2, 3, 1} Dim temparrayy2() As Decimal = New Decimal() {1, 3, 2, 3, 0.5}
Dim dt As DataTable
chartProcessStats1.ChartType = ChartType.Composite
Dim area As New ChartArea() Dim sca1 As ScatterChartAppearance
chartProcessStats1.CompositeChart.ChartAreas.Add(area)
dt = New DataTable() dt.Columns.Add("Temp", GetType(Decimal)) dt.Columns.Add("Error 1", GetType(Decimal)) dt.Columns.Add("Error 2", GetType(Decimal))
UltraGrid1.DataSource = dt
dt.Rows.Add(temparrayx(k), temparrayy(k), temparrayy2(k)) k = k + 1
Dim axisX As New AxisItem()
axisX.OrientationType = AxisNumber.X_Axis axisX.Extent = 20 axisX.DataType = AxisDataType.Time axisX.NumericAxisType = NumericAxisType.Linear axisX.LineColor = Color.Blue 'axisX.ScrollScale.Visible = true;
axisX.Labels.Visible = True axisX.Labels.Orientation = TextOrientation.VerticalLeftFacing axisX.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel axisX.TickmarkInterval = 1 axisX.SetLabelAxisType = SetLabelAxisType.DateData area.Axes.Add(axisX)
Dim axisY As New AxisItem()
axisY.Extent = 20 axisY.DataType = AxisDataType.Numeric axisY.Labels.ItemFormatString = AxisItemLabelFormat.Custom axisY.Labels.ItemFormatString = "" axisY.Labels.Orientation = TextOrientation.Horizontal axisY.OrientationType = AxisNumber.Y_Axis axisY.LineColor = Color.Blue axisY.RangeType = AxisRangeType.Custom axisY.RangeMin = 0 axisY.RangeMax = 4 area.Axes.Add(axisY)
Dim series1 As New NumericTimeSeries()
series1.Label = "Error Stuff" series1.DataBind(dt, "Temp", "Error 1", "Error 1") series1.PEs.Add(New PaintElement(Color.Blue))
Dim myColumnLayer As New ChartLayerAppearance() myColumnLayer.ChartType = ChartType.ScatterChart myColumnLayer.ChartArea = area myColumnLayer.Series.Add(series1) myColumnLayer.AxisX = axisX myColumnLayer.AxisY = axisY chartProcessStats1.CompositeChart.Series.Add(series1) chartProcessStats1.CompositeChart.ChartLayers.Add(myColumnLayer)
sca1 = New ScatterChartAppearance() sca1.ConnectWithLines = True sca1.LineAppearance.SplineTension = 0 'Tension = 0 for straight lines sca1.Icon = SymbolIcon.Circle sca1.IconSize = SymbolIconSize.Small myColumnLayer.ChartTypeAppearance = sca1
Unfortunately, I was never able to get the data to import correctly so the x axis never populated correctly.
Do you have an example that demonstrates a scatter chart with multiple values on the chart? It seems you managed to address the lower priority issues (which are definitely appreciated) but right now, I can't use the chart the way I need to without being able to add a second set of data to the chart.
I'm more than willing to do the work and I've tried everything I can but at this point, I think I need some help with the actual solution rather than being pointed in the right direction (as I've spent many hours sorting through your pages and your forums trying every example I can find).
Hopefully, we can get this sorted out soon as this one issue seems to be the primary block in my path and having a one day delay between every response adds up pretty quick, time wise. Thanks for your help!
I modified my sample to demonstrate how to bind series to your UltraChart. Explanation for the Series Collection can be found at: http://help.infragistics.com/doc/WinForms?page=Chart_Series_Collection.html .
I believe this demonstration should achieve what you’re looking for and better guide you on how to do this with your data. Please let me know if you could use further guidance on binding multiple series to your chart.
It's no problem, I'm glad we were able to ultimately provide you the functionality you need. Please let me know if there is anything else I can assist with.
Perfect! That worked!
Thanks for your help! Sorry it took so long . . . heh.
I modified your sample, please let me know if you can now observe the axis line labels properly rendering.
They weren’t rendering because the Axis Label ItemFormatString was set to “”. I changed the format string to “<DATA_VALUE>”, and this gives us the desired labels.
I find that often, along with the help documentation and samples, a lot of information can be gleaned by looking into the UltraChart’s chart wizard. The wizard will often show you the properties it is setting according to your preferences, and if you still want to do this in code, you can then set the properties according to what you saw in the wizard.
I apologize that this has been a “one step forward one step back” process, but I hope the end result has been a strong understanding of all the UltraChart’s customizable features so that you will be able to use it to meet all your future needs.
Please don’t hesitate to contact us if the UltraChart still isn’t meeting your needs or you need any more assistance using it.
John, this got the issue with getting multiple series on there, which is a good step forward, but it's eliminated all the other work I had put into customizing the axis' and the markers.
This is what I'm currently seeing (from your example):
Beforehand, I was able to set this with the following controls (see the graph from 03-14-2016 11:57 PM):
When I add this back in, everything appears to be working now except the labels on the graph. Below is what I'm currently seeing:
As you can see, the scaling is correct but the labels have disappeared on the axis.
I'm including a project file for you to look at, since posting my code everytime doesn't seem to be getting us any closer. Can you please look at my exact code to help me determine the cause of the issue and resolve the issue I'm having rather than posting another example? Unfortunately, the examples your posting all seem to take a different approach and one step forward seems to be resulting in one step backwards as well. I think there's enough information in this thread for you to have a pretty good idea of what I'm aiming for (I don't think we're far off).
If you could help me resolve this issue, this will allow me to have:
1) The numeric axis
2) Multiple series
3) Making the x and y axis customizable (scaling, colors, etc)
4) Being able to customize the datapoints when hovering over them
5) Titles for the axis'
It looks like everything is working except for point 3 (since the axis labels don't appear to be visible or there's some other related issue).
Please let me know if you need any additional information. Thanks!