Chart-options

This JSON is used to configure chart settings for the custom plotting function Chart(). The chart library uses Highcharts. The following lists several basic configuration fields.

Attributes

            json
            
            
{
    layout: 'single', // Not grouped, displayed separately, default is grouped 'group'
    height: 300,      // Specify height
}

See Also

Remarks

Simple plotting example:

            javascript
            
            
// This chart is an object in JavaScript. Before using the Chart function, you need to declare an object variable chart for configuring the chart
var chart = {
    // This field marks whether the chart is a stock chart. Interested users can change it to false and run to see the effect
    __isStock: true,
    // Zoom tool
    tooltip: {xDateFormat: '%Y-%m-%d %H:%M:%S, %A'},
    // Title
    title : { text : 'Spread Analysis Chart'},
    // Range selector
    rangeSelector: {
        buttons: [{type: 'hour',count: 1, text: '1h'}, {type: 'hour',count: 3, text: '3h'}, {type: 'hour', count: 8, text: '8h'}, {type: 'all',text: 'All'}],
        selected: 0,
        inputEnabled: false
    },
    // Horizontal axis (X-axis), currently set type is datetime
    xAxis: { type: 'datetime'},
    // Vertical axis (Y-axis), default values adjust with data size
    yAxis : {
        // Title
        title: {text: 'Spread'},
        // Whether to enable right-side Y-axis
        opposite: false
    },
    // Data series, this property stores various data series (lines, candlestick charts, labels, etc.)
    series : [
        // Index 0, data array stores data for this index series
        {name : "line1", id : "Line1,buy1Price", data : []},
        // Index 1, dashStyle:'shortdash' is set to display as dashed line
        {name : "line2", id : "Line2,lastPrice", dashStyle : 'shortdash', data : []}
    ]
}
function main(){
    // Call Chart function to initialize the chart
    var ObjChart = Chart(chart)
    // Clear
    ObjChart.reset()
    while(true){
        // Get the timestamp of this polling cycle, i.e., millisecond timestamp, used to determine the position on the chart's X-axis
        var nowTime = new Date().getTime()
        // Get market data
        var ticker = _C(exchange.GetTicker)
        // Get the best bid price from the market data return value
        var buy1Price = ticker.Buy
        // Get the last traded price. To prevent the two lines from overlapping, we add 1
        var lastPrice = ticker.Last + 1
        // Pass timestamp as X value and best bid price as Y value to data series at index 0
        ObjChart.add(0, [nowTime, buy1Price])
        // Same as above
        ObjChart.add(1, [nowTime, lastPrice])
        Sleep(2000)
    }
}