Add labels to X-Axis points on 2D C1Chart

Add labels to X-Axis points on 2D C1Chart

Posted by: IT on 15 December 2017, 1:49 am EST

• 

  IT

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 December 2017, 1:49 am EST

  Hello,

  I am new to using the C1Chart component and was hoping for a little getting started help, sample links, examples… End goal, I need to create a trend line with time points on the X axis and numeric values on the Y Axis. These are simply data points collected with a time stamp from machines running that we want to show the values over a time period.
  
  I am translating the time stamp/time values into ‘seconds’ , from an offset, as a numeric value for use in the x axis. Ideally, I want to show the actual string/time stamp at that point on the x axis. I started with sample code from this site, noted below. I have it now, with the code below, with all the labels writing at the 0,0 location. I had labels working in this sample code.
  
  Thanks much for any help!

      Dim i As Integer = 0
      ' add data to the chart 
      Dim points As PointF() = CType(Array.CreateInstance(GetType(PointF), NumberOfDCItems), PointF())
      For i = 0 To NumberOfDCItems - 1
  

  ’ DC History Seconds offset are the number of seconds calculated for a time stamp
  
  ’ written to this array
  
  points(i).X = DCHistorySecondsOffset(i)
  
  points(i).Y = DCHistoryValue(i) ’ The actual numberic value
  
  Next
  
  C1Chart2.ChartGroups(0).ChartData.SeriesList(CurrentTrendLine).PointData.CopyDataIn(points)

      Dim TempString As String
      ' add X time stamp labels to the chart
      With C1Chart2.ChartArea.AxisX
          .ValueLabels.Clear()
          For i = 0 To (NumberOfDCItems - 1)
  

  ’ The time stamp below, would be for example, “12:15:00 AM”, the ‘time’ part of
  
  ’ a date data type
  
  TempString = DCHistoryTimeStamp(i).ToString()
  
  .ValueLabels.Add(i, TempString)
  
  Next
  
  .AnnoMethod = C1.Win.C1Chart.AnnotationMethodEnum.ValueLabels
  
  End With
  
  

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 17 December 2017, 10:14 pm EST

  Hi,

  Thank you for sharing the image, showing that all x values are overlapped at one location.
  
  I have attached a basic sample application showing how to add trendline to C1Chart with X axis binded to DateTime field.
  
  Also, following are documentation URL(s), samples that you may refer to for gaining some information about TrendLines in C1Chart:
  
  Documentation URL: http://help.grapecity.com/componentone/NetHelp/c1chart2d/webframe.html#workingwithtrendline.html
  
  TrendLines sample at …\Documents\ComponentOne Samples\WinForms\C1Chart\VB

  Let me know if you need any further help.
  
  Thanks,
  
  Ruchir AgarwalTrendLineDemo.zip

• 

  IT

  • Post Options:
  • Link
    Copy

  Posted 21 December 2017, 9:19 am EST

  Hello Ruchir,
  
  The samples you led me to worked perfectly with the code I created below to add a graph based on data values with labels on the axis. Thanks you very much!
  
  However, could you lead me to another example, or some advice, if I want to modify the code to add a different ‘graph line’ each time the code is called? In other words, the ‘DataCollectionID’ in the example below would have a different value each time the code below is run and ideally I would want to have it be a separate line on the chart each time.
  
  In the image I attached I would want the ‘red’ and ‘blue’ lines separate. Right now when I call it a second time, it is just continuing on from the end of the first run of the code. ( I scratched it out in black). Thanks much again!

  Jeff Ryan

   Dim strStartDate As String
          strStartDate = Format(DateTimePicker1.Value, "Short Date") & " 12:00:00 AM"
          Dim strEndDate As String
          strEndDate = Format(DateTimePicker1.Value, "Short Date") & " 11:59:59 PM"
  
          Dim strConn As String
          '            strConn = objSystemConfiguration.strSCSConnection & ";Provider=SQLOLEDB"""
  
          strConn = "Provider=SQLNCLI11;Server=DB\SQLExpress;Database=SCSExtrudeStandard;Uid=sa;Pwd=SCS-SCS;"
  
          Dim strQuery As String
          strQuery = "SELECT TimeStamp, Value FROM DataCollectionHistory WHERE DataCollectionID = " & [b]DataCollectionID[/b] & _
              " And TimeStamp >= '" & strStartDate & "' And TimeStamp <= '" & strEndDate & "' ORDER BY TimeStamp"
  
          Dim da As New OleDbDataAdapter(strQuery, strConn)
          da.Fill(dt)
  
          C1Chart2.DataSource = dt
  
          Dim dsc As ChartDataSeriesCollection = C1Chart2.ChartGroups(0).ChartData.SeriesList
          dsc.Clear()
  
          ' add series
          Dim ds As ChartDataSeries = dsc.AddNewSeries()
          ds.X.DataField = "TimeStamp"
          ds.Y.DataField = "Value"
  
          C1Chart2.ChartArea.AxisX.AnnotationRotation = 60
          C1Chart2.ChartArea.AxisX.AnnoFormat = FormatEnum.DateLongTime
  

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 21 December 2017, 9:34 pm EST

  Hi Jeff,

  Thank you for acknowledging resolution to previous issue.
  
  Now, in order to have separate line on the chart each time DataCollectionID value changes, you may use the DataSourceChanged event of C1Chart, which will be fired since the connection string is changing and inside add a Trendlist to collection as ChartData.[b]TrendsList.AddNewTrendLine/b or ChartData.[b]TrendsList.Add/b method

  Let me know if you need anything help further.

  Thanks,
  
  Ruchir Agarwal

