Chart on the sales page

[Jim Olive]

I was wondering how the chart in the Sales page in the demo site was created. 

I saw the HTML but couldn't see any logic to create the chart.

[Mike King]

Jim,

All the charts found in the demo application were generated using the PxPlus Smart Charts interface. This includes the following:

• 90 Day revenue by product type (Sales main page)
• Balance owed by Sales Rep (Receivables main page)
• Department sales by Sales rep (Department file maintenance in Settings)

Basically we created queries that retrieved the data and then defined charts for these queries.

For the Sales and Receivable main pages we manually added the [ chart ] short code defining the query and chart names as in:

   [chart CHART_1 query="scrnlib.en;salebydept.q" chart="RevenueByDeptType" size=100%/30]

For the Department file maintenance, we simply used the generator to select and include the chart desired.  It handled the rest including the dynamic updating of the chart while selecting different departments.

Webster+ itself uses the newer PxPlus 3D charting engine to display the charts using native HTML 5 and CSS coding.

It should also be noted that all charts rendered by Webster are responsive and have a small [ + ] in the top right corner of the chart which can be used to expand the chart to fill the screen.  This makes it easier to read the chart data when a lot of data points are present.

[Jim Olive]

Thanks -- that helps explain where the charts come from.

I was also looking at the order entry logic and not certain I follow how the page works. It looks like a file maintenance but how does the grid get updated?

[Mike King]

The order entry page is probably the most complex one of the whole demo application.  It not only extends the standard file maintenance but also provides a grid for the entry of order lines.

In answer to your question on how the grid is handled, many of the values in the grid are computed automatically using generated JavaScript on the workstation browser.

Basically we setup the lines in the grid with built in computations so that when the user changes the quantity ordered, the grid itself, locally on the workstation computes the price, tax amount and total weight.  This all done locally inside the browser by the calc=xxxx option in the grid line definitions. 

When you enter a product code into a row on the grid, the system sends an event to the server to fill in both visible and hidden cells in the grid.  These values along with the calculations allow the grid to then compute line and invoice totals as the user changes the quantity ordered.  It even has a hidden field with the most recent quantity in hand so it can estimate if stock exists and adjust shipping qty versus back order quantity.

For example the grid cell which contains the price extension (qty*price) has the following option:

    calc="(dtl_grid:ItemsOrdered==0 ? 1 : dtl_grid:ItemsShipped)*dtl_grid:AdjPrice"

This means the extended price is computed by multiplying the Items shipped (or 1 if Ordercount  is omitted) times the price.

Having these computations done locally on the page Webster can reduce the number of requests needed in the server providing the ability to handle more users with better response times.

There are also events tied to invoice header fields such as ship from location, currency, and client price list so that if these change the grid values get updated.

[Jim Olive]

Thanks, I think I got it.