Can I make a custom chart type

Webix JS
1

Is it possible to provide a custom chart type or a drawing method for a chart? I want a chart which is similar to a bar chart but the bar is drawn between two datapoints, given as a series, instead of from the x-axis. This would look similar to a financial stock hi-lo chart.

2

Could you share a picture with Chart you need ?

3

Thank you for your help.

Here is a sample of the desired chart (the green bars): http://im.gy/L4R
And here is what I have came up with: http://im.gy/jtS

I found and attempted your response to a similar request at:
http://forum.webix.com/discussion/4112/range-bar-charts

Unfortunately that attempt failed because the amount of data I have caused the cellWidth to become 0 in the stackedBar chart function. This caused all of the bars to lay on top of each other on the left side of the chart (at x0).

Instead, following the ‘line’ chart code as an example, I implemented a ‘hilo’ chart type which produced the chart at im.gy/jtS.

I’m fairly happy with this solution. Thanks again.

// I use this chart definition:
{
  view:'chart',
  series:[
   {
    type:     'hilo',
    line:     {color:'deepskyblue', width:1},
    value:    function(obj) { return {hi:obj.systolic, lo:obj.diastolic} },
    tooltip:  {template:'#systolic#/#diastolic# @ #pulse#bpm on #day#'}
  },
  {
    type:     'line',
    line:     {color:'transparent', width:0},
    value:    '#pulse#',
    item:     {type:'s', radius:1, borderWidth:0, color:'black', borderColor:'white'}
  }
  ]
}

// and this chart extension to implevent the 'hilo' type
webix.extend(webix.ui.chart,
 {
    /**
    *   renders a hi lo chart
    *   @param: ctx    - canvas object
    *   @param: data   - object those need to be displayed
    *   @param: point0 - top left point of a chart
    *   @param: point1 - right bottom point of a chart
    *   @param: sIndex - index of drawing chart
    *   @param: map    - map object
    */
    $render_hilo: function(ctx, data, point0, point1, sIndex, map){
      if (data.length == 0)
          return

      var params      = this._calculateLineParams(ctx, data, point0, point1, sIndex),
      minValue    = params.minValue,
      maxValue    = params.maxValue,
      unit        = params.unit,
      valueFactor = params.valueFactor,
      cellWidth   = params.cellWidth,
      config      = this.config,
      lineWidth   = config.line.width,
      hiValue, loValue, x, yh, yl, i;

     x = point0.x + (config.offset ? 0.5 : 0)*cellWidth;
     
     for (i = 0; i < data.length; i++, x += cellWidth){
       if (!(hiValue = Math.min(config.value(data[i]).hi, maxValue))) continue;
       if (!(loValue = Math.max(config.value(data[i]).lo, minValue))) continue;

      yh = point1.y - unit*((hiValue - minValue) * valueFactor)
      yl = point1.y - unit*((loValue - minValue) * valueFactor)
     
      this._drawLine(ctx, x, yl, x, yh, config.line.color.call(this, data[i]), lineWidth);
      
      if (map)
         map.addRect(data[i].id, [x-point0.x-lineWidth, yl-point0.y-lineWidth, x-point0.x+lineWidth, yh-point0.y+lineWidth], sIndex);
    }
  }
});
4

I wish I knew how to mark up that so all the code looked like code…

5

Hi,

Many thanks for sharing your solution !

The only issue could be with using private methods: _calculateLineParams and _drawLine (they have different names in minified webix.js library).

I wish I knew how to mark up that so all the code looked like code…

The code can be put between ~~~js and ~~~.