Chart

Custom chart binding function.

    
    
    
Chart(options)

Examples

• Multi-chart binding configuration:

  • extension.layout property
    If this property is set with value "single", charts will not be stacked (will not display as tabbed pages), but will be displayed individually (tiled display).
  • extension.height property
    This property is used to set the chart height, value can be numeric type, or set in "300px" format.
  • extension.col property
    This property is used to set the chart width, page width is divided into 12 units total, setting to 8 means this chart occupies 8 units of width.
  • javascript
  • python
  • cpp

  
      javascript
      
      
  function main() {
      var cfgA = {
          extension: {
              layout: 'single', // Do not participate in grouping, display individually, default is grouping 'group'
              height: 300, // Specify height
          },
          title: {
              text: 'Order Book Chart'
          },
          xAxis: {
              type: 'datetime'
          },
          series: [{
              name: 'Bid 1',
              data: [],
          }, {
              name: 'Ask 1',
              data: [],
          }]
      }
      var cfgB = {
          title: {
              text: 'Spread Chart'
          },
          xAxis: {
              type: 'datetime'
          },
          series: [{
              name: 'Spread',
              type: 'column',
              data: [],
          }]
      }
  
      var cfgC = {
          __isStock: false,
          title: {
              text: 'Pie Chart'
          },
          series: [{
              type: 'pie',
              name: 'one',
              data: [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25],
              ]  // After specifying initial data, no need to use add function to update, directly modify chart configuration to update series
          }]
      };
      var cfgD = {
          extension: {
              layout: 'single',
              col: 8, // Specify width unit value occupied, total value is 12
              height: '300px',
          },
          title: {
              text: 'Order Book Chart'
          },
          xAxis: {
              type: 'datetime'
          },
          series: [{
              name: 'Bid 1',
              data: [],
          }, {
              name: 'Ask 1',
              data: [],
          }]
      }
      var cfgE = {
          __isStock: false,
          extension: {
              layout: 'single',
              col: 4,
              height: '300px',
          },
          title: {
              text: 'Pie Chart 2'
          },
          series: [{
              type: 'pie',
              name: 'one',
              data: [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25],
              ]
          }]
      };
  
      var chart = Chart([cfgA, cfgB, cfgC, cfgD, cfgE]);
      chart.reset()
          // Add a data point to pie chart, add can only update data points added through add method, built-in data points cannot be updated later
      chart.add(3, {
          name: "ZZ",
          y: Math.random() * 100
      });
      while (true) {
          Sleep(1000)
          var ticker = exchange.GetTicker()
          if (!ticker) {
              continue;
          }
          var diff = ticker.Sell - ticker.Buy
          cfgA.subtitle = {
              text: 'Bid ' + ticker.Buy + ', Ask ' + ticker.Sell,
          };
          cfgB.subtitle = {
              text: 'Spread ' + diff,
          };
  
          chart.add([0, [new Date().getTime(), ticker.Buy]]);
          chart.add([1, [new Date().getTime(), ticker.Sell]]);
          // Equivalent to updating the first data series of the second chart
          chart.add([2, [new Date().getTime(), diff]]);
          chart.add(4, [new Date().getTime(), ticker.Buy]);
          chart.add(5, [new Date().getTime(), ticker.Buy]);
          cfgC.series[0].data[0][1] = Math.random() * 100;
          cfgE.series[0].data[0][1] = Math.random() * 100;
          // update actually equals resetting the chart configuration
          chart.update([cfgA, cfgB, cfgC, cfgD, cfgE]);
      }
  }
  

  
      python
      
      
  import random
  import time
  def main():
      cfgA = {
          "extension" : {
              "layout" : "single",
              "height" : 300,
              "col" : 8
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "xAxis" : {
              "type" : "datetime"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      }
  
      cfgB = {
          "title" : {
              "text" : "Spread Chart"
          },
          "xAxis" : {
              "type" : "datetime",
          },
          "series" : [{
              "name" : "Spread",
              "type" : "column",
              "data" : []
          }]
      }
  
      cfgC = {
          "__isStock" : False,
          "title" : {
              "text" : "Pie Chart"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25],
              ]
          }]
      }
  
      cfgD = {
          "extension" : {
              "layout" : "single",
              "col" : 8,
              "height" : "300px"
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      }
  
      cfgE = {
          "__isStock" : False,
          "extension" : {
              "layout" : "single",
              "col" : 4,
              "height" : "300px"
          },
          "title" : {
              "text" : "Pie Chart 2"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25]
              ]
          }]
      }
  
      chart = Chart([cfgA, cfgB, cfgC, cfgD, cfgE])
      chart.reset()
      chart.add(3, {
          "name" : "ZZ",
          "y" : random.random() * 100
      })
  
      while True:
          Sleep(1000)
          ticker = exchange.GetTicker()
          if not ticker :
              continue
          diff = ticker["Sell"] - ticker["Buy"]
          cfgA["subtitle"] = {
              "text" : "Bid " + str(ticker["Buy"]) + " Ask " + str(ticker["Sell"])
          }
          cfgB["subtitle"] = {
              "text" : "Spread " + str(diff)
          }
  
          chart.add(0, [time.time() * 1000, ticker["Buy"]])
          chart.add(1, [time.time() * 1000, ticker["Sell"]])
          chart.add(2, [time.time() * 1000, diff])
          chart.add(4, [time.time() * 1000, ticker["Buy"]])
          chart.add(5, [time.time() * 1000, ticker["Buy"]])
          cfgC["series"][0]["data"][0][1] = random.random() * 100
          cfgE["series"][0]["data"][0][1] = random.random() * 100
  

  
      c++
      
      
  void main() {
      json cfgA = R"({
          "extension" : {
              "layout" : "single",
              "height" : 300,
              "col" : 8
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "xAxis" : {
              "type" : "datetime"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      })"_json;
  
      json cfgB = R"({
          "title" : {
              "text" : "Spread Chart"
          },
          "xAxis" : {
              "type" : "datetime"
          },
          "series" : [{
              "name" : "Spread",
              "type" : "column",
              "data" : []
          }]
      })"_json;
  
      json cfgC = R"({
          "__isStock" : false,
          "title" : {
              "text" : "Pie Chart"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25]
              ]
          }]
      })"_json;
  
      json cfgD = R"({
          "extension" : {
              "layout" : "single",
              "col" : 8,
              "height" : "300px"
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      })"_json;
  
      json cfgE = R"({
          "__isStock" : false,
          "extension" : {
              "layout" : "single",
              "col" : 4,
              "height" : "300px"
          },
          "title" : {
              "text" : "Pie Chart 2"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25]
              ]
          }]
      })"_json;
  
      auto chart = Chart({cfgA, cfgB, cfgC, cfgD, cfgE});
      chart.reset();
      json zz = R"({
          "name" : "ZZ",
          "y" : 0
      })"_json;
      zz["y"] = rand() % 100;
      chart.add(3, zz);
  
      while(true) {
          Sleep(1000);
          auto ticker = exchange.GetTicker();
          if(!ticker.Valid) {
              continue;
          }
          auto diff = ticker.Sell - ticker.Buy;
          json cfgASubTitle = R"({"text" : ""})"_json;
          cfgASubTitle["text"] = format("Bid 1 %f, Ask 1 %f", ticker.Buy, ticker.Sell);
          cfgA["subtitle"] = cfgASubTitle;
  
          json cfgBSubTitle = R"({"text" : ""})"_json;
          cfgBSubTitle["text"] = format("Spread %f", diff);
          cfgB["subtitle"] = cfgBSubTitle;
  
          chart.add(0, {Unix() * 1000, ticker.Buy});
          chart.add(1, {Unix() * 1000, ticker.Sell});
          chart.add(2, {Unix() * 1000, diff});
          chart.add(4, {Unix() * 1000, ticker.Buy});
          chart.add(5, {Unix() * 1000, ticker.Buy});
          cfgC["series"][0]["data"][0][1] = rand() % 100;
          cfgE["series"][0]["data"][0][1] = rand() % 100;
          chart.update({cfgA, cfgB, cfgC, cfgD, cfgE});
      }
  }
  

