Item card

Adding a Chart Element

  • In the chart_elements table we define wich dataseries are available in the Item Card in the Inventory Module. The chart elements are both displayed in the grid and in the chart.
  • Chart element can only be based on data elements that come from a stored table or a view (not client calculated elements).
  • Chart element usually depend on data element but some of the standard (non customiseable elements) depend on a function and the data_element_id is set as -1

Step 1

Adding new data serie to data_element_series

Step 2

Insert into to chart_elements

chart_elements

  • id (int) - required: The id of the element you are creating, must be unique
  • name (nvarchar) - required: The name you give the element
  • chart_label (nvarchar) - not required:
  • description (nvarchar) - not required:
  • data_element_id (int) - required: The id of the data serie in table data_element_series, if it’s calculated in a function set id = -1
  • starts_stops_today (nvarchar) - not required:
  • aggregation_calc_func (nvarchar) - required: Possible aggregation: AVG, SUM
  • aggregated_over_period (bit) - not required: 1, if you want it to be aggregated over period; 0, otherwise. For example the standard expected stock data element is not aggregated over period so it is always shown on a daily level even though you are looking at a monthly view
  • hidden_in_charts (bit) - required: 1, if you want the chart element to be hidden in chart; 0, otherwise
  • editable (bit) - required: 1, if you want the chart element to be editable; 0, otherwise
  • editable_element_id (int) - required: If the chart element is editable you can define another element that is updated if the element was calculated
  • highcharts_series_options (nvarchar) - not required: In this column you can define specific chart settings for the chart_element which overrides the default highchart settings in the settings table. See this documentation for further info.

Highchart series options

Here is a more detailed documentation on how to use different highcharts_series_options to configure your chart elements, adapted from the Highchart Series Option documentation.

Basic series options

"id":"string"

This id corresponds to the name you give the element e.g. for the historical stock the name is stock_history so we set "id":"stock_history"

"name":"string"

This name setting is what we want the chart label to read, e.q. for historical stock we want the chart label to read Stock so we set "name":"STOCK" and add an appropriate cloud or local translation.

"data":[]

The data setting is always set up empty since the data points are retrived with the corresponding data_element_id information from the data_element_series table.

"color":"string"

This sets the color and the color format can read both HEX color code and RGB color code. Here is a link to a nice website were HEX and RGB colors can be picked as well as color pallets.

Advanced series options

"type":"column"

This type is used for visualizing most of the data in the Item Chart such as Sale - Adjusted, Demand from Stores and Purchase Plan Calculated. The following series options are specifically for the type "column":

  • "pointWidth": number - This is the horizontal length of the columns. Columns that should be wider should have higher "pointWidht".

Example - Disappearing columns handled with "pointWidth"

When columns ‘disappear’ it is usually because they have similar values on the same date. If we look at the figure below we can see that Purchase Plan Calculated has a higher "zIndex" than Sale - Forecast and is thus infront. The forecast disappears since both data series have "pointWidth":6.

Before:

create

Now if we set the point width of Purchase Plan Calculated to 2, that is "pointWidth":2, the columns of the serie aren’t as wide and we are able to see the forecast serie that is behind the purchase plan.

After:

create

  • "pointPlacement":number - This setting defines the placement of columns, with a numerical value, between points on the x-axis (the time axis), where 0 is on the axis value, -0.5 is between this value and the previous, and 0.5 is between this value and the next. This setting can be useful, e.g. if you feel like column values on the same day/week/month are too clustered. Then you can move the columns slightly away from each other for a better visualization of the data.

Example - Clustered columns handled with "pointPlacement"

When we have several columns on the same date they tend to cluster together making it hard to visualize the elements sometimes. The figure below shows how the data series Sale - Forecast, Demand from Stores and Purchase Plan Calculated are clustered together.

Before:

create

Now if we use the "pointPlacement":number setting we can move Demand from Stores slightly to the left and Purchase Plan Calculated slightly to the right. It is configured with these JSON strings:

-- Moving Purchase Plan Calcualated to the right
{
    "id":"purchase_plan_calc",
    "name":"PURCHASE_PLAN_CALC",
    "data":[],
    "color":"#5d04a5",
    "type":"column",
    "pointWidth":3,
    "pointPlacement":0.4,
    "legendIndex":20,
    "zIndex":30
}
 -- Moving Demand from Stores to the left
 {
    "id":"demand_from_stores",
    "name":"demand_from_stores",
    "data":[],
    "color":"rgba(16,200,74)",
    "type":"column",
    "pointWidth":4,
    "pointPlacement":-0.4,
    "legendIndex":6,
    "zIndex":15,
    "tooltip":{"valueDecimals":1}
}

The results are shown in the figure below and we can see that the three data series aren’t as clustered as before:

After:

create

Note that having a higher "pointPlacement" than 0.5 (or -0.5) results in too much shift of the columns on a ‘Day’ level.

"type":"line"

