Content


 

The "Turnover chart" report determines the turnover of the last 5 years for the selected customers. For the customers with the largest total sales from these 5 years, a chart is created showing the relative size of the customers and the development over time.

The number of customers shown in the diagram is initially 10; it can be varied by the user. The remaining customers can optionally be displayed in total.
Data collection

Data collection is identical to the first report Sales.
Layout

We create the diagram as a .png file in VB.NET. There are good options for this in VB.NET or you can use one of the numerous graphics packages for VB.NET. We have chosen the ChartDirector Decided.

Please note that if you use ChartDirector productively to create your own charts, you will need a "ChartDirector Developer License for Windows" are required. The license used in CIS mobile for standard diagrams does not cover the development of own diagrams.

Typical section of VB.NET coding:

Vb.net 
  Create an XYChart object of size 500 x 320 pixels, 
' with a pale purpule
 ' (0xffccff) background, a black border, and 1 pixel 3D border effect.
 Dim c As XYChart = New XYChart(CHARTFAC * 650, _
         CHARTFAC * 450, &HEEEEFF, &H0, 1)

 C.setRoundedFrame()

 ' Set the plotarea at (x,y ) and of size...
 C.setPlotArea(CHARTFAC * 70, CHARTFAC * 62, CHARTFAC * 550, _
     CHARTFAC * 300, &HFFFFFF, -1, -1, &HC0C0C0, -1)

 ' Add a legend box 
 C.addLegend2(CHARTFAC * 70, CHARTFAC * 380, 5, "Helvetica", _
   CHARTFAC * 9).setBackground(Chart.Transparent)

 ' Add a Title box to the chart
 Dim title = C.addTitle(ic.MessageText("REPORT_SALES2_TITLE") & _
      " " & SelectedRegions, "Helvetica", CHARTFAC * 10, &HFFFFFF)

 Title.setBackground(&H5D9C)
 Title.setMargin2(0, 0, CHARTFAC * 10, CHARTFAC * 10)

 ' Set the labels on the x axis
 C.xAxis().setLabels(labels)

 Set space between labels
 C.yAxis.setTickDensity(CHARTFAC * 25, -1)

Additional parameters

The diagram is first created for the 10 customers with the highest sales. created. The user then has the option in the display to select a different number of customers instead of 10. a different number of customers. In addition, he can tick that the remaining customers are displayed in total in the diagram, so that the relation of the displayed customers to the total sales can be can be seen.

The individual report options (up to 10 are possible) are stored in the dictionary object "keys". The name in the Dictionary consists of the report ID, the string ".OPTION." and the number 0,1,2,...9. So in our case

Number Of Customers:                  SALES2.OPTION.0
Other customers in total:  SALES2.OPTION.1

When a report is called for the first time, all options are initialized with "". We can assume a default value in this case, e.g. 10 for SALES.OPTION.0, and write the default value back to the dictionary object "keys" so that the option appears with the correct value when the report is first displayed.
 

The VB.NET coding for this looks as follows, where here by Try..Catch for each non-numeric value of the option 0 the default "10". is used:

Vb.net 
' Report options

        ' Option 0: Max customer count 
        Dim Maxcount As Integer = 0

        ' Option 1: with remaining customers
        Dim Withrest As Boolean = False

        Dim Strmaxcount As String = Getitem(keys, "SALES2.OPTION.0")
        Try
            Maxcount = CInt{ "strmaxcount".)
        Catch Ex As Exception
            Maxcount = 10
            InsertItem(keys, "SALES2.OPTION.0", "10")
        End Try

        Withrest = (GetItem(keys, "SALES2.OPTION.1") <> "")
 

An Html page is used to display the report options. It is named "SALES2.OTPIONS.HTML" and is located in the config/reports/views.EN directory (German version). If you support additional languages, accordingly in confgi/reports/views.XX, e.g. config/reports/views.EN for English and config/reports/views.FR for French.

The HTML page is basically arbitrary. For the options you can use input fields <INPUT>, drop-down fields <SELECT> and checkboxes <INPUT TYPE='CHECKBOX'>. The connection to the respective option is established via the HTML-Id d 'OPTION.0', 'OPTION.1',... of the respective element.

In our case, it looks like this:

HTML
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<div style='font-family: Helvetiva; font-size:12px;'></div>

<b>Top-selling customers in a 5-year comparison</b>
<br>
<br>

<span>Number Of Customers:  </span>

 <select size="1" id='OPTION.0' style='font-size:12px'>
      <option  value='1'>1</option>
      <option  value='2'>2</option>
      <option  value='3'>3</option>
      <option  value='4'>4</option>
      <option  value='5'>5</option>
      <option  value='10'>10</option>
      <option  value='15'>15</option>
      <option  value='20'>20</option>
      <option  value='25'>25</option>
      <option  value='30'>30</option>

    </select>

&nbsp;&nbsp;&nbsp;&nbsp;

<input type=checkbox id='OPTION.1'> 
    <span> Show other customers in total   </span>

</body>

</html>
 

Please note:

  • CSS style specifications are only observed below the <BODY> tag, as the HTML coding is copied to the report display.
     
  • The button for reopening the report after entering new options is automatically displayed by CIS mobile