Add Graph

In the APF framework the graph (or chart) control is called cGraph. This page describes how to use it to display data.

Note: The terminology use in this area can be confusing. At IFS we are using the term graph for a control which displays data with a graphical visualization. The more common term is chart. The term graph (as a short for graphic) is commonly used as a more general term than it is used at IFS.

Contents

Creating the Graph

  1. Open the form you wish to add the Graph to.
  2. From the Visual Studio Toolbox, drag the cGraph control onto the form.

Displaying the Graph

To display data in a graph, you need to set up data series with labels.

Use the cGraph.GraphTransferData() method to pass in the Y axis values as a formatted string. 

<cGraph object>.GraphTransferData(<formatted string>);

Use the cGraph.GraphLabelsSet() method to pass in the X axis values as a formatted string, to use as labels in the X axis. 

<cGraph object>.GraphLabelsSet (<formatted string>);

More about the formatted string is described in the section Formatted Graph String.

Note! The cGraph does not support drawing graphs by assigning values to the cGraph.Graph.GraphData collection and calling cGraph.Draw() or cGraph.GraphDraw().

Legends, Axis and Title Texts

The following methods in cGraph can be used to set the legend text, top title and Y and X axis titles. 

<cGraph object>.GraphLegendsSet(<formatted string>);
<cGraph object>.GraphTitleSet("Graph Title");
<cGraph object>.GraphAuxTitlesSet("Bottom Title", "Left Title");

Graph Type and Style

The type and style of the Graph can be set using the cGraph.Graph.GraphType and cGraph.Graph.GraphStyle properties. 

<cGraph object>.Graph.GraphType = <Graph Type Value>
<cGraph object>.Graph.GraphStyle = <Graph Style Value>
Graph Type Value Graph Style Value Graph type

3

0

ClusteredColumn bar chart

1

ClusteredColumn with horizontal alignment

2

StackedColumn bar chart

3

StackedColumn with horizontal alignment

6

 

Line chart

8 & 14

 

Area chart

9

 

Scatterplot

Formatted Graph String

The formatted string is created by concatenating values using the unit separator and in some cases record separator characters. Both unit and record separators are supported by the Graph Control.

When drawing a Graph which only contains a single series, concatenate the Y axis values using the unit separator character (Char 31).

Note: The separator character must be appended as the last character in the formatted string for the Graph to display all values correctly. 

private void ShowGraph()
{
    #region Local Variables
    SalString sData = "";
    SalString sLabels = "";
    #endregion
 
    #region Actions
    this.ccMyGraph.Graph.GraphType = 3;
    this.ccMyGraph.Graph.GraphStyle = 0;
 
    for (int i = 1; i < 11; i++)
    {
        sData = sData + i + ((SalNumber)31).ToCharacter();
        sLabels = sLabels + i + ((SalNumber)31).ToCharacter();
    }
 
    this.ccMyGraph.GraphLabelsSet(sLabels);
    this.ccMyGraph.GraphLegendsSet("Test Graph");
    this.ccMyGraph.GraphTitleSet("Test Graph Title");
    this.ccMyGraph.GraphAuxTitlesSet("Bottom Title", "Left Title");
    this.ccMyGraph.GraphTransferData(sData);
    #endregion
}

Sample code for setting up a graph

If the Graph has to display more than one series of the same type and style then the formatted strings for each series must be created separately as shown above, and these must be concatenated together using the record separator character (Char 30) and passed as the argument in GraphTransferData(). 

sSeries1Data = sSeries1Data + i + Sal.NumberToChar(31);
sSeries2Data = sSeries2Data + (i + 1) + Sal.NumberToChar(31); 
sData = sSeries1Data + Sal.NumberToChar(30) + sSeries2Data;

The different legend text’s can be set by concatenating the Legend text values and passing to the GraphLegendsSet() method.

GraphLegendsSet("Test Graph 1" + Sal.NumberToChar(31) + "Test Graph 2");

Scatterplot Graphs

When drawing a Scatterplot graph, the cGraph.Graph.XPosData collection must be used. The X values are assigned to the cGraph.Graph.XPosData[].Point collection, and the cGraph.Draw() method is called.

this.ccMyGraph.Graph.XPosData[0].Point[i] = <X position value>;
... ... ...
this.ccMyGraph.Draw();

Note: When using scatterplots, labels cannot be set to the X axis. Therefore, using cGraph.GraphLabelsSet() has no effect on the Graph.

The X-axis becomes continuous in scatter plot, and the X-axis labels are generated according to the value range of X values. Hence, manually setting labels for the X-axis is not possible.

Overlay Graphs

Overlay graphs can be used to draw two types of series together in a single graph. While you can draw multiple graphs of the same type using GraphTransferData(), you can only draw one graph using the overlay graph functionality.

To use overlay graphs, the cGraph.Graph.OverlayGraph property must be set, and the cGraph.Graph.OverlayData collection must be used to provide the Y axis values. Type and style information can be given using the relevant properties. You must clear the OverlayData collection before drawing a new graph. The overlay graph will be drawn when the GraphTransferData() method is called.

ccMyGraph.Graph.OverlayGraph = 1;
ccMyGraph.Graph.OverlayGraphType = 6;
ccMyGraph.Graph.OverlayGraphStyle = 0;
... ... ...
ccMyGraph.Graph.OverlayData.Reset();
... ... ...
ccMygraph.Graph.OverlayData[nPoint] = value;

Handling Mouse Events

The graph click events uses the following messages,

The sys.wParam gives the Y axis value, and the sys.lParam gives the graph series clicked.

Note! The cGraph control does not support the PM_GraphHotSpotClick and HOTNOTIFY messages of the QuickGraph control used in Centura. 

private void ccGraph_WindowActions(object sender, WindowActionsEventArgs e)
{
     // Left Click
      case Ifs.Fnd.ApplicationForms.Const.PM_GraphHotSpotLeftClick:
            leftClickHandlerMethod(sender, e);
            Break;
 
      // Right Click
      case Ifs.Fnd.ApplicationForms.Const.PM_GraphHotSpotRightClick:
            rightClickHandlerMethod(sender, e);
            Break;
}

Sample message dispatch

For graphs other than scatter plot, the cGraph.Graph.QuickData property contains the formatted string set using GraphTransferData().

private void leftClickHandlerMethod(object sender, WindowActionsEventArgs e)
{
    #region Local Variables
    SalArray<SalString> sSeriesSet = new SalArray<SalString>();
    SalArray<SalString> sDataSet = new SalArray<SalString>();
    SalNumber nSeriesCount = 0;
    SalNumber nDataCount = 0;
    SalString sDisplayData = "";
    #endregion
 
    #region Actions
    using (new SalContext(this))
    {
        e.Handled = true;
        nSeriesCount = this.ccMyGraph.Graph.QuickData.Tokenize(Sal.NumberToChar(30), Sal.NumberToChar(30), sSeriesSet);
        nDataCount = sSeriesSet[Sys.lParam].Tokenize(Sal.NumberToChar(31), Sal.NumberToChar(31), sDataSet);
        sDisplayData = sDataSet[Sys.wParam];
        Ifs.Fnd.ApplicationForms.Int.AlertBox("The data = " + sDisplayData, "Popup message", Ifs.Fnd.ApplicationForms.Const.INFO_Ok);
    }
    #endregion
}

Sample code accessing graph data

Limitations