Using other shapes than "circles" for line points #question

Description

This is more a question rather than an issue.

I’d like to be able to use other shapes than svg circle for the “line points” used in Line and Spline charts.

Since circle seems to be hardcoded in many places, I thought using the onafterinit callback to do the following:

• Select chart lines
• Get circle positions (is this possible through the API?)
• Append the “desired shape” (in my case an svg rect) and set it’s attributes
• Remove the circles (or hide them via API)

What do you think of the idea?

Would this be an interesting feature for the library?

Thanks

[julien]

@netil, thanks for the feedback.

I think we could “prioritize” which way of drawing things is used when several options are provided.

I’ll try to illustrate this with “pseudo code”.

// 1 - Check the `point_type` option to see if
//     it has a valid value (e.g. "circle", "rectangle")
if (isValidPointType(this.config.point_type)) {
} 
// 2 - Check that point_create and point_update are functions
else if (hasValidDrawFunctions(this.config)) {
} 
// 3 -  No option was specified, draw the "default" circles
else {
}

I also the number of arguments passed the point_create and point_update functions could be reduced, and I am updating my example, which I’ll give you an update on shortly.

[julien]

Thanks @netil,

I understand you have some concerns about this suggestion, and also agree that in order to implement this feature, the developer should have some idea on how to implement it. Documenting and providing examples, would make things easier.

I also agree that billboard is popular because of it’s simplicity, but I also think that allowing the developer to customize the “look and feel” of the charts is a bonus.

One example of customizing billboard is the possibility to change the “default colors” that are provided by billboard by specifying the color_pattern option.

var chart = bb.generate({
  color: {
    pattern: ['#ff0000', '#00ff00'] // My custom colors
  },
  data: {
    columns: [
      ['data1', 120, 200, 20, 400, 50, 100],
      ['data2', 20, 100, 210, 80, 60, 230]
    ]
  },
  bindto: '#chart'
});

Having the same flexibility for “custom shapes” would be great, so I guess we have several options:

1. Allow developers to provide code that renders their “custom shapes”. In this case, if no options are specified, billboard provides some defaults to make sure things are rendered correctly, on the other hand if those options are provided, it would be the developer’s responsibility.

   var chart = bb.generate({
     point: {
       create: function(options) {
         // code provided by the developer
       },
       update: function(x, y) {
         // code provided by the developer
       } 
     },
     data: {
       columns: [
         ['data1', 120, 200, 20, 400, 50, 100],
         ['data2', 20, 100, 210, 80, 60, 230]
       ]
     },
     bindto: '#chart'
   });
   

2. Support a set of custom shapes, for example circle and rectangle and render the corresponding shape accordingly.

   var chart = bb.generate({
     point: {
       type: 'rectangle' // If no `type` option is provided, default to circles
     },
     data: {
       columns: [
         ['data1', 120, 200, 20, 400, 50, 100],
         ['data2', 20, 100, 210, 80, 60, 230]
       ]
     },
     bindto: '#chart'
   });
   

Tell me if you think one of these options is a viable solution and thanks again for your time.