Wednesday, February 15, 2012

Custom lines, a new feature

A guest post by Russell Valentine.

A new series option strokePattern has been added to Dygraphs. This option allows you to define the pattern Dygraphs draws for a particular series. No longer are we limited to solid lines. It takes an even length integer array as a argument. This allows you to come up with any pattern you like for your series. This could be helpful if you have many series plots on one graph and you can not or do not want to use color alone to differentiate them. See the dygraphs per-series test page, and below for an example:

g = new Dygraph(element, data, {
    legend: ‘always’,
    strokeWidth: 2,
    colors: [‘#0000FF’],
    ‘sine wave’: {
       strokePattern: [7, 2, 2, 2]
    }
  }
); 
The array defines the number of pixels that make up the drawn segments and space between them. It repeats the pattern throughout the line. The even indexes are drawn and the odd indexes are spaces. In pattern [7, 2, 2, 2] as shown in figure 2 below: seven pixels are drawn, there is a two pixel space, then two pixels are drawn then there is another two pixels space then it starts over again.

There are a few predefined patterns in Dygraphs. These are listed below, notice also when the pattern is null a solid line is used.


Dygraph.DOTTED_LINE [2, 2]
Dygraph.DASHED_LINE [7, 3]
Dygraph.DOT_DASH_LINE [7, 2, 2, 2]
null null


Dygraphs will use the strokePattern when creating the legend. If the pattern can not fit into the legend width, the pattern will be scaled to fit. This may give you unexpected results depending on the pattern you use. As an example, patterns [10, 5] and [20, 10] will look the same in the legend because they will be scaled to fit into the same width. You may need to either choose patterns that are clear in the legend or use your own legend.


The new option strokePattern is a powerful new feature for dygraphs. I hope you find it useful for your graphs.

2 comments:

  1. It is a great feature and I need to use this feature for my current project.

    One problem I face is I need to change the series name programmatically. For example, in your sample code above, I need to change 'sine wave' (a string) to other label names using a JavaScript variable such as 'labelToChange'. When I tested it using a variable, and it did not work. It seems like it takes the JavaScript variable as a string itself, it doesn't put the value of the varialble "labelToChange" in the place of 'since wave'.

    Is there any way I can replace 'sine wave' part of your code with a JavaScript variable?

    Thanks,
    Hoon

    ReplyDelete
  2. Let's move this to the Dygraphs mailing list. Blog posts are a terrible place for tech support, not to mention your question is unrelated to the post at hand.

    ReplyDelete