This type is used for visualizing markers or horizontal lines such as Stockout and Minimum stock level, respectively. The following series options are specifically for the type "line":

  • "lineWidth":number - This setting defines the thickness of the line, defaults to 2. When the line between data points should not be visible in the Item Chart this setting should be set to zero, that is “lineWidth”:0 (used e.g. for the visiualization of Sale - Original).
  • "marker":"{"enabled":boolean, "symbol":"string", "radius":number, "lineWidth":number }" - This setting is used when configuring the markers.
    • The "enabled":boolean sub-setting decides if the marker is visible or not. It is usually undefined but if the series is large (has many data points) it is automatically detected and set to "enabled":false. For Minimum stock level element it should for example be set to false.
    • The "symbol":"string" sub-setting sets the shape of the marker. Possible "symbol" values are: “circle”, “square”, “diamond”, “triangle” and “triangle-down”.
    • The "radius":number sub-setting is simple, how big do you want your markers to be? It defaults to "radius":4.
    • The "lineWidth":number sub-setting defines how thick the line around the marker should be, defaults to 0.
  • "dashStyle":"dash" - This setting defines the dash style of the line, defaults to “solid”. If setting up a dashed line the most simple style is “dash”. Other possible dash styles are:
    • “shortDash”
    • “ShortDot”
    • “shortDashDot”
    • “shortDashDotDot”
    • “dot”
    • “longDash”
    • “dashDot”
    • “longDashDot”
    • “longDashDotDot”

"type":"area"

This type is used for visualizing the historical and estimated stock. The following series options are specifically for the type "area":

  • "step":boolean - This setting is used when visualizing the steps in the stock and should be set to true.

"fillOpacity":number

This setting defines how transparent the fill color of the area is. This is a number between 0 and 1, often called the alpha value in RGB format (making it RGBA). If the value is set to 0 there is no fill and if it is set to 1 it is the same color as the line. It defaults to 0.75.

"legendIndex":number

This is the sequential index of the series in the legend. If two or more series have the same index the order in the legend depends on the "index":number setting. The legends are ordered by ascending index. It is probably easire to give each element a unique "legendIndex" to have a better overview of the indexing. But if you want to ‘group’ some legends together so they always have the same order within the group it is possible to set the "legendIndex" the same for the elements you want to group together and then use the "index" to set the order of the elements within the group.

"zIndex":"string"

This setting decides the z-index (the depth) of the series. This means that series with the highest z-index are ‘drawn’ last and are thus ‘in front’ of the other series that have a lower z-index. The z-index can be negative so if you want to add a new chart element that should always be behind the other elements you could set the z-index to a large negative number.

"stack":number/"string"

This is the ‘id’ or the ‘group’ of a stack. If you want to stack two different columns you could give them the stack number 1, that is "stack":1. You could also name the stack something more descriptive such as "stack":"Sale" and then all the the series that have the series option "stack":"Sale" would be stacked together.

  • A setting closely connected to "stack" is the "stacking":"string". It needs to be set when using "stack", otherwise the stacking is disabled by default. It has possible values “normal” and “percent”. The “normal” setting value is the standard way of stacking, meaning that columns are stacked up on one another. The stacking order depends on the "index":number setting, the higher the index - the lower it stacks. See this Stack Overflow question for an example on how to stack properly.

Example - Stacking

If a customer has made a Baseline Plan and planned for Promotions we would like these two columns to stack so the customer could visualize the total demand that drives the replenishment. The two series would then be configured by setting a normal stacking, setting the desired index of the order of the stacking and finally adding the two series to a new stack. The stack can be a number or a string, in this example it is the string 'Planner'.

The input

-- The Baseline Plan
{
    "id":"planner_baseline",
    "name":"PLANNER_BASELINE",
    "data":[],
    "color":"#F15226",
    "type":"column",
    "legendIndex":19,
    "zIndex":11,
    "index":2,    
    "pointPlacement":0.08,
    "stacking":"normal",
    "stack":"Planner"
}

-- The Promotional plan
{
    "id":"planner_promo",
    "name":"PLANNER_PROMO",
    "data":[],
    "color":"#37500A",
    "type":"column",
    "legendIndex":21,
    "zIndex":13,
    "index":1,    
    "pointPlacement":0.08,
    "stacking":"normal",
    "stack":"Planner"
}

The output

create

"dataLabels":{"enabled:boolean"}

This setting configures the series data labels that appear next to each data point. It has many different options but one of the more useful ones is the "enabled:boolean". It is by default false so the data labels aren’t shown. If you however want to display the values for each data point of a series you would simple add "dataLabels":{"enabled:true"}. In the figure below it has been done to the Demand from Stores series with this JSON string:

{
    "id":"demand_from_stores",
    "name":"demand_from_stores",
    "data":[],
    "color":"rgb(16,200,74)",
    "type":"column",
    "pointWidth":4,
    "legendIndex":6,
    "zIndex":15,
    "dataLabels":{"enabled":true},     
    "tooltip":{"valueDecimals":1}
}

create

"tooltip":"{"enabled":boolean, "valueDecimals":number}"

This sets the settings of the tooltip that appears when the user hovers over a series in the Item Card chart. There are a lot of different settings for the tooltip but the most used are the following.

  • The “enabled” setting can be used to disable the tooltip if needed, by setting it to false, it defaults to true.
  • The “valueDecimals” setting is used when dealing with decimal values. If you have a number that is 1.234 but you want to round it up to one decimal place then the setting is set to "valueDecimals":1 and the output will be 1.2.

"stickyTracking":boolean

This setting is true by default. The sticky tracking should be true for all series except the stock series. See this Stack Overflow question for more detailed description of this series setting.


Adding product pictures

The system has the ability to show product pictures in the Item Card. The pictures need to be available on the web and some info that gives us the ability to link to the specific product must be present within the link.

create

Examples

We need to know how our customers store their product pictures. In System settings you can fill in the fields image lookup property, postfix and prefix.

create

If the customer provides the whole image link instead of just a pre and post fix, simply fill in the field that you are using in the items table for the image path, and leave the postfix and prefix fields empty.

create