• 

  IT

  • Post Options:
  • Link
    Copy

  Posted 28 December 2017, 7:20 am EST

  Hello Ruchir,
  
  Thanks again for your help. But it seems that with a trend line, it gives me a line such as circled in blue with the image I included, using the code below. Is there a way I can do it going from point to point, sticking with the ‘AddNewSeries’, rather than a ‘Trend Line’? Thanks again!

  Jeff Ryan

  Private Sub C1Chart2_DataSourceChanged(sender As Object, e As EventArgs) Handles C1Chart2.DataSourceChanged
  
      MsgBox("Data source changed")
  
      ' create trend line        
      Dim tl As C1.Win.C1Chart.TrendLine = New C1.Win.C1Chart.TrendLine()
      ' first data series       
      tl.SeriesIndex = 0
      ' set line color and thickness      
      tl.LineStyle.Color = Color.Red
      tl.LineStyle.Thickness = 2
      ' show formula in legend    
      tl.Text = "Jeff"
      ' add trend to the chart        
      C1Chart2.ChartGroups(0).ChartData.TrendsList.Add(tl)
  
  End Sub
  

• 

  IT

  • Post Options:
  • Link
    Copy

  Posted 28 December 2017, 9:07 am EST

  Ruchir,

  I suspect I don’t want to (re-) set the data source of the chart every time there is a different DataCollectionID, and that I want to do something like the below instead. The trick is how to set the points up programmatically at run time, even if I read the data into an array, instead of setting the data source and then set the points at run time. Thanks again for any suggestions!
  
  Jeff

  Dim ds As ChartDataSeries = dsc.InsertNewSeries(DataCollectionCounter)

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 28 December 2017, 2:36 pm EST

  Hello,

  This is to check whether the above suggested approach worked for you/not.

  Also, checking your licensing information, we come to know that you are using quite an old license and since as you mentioned that you are just starting with C1Chart, we would like to inform you that there is another control C1FlexChart, which is an enhanced version and has better performance than C1Chart, which is old now and only its critical bugs are getting fixed. All new features, bug fixes etc are done in new control C1FlexChart.
  
  I have attached a sample application that replicates to what you did using C1Chart.
  
  Note: In order to use C1FlexChart you need to have new ComponentOne license. For this I suggest you to download a trial version from our website and try using C1FlexChart.
  
  For complete information about C1FlexChart, you can refer to the following Documentation:
  
  http://help.grapecity.com/componentone/NetHelp/FlexChartWin/webframe.html

  In case, you need any help feel free to contact me.

  Thanks.
  
  RuchirC1FlexChart_TrendLinesVB.zip

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 28 December 2017, 7:59 pm EST

  Here is the sample attached again.C1FlexChart_TrendLinesVB1.zip

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 28 December 2017, 7:59 pm EST

  From what I understand by this, you wish the line (be it a TrendLine/Series) to average out the DataSeries edge by edge. If it is soo, then as suggested above using C1FlexChart would be useful. Please refer following image that shows a TrendLine following every curve of chart.
  
  Do let me know if this is what you needed.
  
  

  Regarding the DataCollectionID, you may add a new series anytime, you just need to detect when the DataCollectionID changes and use the following statement to add a new series:

  FlexChart1.Series.Insert(DataCollectionID, New Series() With {.Name = "Downloads", .Binding = "Downloads"})
  

  I have also attached a sample application implementing both using C1FlexChart.

• 

  IT

  • Post Options:
  • Link
    Copy

  Posted 29 December 2017, 11:59 pm EST

  Hello Ruchir,
  
  In your example image above, just the ‘orange’ line point to point without the curved blue would be ideal, but I will make an attempt at the Flex Chart.

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 1 January 2018, 5:37 pm EST

  Hi,

  The Orange line in the above attached image represents the Series and the Blue line represents the TrendLine. So, if you wish to have only the Orange line (Series) then all you need to do is remove/comment the following code in the above attached sample:

  FlexChart1.Series.Add(trendLine) 'comment this line
  

  Let me know if you need any help or face any trouble using C1FlexChart/C1Chart.

  Thanks,
  
  Ruchir Agarwal