machbase-neo
TQL
CHART()

CHART()

Syntax: CHART(chartOption() [,size()] [, theme()] [, chartJSCode()]) Since v8.0.8

Options

chartOption()

Syntax: chartOption( { json in apache echarts options } )

chartJSCode()

Syntax: chartJSCode( { user javascript code } )

size()

Syntax: size(width, height)

  • width string chart width in HTML syntax ex) '800px'
  • height string chart height in HTML syntax ex) '800px'

theme()

Syntax: theme(name)

  • name string theme name

Apply a chart theme.

Available themes : white, dark, chalk, essos, infographic, macarons, purple-passion, roma, romantic, shine, vintage, walden, westeros, wonderland

Please refer to this section for the preview of the each theme.

plugins()

Syntax: plugins(plugin...)

  • plugin string pre-defined plugin name or url of plugin module.
Pre-defined pluginActual module url
liquidfill/web/echarts/echarts-liquidfill.min.js
wordcloud/web/echarts/echarts-wordcloud.min.js
gl/web/echarts/echarts-gl.min.js

Examples

The new CHART() provides more fine-tunable options to create attractive charts. It is the new version of API that replaces for the previous CHART_LINE(), CHART_BAR(), CHART_SCATTER, CHART_LINE3D, CHART_BAR3D() and CHART_SCATTER3D() functions.

Line

Basic Line ChartBasic Line Chart Basic Area ChartBasic Area Chart Stacked Line ChartStacked Line Chart Stacked Area ChartStacked Area Chart Area PiecesArea Pieces Step LineStep Line Multiple X axesMultiple X axes Multiple Y axesMultiple Y axes Basic MixBasic Mix
Line and Bar Series
Large Area ChartLarge Area Chart
lttb downsampling
Data TransformData Transform Air PassengersAir Passengers Cartesian Coordinate SystemCartesian Coordinate System

Bar

Basic Bar ChartBasic Bar Chart Category BarCategory Bar
GROUP-by-lazy
Stacked Bar NormalizationStacked Bar Normalization
percentage normalize
Negative ValuesNegative Values Tangential Polar BarTangential Polar Bar Large Scale Bar ChartLarge Scale Bar Chart Bar raceBar race

Pie

Basic PieBasic Pie DoughnutDoughnut NightingaleNightingale

Scatter

Basic Scatter ChartBasic Scatter Chart Anscombe's quartetAnscombe's quartet 1M Points1M Points
1 million points

Radar

Basic RadarBasic Radar Custom RadarCustom Radar

Gauge

Basic GaugeBasic Gauge Speed GaugeSpeed Gauge Update GaugeUpdate Gauge

Candlestick

Basic CandlestickBasic Candlestick Stock IndexStock Index Dow-Jones IndexDow-Jones Index

Boxplot

Michelson-Morley ExperimentMichelson-Morley Experiment Iris Sepal LengthIris Sepal Length

GeoJSON

GEOJSON - SeoulGEOJSON - Seoul

Heatmap

Basic HeatmapBasic Heatmap
20K data
Discrete Mapping of ColorsDiscrete Mapping of Colors
20K data
Calendar HeatmapCalendar Heatmap
Year 2023

Liquidfill

Liquid FillLiquid Fill Multiple WavesMultiple Waves Still WavesStill Waves

3D Globe

Hello WorldHello World Airline on GlobeAirline on Globe

3D Bar

3D Bar with Dataset3D Bar with Dataset Stacked 3D BarStacked 3D Bar Transparent 3D BarTransparent 3D Bar

3D Line

Orthographic ProjectionOrthographic Projection

Others

Basic SankeyBasic Sankey Word CloudWord Cloud GEO SVG LinesGEO SVG Lines

Themes 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

FAKE( arrange(1, 100, 1))
MAPVALUE(1, sin(2 * PI * 5 * value(0)/100) )
MAPVALUE(2, sin(2 * PI * 5 * (value(0)+5)/100) )
MAPVALUE(3, sin(2 * PI * 5 * (value(0)+10)/100) )
CHART(  size("500px", "200px"),
        theme("dark"),
        chartOption({
            title:{ text:"theme(dark)" },
            xAxis:{ data:column(0), axisLabel:{show: false} },
            yAxis:{},
            series:[
                {type:"line", data:column(1), name:"series1"},
                {type:"line", data:column(2), name:"series2"},
                {type:"line", data:column(3), name:"series3"},
            ],
            legend:{ bottom: 10 }
        })
)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

SCRIPT({
    for( i = 1; i <= 100; i++) {
        $.yield(
            i,
            Math.sin(2 * Math.PI * 5 * i / 100),
            Math.sin(2 * Math.PI * 5 * (i + 5) / 100),
            Math.sin(2 * Math.PI * 5 * (i + 10) / 100)
        )
    }
})
CHART(  size("500px", "200px"),
        theme("dark"),
        chartOption({
            title:{ text:"theme(dark)" },
            xAxis:{ data:column(0), axisLabel:{show: false} },
            yAxis:{},
            series:[
                {type:"line", data:column(1), name:"series1"},
                {type:"line", data:column(2), name:"series2"},
                {type:"line", data:column(3), name:"series3"},
            ],
            legend:{ bottom: 10 }
        })
)

white

dark

chalk

essos

infographic

macarons

purple-passion

roma

romantic

shine

vintage

walden

westeros

wonderland

Last updated on