• Simple charting example:

  • javascript
  • python
  • cpp

  
      javascript
      
      
  // This chart is an object in JavaScript language. Before using the Chart function, we need to declare an object variable chart to configure the chart
  var chart = {
      // This field marks whether the chart is a general 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
      },
      // X-axis of coordinate system, currently set type is: time
      xAxis: { type: 'datetime'},
      // Y-axis of coordinate system, default values adjust according to data size
      yAxis : {
          // Title
          title: {text: 'Spread'},
          // Whether to enable right 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 : "Line 1,buy1Price", data : []},
          // Index 1, set dashStyle:'shortdash' to create dashed line
          {name : "line2", id : "Line 2,lastPrice", dashStyle : 'shortdash', data : []}
      ]
  }
  
  function main(){
      // Call Chart function to initialize chart
      var ObjChart = Chart(chart)
      // Clear
      ObjChart.reset()
      while(true){
          // Get timestamp for current polling, i.e., a millisecond-level timestamp to determine X-axis position in chart
          var nowTime = new Date().getTime()
          // Get market data
          var ticker = _C(exchange.GetTicker)
          // Get bid price from market data return value
          var buy1Price = ticker.Buy
          // Get last traded price, add 1 to prevent line overlap
          var lastPrice = ticker.Last + 1
          // Use timestamp as X value, bid price as Y value, pass to data series at index 0
          ObjChart.add(0, [nowTime, buy1Price])
          // Same as above
          ObjChart.add(1, [nowTime, lastPrice])
          Sleep(2000)
      }
  }
  

  
      python
      
      
  import time
  chart = {
      "__isStock" : True,
      "tooltip" : {"xDateFormat" : "%Y-%m-%d %H:%M:%S, %A"},
      "title" : {"text" : "Spread Analysis Chart"},
      "rangeSelector" : {
          "buttons" : [{"type": "count", "count": 1, "text": "1h"}, {"type": "hour", "count": 3, "text": "3h"}, {"type": "hour", "count": 8, "text": "8h"}, {"type": "all", "text": "All"}],
          "selected": 0,
          "inputEnabled": False
      },
      "xAxis": {"type": "datetime"},
      "yAxis": {
          "title": {"text": "Spread"},
          "opposite": False
      },
      "series": [{
          "name": "line1", "id": "Line 1,buy1Price", "data": []
      }, {
          "name": "line2", "id": "Line 2,lastPrice", "dashStyle": "shortdash", "data": []
      }]
  }
  def main():
      ObjChart = Chart(chart)
      ObjChart.reset()
      while True:
          nowTime = time.time() * 1000
          ticker = exchange.GetTicker()
          buy1Price = ticker["Buy"]
          lastPrice = ticker["Last"] + 1
          ObjChart.add(0, [nowTime, buy1Price])
          ObjChart.add(1, [nowTime, lastPrice])
          Sleep(2000)
  

  
      c++
      
      
  void main() {
      // When writing strategies in C++, try to avoid declaring non-basic type global variables, so chart configuration object is declared inside main function
      json chart = R"({
          "__isStock" : true,
          "tooltip" : {"xDateFormat" : "%Y-%m-%d %H:%M:%S, %A"},
          "title" : {"text" : "Spread Analysis Chart"},
          "rangeSelector" : {
              "buttons" : [{"type": "count", "count": 1, "text": "1h"}, {"type": "hour", "count": 3, "text": "3h"}, {"type": "hour", "count": 8, "text": "8h"}, {"type": "all", "text": "All"}],
              "selected": 0,
              "inputEnabled": false
          },
          "xAxis": {"type": "datetime"},
          "yAxis": {
              "title": {"text": "Spread"},
              "opposite": false
          },
          "series": [{
              "name": "line1", "id": "Line 1,buy1Price", "data": []
          }, {
              "name": "line2", "id": "Line 2,lastPrice", "dashStyle": "shortdash", "data": []
          }]
      })"_json;
      auto ObjChart = Chart(chart);
      ObjChart.reset();
      while(true) {
          auto nowTime = Unix() * 1000;
          auto ticker = exchange.GetTicker();
          auto buy1Price = ticker.Buy;
          auto lastPrice = ticker.Last + 1.0;
          ObjChart.add(0, {nowTime, buy1Price});
          ObjChart.add(1, {nowTime, lastPrice});
          Sleep(2000);
      }
  }
  

