Create bands on line charts

[Theadd]

Is it possible to limit the area drawn by a serie to the value of another serie as in grafana or dygraphs?

[gionkunz]

That's not possible as of yet. Let's track this as an enhancement.

[maftieu]

I would also be interested by that. I'm trying to implement it, but I don't well see how area is drawn using SVG... (and I think it's not that easy :) )

[gionkunz]

We had a similar discussion already here #283 and I've produced an example with masking http://jsbin.com/yahuzun/4/edit?css,js,output which was only to test the mechanism.

After closer consideration I believe that the easiest way to enable users to build band area charts would be to add an option to Chartist that allows you to associate two series together to form a band.

I have something like this in mind:

var chart = new Chartist.Line('.ct-chart', {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  series: [
    {
      name: 'max',
      data: [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6]
    },
    {
      name: 'min',
      data: [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5]
    }
  ]
}, {
  bands: [
    {lower: 'min', upper: 'max'}
  ]
});

This would still draw the regular series min and max (if not prevented with showLine and showPoint set to false) but would also create a band on the line chart canvas that is constructed from the series referenced by name in the bands objects. Its also possible to add options into the bands objects and of course create multiple bands.

Thoughts?

Btw. I renamed the issue to something more generic.

[Theadd]

Since you're taking a closer look at it, let me show you a really nice implementation of this feature (scroll down).

^{I know that chartist is not intended to provide that kind of time-serie data on the x-axis but I don't really want it}

Also, most common usage of this feature would be something like this, which I think you already have it in mind since you've said that it'd be possible to create multiple bands.

bands: [
  {lower: 'mean', upper: 'max'},
  {lower: 'min', upper: 'mean'}
]

[maftieu]

I thought that it could be to use the areaBase option for an area to define the lower bound of the area.

new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  series: [
    {
      name: 'mini',
      data: [0, 0, 0, 0, 0, 1, 3, 4, 5, 6]
    },
    {
      name: 'maxi',
      data: [5, 2, 3, 4, 6, 8.5, 11, 13, 15, 16]
    }
  ]
}, {
  low: -2,
  // showLine: false,
  showPoint: false,
  series: {
    'maxi': {
      showArea: true,
      areaBase: 'mini'
    },
  }
});

This way, it's easy to keep Chartist draw lines or points for each serie.

[gionkunz]

@maftieu that's also an interesting approach! But then it will be hard to attach band options like custom class name etc. I also thought of something like this:

var chart = new Chartist.Line('.ct-chart', {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  series: [
    {name: 'max', data: [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6]},
    {name: 'avg', data: [6, 7, 5, 7.5, 4, 3, 5.5, 2, 3, 3, 4, 6]},
    {name: 'min',  data: [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5]}
  ]
}, {
  plugins: [Chartist.plugins.ctBands({
      bands: [
        {lower: 'avg', upper: 'max', className: 'avg-to-max'},
        {lower: 'min', upper: 'avg', className: 'avg-to-min'}
      ],
      removeSeries: ['avg']
  })]
})

Where removeSeries would remove those series (including points, lines and regular areas) after the bands were created. I want to make sure someone can still show some lines and / or points if desired but can also remove series that were only used to draw the bands.

I think this functionality fits nicely into a plugin. What do you think? It's just a matter of including an other script and referencing the plugin on the chart.

[Martinomagnifico]

It certainly looks promising! I still wonder if there's a possibility this way to make a chart like this: http://jsbin.com/suquco/1/edit?html,js,console,output without too much hassle.

[gionkunz]

@Martinomagnifico for this use-case we can easily make the areaBase configurable per series with the series config object and then just have regular step line charts with two different bases (one at 0 and the other at 100). I can add this change for the series based areaBase value into 0.9.0.

[Theadd]

I think this functionality fits nicely into a plugin.

Yeah! It'd be even better!

[Martinomagnifico]

Wow, that would be very cool!!!

[mitar]

What is the progress on this?

[Martinomagnifico]

Hi Gion,

I'm still struggling with the masking plugin. Would it be an option to use (svg) clipPath instead of mask? And how would that be defined? Imagine a funnel-shape, starting at 10 at left and diverging to the right, (to 30 and 250 for example) consisting of multiple lines (either stacked or not). Would the clip path then be a clip path of the whole group where the highest and lowest points of it are the highest and lowest points of all lines?

The masking thing had funny side effects in combination with transparency, so I hope using clip-path does allow that.

[mitar]

[mitar]

Any progress on this?

[joserobleda]

Hi, any news on this?

[gionkunz]

We have recently updated the stack and backbone of Chartist, and we're ready again to work on enhancements and plugins. Just wanted to know if this is still desired.

[mitar]

Yes, to me that would be awesome.