Sample Plots

Setup

using Pkg; Pkg.activate("$(@__DIR__)/..")
using EChartsLight
using DataFrames
using Dates
using Distributions

  Activating project at `~/Work/scratch/EChartsLight.jl`

Plot Calander (Heatmap)

Plot a heatmap in calendar layout for the year 2024 showing random daily caloric consumption. Click on the legend to automatically filter out values from that range.

function plot_heatmap_cal()
  d = collect(string.(Date(2024,1,1):Day(1):Date(2024,12,31)))
  v = round.(rand(Normal(1500,500), length(d)), digits=0)
  data = zip(d,v) |> collect

  fig = EChart()

  # title
  fig.option.title = Config(top=30, left="center", text="Daily Caloric Intake")

  fig.init.width = "800px"
  fig.init.height = "300px"

  fig.option.series = Config(type="heatmap", coordinateSystem="calendar", data=data)
  fig.option.tooltip = Config(show=true, position="top")
  fig.option.toolbox.show = false

  # VisualMap
  fig.option.visualMap = Config(
          min=0, max=3000, calculable=true, type="piecewise",
          orient="horizontal", left="center", top=55)

  # Calander
  fig.option.calendar = Config(
          range="2024", top=140, left=80, right=30,
          cellSize=["auto", 12],
          yearLabel = Config(show=true),
          itemStyle = Config(borderWidth=0.25))

  fig
end
plot_heatmap_cal()

Scatter Plot

Try using the slider from the colorbar to create a smaller window and observe how the data is filtered in the plot.

function plot_scatter()
  n = 1000
  xdat = 1:n
  ydat = rand(Normal(100, 40), n)  # y-axis

  # 60% from first, 40% from second
  mix = MixtureModel([Normal(1000, 200), Exponential(300)], [0.6, 0.4])  
  clr = rand(mix, n)
  data = zip(xdat, ydat, clr) |> collect


  fig2 = EChart()
  fig2.option.title.text="Simple Scatter Plot"

  fig2.option.series = [
    Config(name="xy plot", type="scatter", symbolSize=8, data=data)
    ]

  fig2.option.xAxis.type = "value"
  fig2.option.yAxis.type = "value"

  fig2.option.visualMap = Config(
      min=minimum(clr),
      max=maximum(clr),
      dimension=2,
      orient="horizontal",
      right="top",
      top="bottom",
      text=["HIGH", "LOW"],
      calculable=true,
      inRange = Config(color=["#f2c31a", "#24b7f2", "#ed0a0aff", "#000000"])
  )


  # Configure tooltip behavior 
  fig2.option.tooltip = Config(
          trigger="item",
          axisPointer = Config(type="cross")
      )

  # Show toolbox
  fig2.option.toolbox.show = true

  fig2
end

plot_scatter()

Line Plot (with range selection)

function plot_line()
  dt = Date(2024,1,1):Day(1):Date(2024,12,31)
  val = rand(Normal(100,20), length(dt))
  data = zip(dt,val) |> collect 

  fig = EChart()
  fig.init.theme="vintage"
  fig.option.title.text = "Line Chart"
  fig.option.xAxis = Config(type="category", boundaryGap=false, data=dt)
  fig.option.yAxis = Config(type="value", boundaryGap=[0, "100%"])

  # fig.option.dataZoom = [
  #   Config(type="inside", start=0),
  #   Config(start=0)
  # ]
  # # "end" is a reserved word so adding like this
  # fig.option.dataZoom[1][:end]=10
  # fig.option.dataZoom[2][:end]=10

  fig.option.series = [
    Config(
      name="Random Data", 
      type="line", 
      symbol="*", 
      sampling="lttb", 
      itemStyle=Config(color="rgb(255,70,131)"),
      data=data
      )
  ]
  fig
end
plot_line()

Plot the line chart above with added zoom option.

fig = plot_line()
fig.option.dataZoom = [
  Config(type="inside", start=0),
  Config(start=0)
]
# "end" is a reserved word so adding like this
# end here refers to the initial start-end window
fig.option.dataZoom[1][:end]=10
fig.option.dataZoom[2][:end]=10
fig