• Trigonometric curve plotting example:

  • javascript
  • python
  • cpp

  
      javascript
      
      
  // Object for initializing the chart
  var chart = {
      // Chart title
      title: {text: "Line value triggers plotLines value"},
      // Y-axis related settings
      yAxis: {
          // Horizontal lines perpendicular to Y-axis, used as trigger lines, is a structure array that can set multiple trigger lines
          plotLines: [{
              // Trigger line value, this line will be displayed at the corresponding numerical position
              value: 0,
              // Set trigger line color
              color: 'red',
              // Width
              width: 2,
              // Display label
              label: {
                  // Label text
                  text: 'Trigger Value',
                  // Label position centered
                  align: 'center'
              }
          }]
      },
      // X-axis related settings, here set type as time axis
      xAxis: {type: "datetime"},
      series: [
          {name: "sin", type: "spline", data: []},
          // This is an important data series, multiple data series can be set, controlled by array index
          {name: "cos", type: "spline", data: []}
      ]
  }
  function main(){
      // Pi
      var pi = 3.1415926535897
      // Variable for recording timestamp
      var time = 0
      // Angle
      var angle = 0
      // Coordinate y value, used to receive sine and cosine values
      var y = 0
      // Call API interface, use chart object to initialize chart
      var objChart = Chart(chart)
      // Clear chart on initialization
      objChart.reset()
      // Set trigger line value to 1
      chart.yAxis.plotLines[0].value = 1
      // Loop
      while(true){
          // Get current timestamp
          time = new Date().getTime()
          // Every 500ms angle increases by 5 degrees, calculate sine value
          y = Math.sin(angle * 2 * pi / 360)
          // Write calculated y value to corresponding index data series in chart, first parameter of add function is specified data series index
          objChart.add(0, [time, y])
          // Calculate cosine value
          y = Math.cos(angle * 2 * pi / 360)
          objChart.add(1, [time, y])
          // Increase by 5 degrees
          angle += 5
          // Pause for 5 seconds to avoid too frequent plotting and rapid data growth
          Sleep(5000)
      }
  }
  

  
      python
      
      
  import math
  import time
  chart = {
      "title": {"text": "Line value triggers plotLines value"},
      "yAxis": {
          "plotLines": [{
              "value": 0,
              "color": "red",
              "width": 2,
              "label": {
                  "text": "Trigger Value",
                  "align": "center"
              }
          }]
      },
      "xAxis": {"type": "datetime"},
      "series": [{"name": "sin", "type": "spline", "data": []},
                 {"name": "cos", "type": "spline", "data": []}]
  }
  def main():
      pi = 3.1415926535897
      ts = 0
      angle = 0
      y = 0
      objChart = Chart(chart)
      objChart.reset()
      chart["yAxis"]["plotLines"][0]["value"] = 1
      while True:
          ts = time.time() * 1000
          y = math.sin(angle * 2 * pi / 360)
          objChart.add(0, [ts, y])
          y = math.cos(angle * 2 * pi / 360)
          objChart.add(1, [ts, y])
          angle += 5
          Sleep(5000)
  

  
      c++
      
      
  void main() {
      json chart = R"({
          "title": {"text": "Line value triggers plotLines value"},
          "yAxis": {
              "plotLines": [{
                  "value": 0,
                  "color": "red",
                  "width": 2,
                  "label": {
                      "text": "Trigger Value",
                      "align": "center"
                  }
              }]
          },
          "xAxis": {"type": "datetime"},
          "series": [{"name": "sin", "type": "spline", "data": []},
                     {"name": "cos", "type": "spline", "data": []}]
      })"_json;
  
      auto pi = 3.1415926535897;
      auto ts = 0;
      auto angle = 0.0;
      auto y = 0.0;
      auto objChart = Chart(chart);
      objChart.reset();
      chart["yAxis"]["plotLines"][0]["value"] = 1;
      while(true) {
          ts = Unix() * 1000;
          y = sin(angle * 2 * pi / 360);
          objChart.add(0, {ts, y});
          y = cos(angle * 2 * pi / 360);
          objChart.add(1, {ts, y});
          angle += 5;
          Sleep(5000);
      }
  }
  

