Navigation :

linechart

linechart, tile type

The linechart is a tile that displays daily, weekly and monthly time-series.

// Day, Week and Month, the special calendar tables are implicitely created by 'span'
keep span date = [date(2021, 5, 1) .. date(2021, 7, 30)] 

Day.X = random.poisson(5 into Day)
Week.X = sum(Day.X)
Month.X = sum(Day.X)

show linechart "Daily" with Day.X
show linechart "Weekly" with Week.X
show linechart "Monthly" with Month.X

The tile linechart requires the Day table to be defined. The Day table is a special calendar table. It cannot be created by the usual means in Envision. The table Day can be created with span as above, or through a expect [date] in a read block:

read "/orders.csv" as Orders expect [date] with
  "OrderDate" as date : date
  Quantity : number

Day.X = sum(Orders.Quantity)

show linechart "Daily" with Day.X

It is also possible to have multiple lines on the same linechart:

keep span date = [date(2021, 5, 1) .. date(2021, 7, 30)] 

Day.X = random.poisson(5 into Day)
Day.Y = random.uniform(1 into Day, 10 into Day)

show linechart "Daily" with Day.X, Day.Y

Examples

In this example, the axes respectively used for stock quantities and for sales quantities get different scales. This improves the readability of the linechart by limiting the degree of visual overlap between the time-series on display.

keep span date = [date(2021, 5, 3) .. date(2021, 7,6)]

def pure isTuesday(d : date) with
  return d == monday(d) + 1
def pure isWeekend(d: date) with
  return d >= monday(d) + 5

// Flat replenishments of 120 units on Tuesdays.
Day.Restock = if not(isTuesday(date)) then 0 else 120

// Simulating a random demand that increases on the weekend.
Day.Demand = random.ranvar(poisson(15 into Day))
Day.Demand = if isWeekend(date) then floor(Day.Demand * 1.2 + 5) else Day.Demand

// Positive cumulative sum to prevent negative stock.
def process positiveCumsum(n : number) with
  keep sum = 0
  sum = max(0, sum + n)
  return sum

Day.Stock = positiveCumsum(Day.Restock - Day.Demand) scan date
Day.Sales = Day.Stock[-1] - Day.Stock + Day.Restock

show linechart "Stock level simulator" { 1..8, 1..16 ; legendPosition: bottom } with
  Day.Restock as "Daily restock" { seriesType: bar ; unit: " stock" ; color:#7e7 }
  Day.Stock as "End of day stock" { seriesType: bar ; seriesOpacity: 0.6; unit: " stock" ; color:#666 }
  Day.Sales as "Daily sales" { seriesType: line ; color: gray ; seriesStack:"stackSales" ; unit: " sold" }
  Day.Demand - Day.Sales as "Unsatisfied demand" { seriesType: area ; seriesOpacity: 0.6 ; seriesStack:"stackSales" ; unit:" sold"; color:#fa0 }
  if isWeekend(date) then 1 else 0 { seriesType: background ; seriesLegend: hidden ; seriesOpacity: 0.25 ; color: #f99 }
  group by date

Hover over the chart to inspect the daily quantities, or click the tile to enlarge it. The bars use the stock axis, while sales and unsatisfied demand share the sales axis. The shaded backgrounds mark weekends. On narrow screens, scroll the preview horizontally to see the full chart.

A smaller example isolates series styling from the inventory simulation. It combines a stock line, delivery bars, and a shaded weekend background. The legend is below the chart and the left axis has explicit bounds.

keep span date = [date(2024, 1, 1) .. date(2024, 1, 7)]

Day.Delivery = if dayNum(date) == 4 then 20 else 0
Day.Stock = 60 - 5 * dayNum(date) + (if dayNum(date) >= 4 then 20 else 0)
Day.Weekend = if dayNum(date) >= 6 then 1 else 0

review = show region { 1..8, 1..20 }

show linechart "Stock and deliveries" { .., 1..17 in review;
  legend { legendPosition: bottom };
  vaxis { left { axisMin: 0; axisMax: 80; unit: " units" } }
} with
  Day.Stock as "Stock" { seriesType: line; color: blue; unit: " units" }
  Day.Delivery as "Delivery" { seriesType: bar; color: orange; seriesOpacity: 0.6; unit: " units" }
  Day.Weekend { seriesType: background; color: blue; seriesOpacity: 0.15; seriesLegend: hidden }

The orange bar on January 4 shows 20 delivered units. The blue stock line rises on that date, and the background shades January 6 and 7. Hover over the chart to inspect the daily quantities. seriesOpacity softens the delivery bars and weekend shading. seriesLegend: hidden excludes the background series from the legend without removing its shading.

The stock and delivery series use the same unit and scale. Axis declarations belong in the nested axis scope; series declarations belong after each data expression. This distinction also applies to the longer example above.

StyleCode

In region-based dashboards, StyleCode attaches to the tile, legend, axes, and each series. The series type determines its available child elements.

The legacy dashboard attachment points are listed below.

For generic StyleCode rules, see stylecode.

User Contributed Notes

0 notes + add a note