• Complex example using mixed charts:

  • javascript
  • python
  • cpp

  
      javascript
      
      
  /*backtest
  start: 2020-03-11 00:00:00
  end: 2020-04-09 23:59:00
  period: 1d
  exchanges: [{"eid":"Bitfinex","currency":"BTC_USD"}]
  */
  
  var chartCfg = {
      subtitle: {
          text: "subtitle",
      },
      yAxis: [{
          height: "40%",
          lineWidth: 2,
          title: {
              text: 'PnL',
          },
          tickPixelInterval: 20,
          minorGridLineWidth: 1,
          minorTickWidth: 0,
          opposite: true,
          labels: {
              align: "right",
              x: -3,
          }
      }, {
          title: {
              text: 'Profit',
          },
          top: "42%",
          height: "18%",
          offset: 0,
          lineWidth: 2
      }, {
          title: {
              text: 'Vol',
          },
          top: '62%',
          height: '18%',
          offset: 0,
          lineWidth: 2
      }, {
          title: {
              text: 'Asset',
          },
          top: '82%',
          height: '18%',
          offset: 0,
          lineWidth: 2
      }],
      series: [{
          name: 'PnL',
          data: [],
          id: 'primary',
          tooltip: {
              xDateFormat: '%Y-%m-%d %H:%M:%S'
          },
          yAxis: 0
      }, {
          type: 'column',
          lineWidth: 2,
          name: 'Profit',
          data: [],
          yAxis: 1,
      }, {
          type: 'column',
          name: 'Trade',
          data: [],
          yAxis: 2
      }, {
          type: 'area',
          step: true,
          lineWidth: 0,
          name: 'Long',
          data: [],
          yAxis: 2
      }, {
          type: 'area',
          step: true,
          lineWidth: 0,
          name: 'Short',
          data: [],
          yAxis: 2
      }, {
          type: 'line',
          step: true,
          color: '#5b4b00',
          name: 'Asset',
          data: [],
          yAxis: 3
      }, {
          type: 'pie',
          innerSize: '70%',
          name: 'Random',
          data: [],
          center: ['3%', '6%'],
          size: '15%',
          dataLabels: {
              enabled: false
          },
          startAngle: -90,
          endAngle: 90,
      }],
  };
  
  function main() {
      let c = Chart(chartCfg);
      let preTicker = null;
      while (true) {
          let t = exchange.GetTicker();
  
          c.add(0, [t.Time, t.Last]); // PnL
          c.add(1, [t.Time, preTicker ? t.Last - preTicker.Last : 0]); // profit
          let r = Math.random();
          var pos = parseInt(t.Time/86400);
          c.add(2, [t.Time, pos/2]); // Vol
          c.add(3, [t.Time, r > 0.8 ? pos : null]); // Long
          c.add(4, [t.Time, r < 0.8 ? -pos : null]); // Short
          c.add(5, [t.Time, Math.random() * 100]); // Asset
          // update pie
          chartCfg.series[chartCfg.series.length-1].data = [
              ["A", Math.random()*100],
              ["B", Math.random()*100],
           ];
          c.update(chartCfg)
          preTicker = t;
      }
  }
  

  
      python
      
      
  '''backtest
  start: 2020-03-11 00:00:00
  end: 2020-04-09 23:59:00
  period: 1d
  exchanges: [{"eid":"Bitfinex","currency":"BTC_USD"}]
  '''
  
  import random
  
  chartCfg = {
      "subtitle": {
          "text": "subtitle"
      },
      "yAxis": [{
          "height": "40%",
          "lineWidth": 2,
          "title": {
              "text": 'PnL'
          },
          "tickPixelInterval": 20,
          "minorGridLineWidth": 1,
          "minorTickWidth": 0,
          "opposite": True,
          "labels": {
              "align": "right",
              "x": -3
          }
      }, {
          "title": {
              "text": 'Profit'
          },
          "top": "42%",
          "height": "18%",
          "offset": 0,
          "lineWidth": 2
      }, {
          "title": {
              "text": 'Vol'
          },
          "top": '62%',
          "height": '18%',
          "offset": 0,
          "lineWidth": 2
      }, {
          "title": {
              "text": 'Asset'
          },
          "top": '82%',
          "height": '18%',
          "offset": 0,
          "lineWidth": 2
      }],
      "series": [{
          "name": 'PnL',
          "data": [],
          "id": 'primary',
          "tooltip": {
              "xDateFormat": '%Y-%m-%d %H:%M:%S'
          },
          "yAxis": 0
      }, {
          "type": 'column',
          "lineWidth": 2,
          "name": 'Profit',
          "data": [],
          "yAxis": 1
      }, {
          "type": 'column',
          "name": 'Trade',
          "data": [],
          "yAxis": 2
      }, {
          "type": 'area',
          "step": True,
          "lineWidth": 0,
          "name": 'Long',
          "data": [],
          "yAxis": 2
      }, {
          "type": 'area',
          "step": True,
          "lineWidth": 0,
          "name": 'Short',
          "data": [],
          "yAxis": 2
      }, {
          "type": 'line',
          "step": True,
          "color": '#5b4b00',
          "name": 'Asset',
          "data": [],
          "yAxis": 3
      }, {
          "type": 'pie',
          "innerSize": '70%',
          "name": 'Random',
          "data": [],
          "center": ['3%', '6%'],
          "size": '15%',
          "dataLabels": {
              "enabled": False
          },
          "startAngle": -90,
          "endAngle": 90
      }]
  }
  
  def main():
      c = Chart(chartCfg)
      preTicker = None
      while True:
          t = exchange.GetTicker()
          c.add(0, [t["Time"], t["Last"]])
          profit = t["Last"] - preTicker["Last"] if preTicker else 0
          c.add(1, [t["Time"], profit])
          r = random.random()
          pos = t["Time"] / 86400
          c.add(2, [t["Time"], pos / 2])
          long = pos if r > 0.8 else None
          c.add(3, [t["Time"], long])
          short = -pos if r < 0.8 else None
          c.add(4, [t["Time"], short])
          c.add(5, [t["Time"], random.random() * 100])
  
          # update pie
          chartCfg["series"][len(chartCfg["series"]) - 1]["data"] = [
              ["A", random.random() * 100],
              ["B", random.random() * 100]
          ]
          c.update(chartCfg)
          preTicker = t
  

  
      c++
      
      
  /*backtest
  start: 2020-03-11 00:00:00
  end: 2020-04-09 23:59:00
  period: 1d
  exchanges: [{"eid":"Bitfinex","currency":"BTC_USD"}]
  */
  
  void main() {
      json chartCfg = R"({
          "subtitle": {
              "text": "subtitle"
          },
          "yAxis": [{
              "height": "40%",
              "lineWidth": 2,
              "title": {
                  "text": "PnL"
              },
              "tickPixelInterval": 20,
              "minorGridLineWidth": 1,
              "minorTickWidth": 0,
              "opposite": true,
              "labels": {
                  "align": "right",
                  "x": -3
              }
          }, {
              "title": {
                  "text": "Profit"
              },
              "top": "42%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }, {
              "title": {
                  "text": "Vol"
              },
              "top": "62%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }, {
              "title": {
                  "text": "Asset"
              },
              "top": "82%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }],
          "series": [{
              "name": "PnL",
              "data": [],
              "id": "primary",
              "tooltip": {
                  "xDateFormat": "%Y-%m-%d %H:%M:%S"
              },
              "yAxis": 0
          }, {
              "type": "column",
              "lineWidth": 2,
              "name": "Profit",
              "data": [],
              "yAxis": 1
          }, {
              "type": "column",
              "name": "Trade",
              "data": [],
              "yAxis": 2
          }, {
              "type": "area",
              "step": true,
              "lineWidth": 0,
              "name": "Long",
              "data": [],
              "yAxis": 2
          }, {
              "type": "area",
              "step": true,
              "lineWidth": 0,
              "name": "Short",
              "data": [],
              "yAxis": 2
          }, {
              "type": "line",
              "step": true,
              "color": "#5b4b00",
              "name": "Asset",
              "data": [],
              "yAxis": 3
          }, {
              "type": "pie",
              "innerSize": "70%",
              "name": "Random",
              "data": [],
              "center": ["3%", "6%"],
              "size": "15%",
              "dataLabels": {
                  "enabled": false
              },
              "startAngle": -90,
              "endAngle": 90
          }]
      })"_json;
  
      Chart c = Chart(chartCfg);
      Ticker preTicker;
      while(true) {
          auto t = exchange.GetTicker();
          c.add(0, {t.Time, t.Last});
          auto profit = preTicker.Valid ? t.Last - preTicker.Last : 0;
          c.add(1, {t.Time, profit});
          auto r = rand() % 100;
          auto pos = t.Time / 86400.0;
          c.add(2, {t.Time, pos / 2.0});
          auto longPos = r > 0.8 ? pos : NULL;
          c.add(3, {t.Time, longPos});
          auto shortPos = r < 0.8 ? -pos : NULL;
          c.add(4, {t.Time, shortPos});
          c.add(5, {t.Time, rand() % 100});
  
          // update pie
          json pie = R"([["A", 0], ["B", 0]])"_json;
          pie[0][1] = rand() % 100;
          pie[1][1] = rand() % 100;
          chartCfg["series"][chartCfg["series"].size() - 1]["data"] = pie;
  
          c.update(chartCfg);
          preTicker = t;
      }
  }
  

• Charts of pie type in the chart are charts without a time axis. When updating data, the chart configuration needs to be updated directly. For example, in the code of the above example, after updating the data, use c.update(chartCfg) to update the chart, as shown below:

  • javascript
  • python
  • cpp

  
      javascript
      
      
  // update pie
  chartCfg.series[chartCfg.series.length-1].data = [
      ["A", Math.random()*100],
      ["B", Math.random()*100],
  ];
  c.update(chartCfg)

  
      python
      
      
  # update pie
  chartCfg["series"][len(chartCfg["series"]) - 1]["data"] = [
      ["A", random.random() * 100],
      ["B", random.random() * 100]
  ]
  c.update(chartCfg)

  
      c++
      
      
  // update pie
  
  json pie = R"([["A", 0], ["B", 0]])"_json;
  
  pie[0][1] = rand() % 100;
  
  pie[1][1] = rand() % 100;
  
  chartCfg["series"][chartCfg["series"].size() - 1]["data"] = pie;
  
  c.update(chartCfg);

Returns

Arguments

See Also

Remarks

The Chart() function returns a chart object with 4 methods: add(), reset(), update(), del().

• 1. update() method:
     The update() method can update chart configuration information. The parameter of this method is a Chart configuration object (JSON).
• 2. del() method:
     The del() method can delete the data series at the specified index based on the passed series parameter.
• 3. add() method:
     The add() method can write data to the chart. The parameters are:
  • series: Used to set the data series index, integer type.
  • data: Used to set the specific data to write, array type.
  • index (optional): Used to set the data index, integer type. Specifies the specific index position of the data to modify, supports negative numbers. Setting it to -1 represents the last data in the dataset.
    For example, when drawing a line, to modify the data on the last point of the line: chart.add(0, [1574993606000, 13.5], -1), which changes the data of the last point in series[0].data of the chart. Not setting the index parameter means adding data to the end of the current data series.
• 4. reset() method:
     The reset() method is used to clear chart data. The reset() method can take a parameter remain to specify the number of data entries to retain. Not passing the remain parameter means clearing all data.