New feauture to add a shape and tooltip to a (2-D) point, besides its (x,y) coordinates

[C Knook]

Hi,

We need an extension to the 2-D graph library: be able to define a shape for a / each point and add a tooltip remark text to it.

This for several (not all) points, defined by:

graphdata[ index ].data.push({
  'date': new Date((val['datetime']+gmtoffset)*1000);
  'value': val['power'],
  ‘shape’: val[‘shape’],
  ‘shapesize’: val[‘shapesize’],
  ‘hinttext’: val[‘tooltip’]
});

with te new fields as:
shape: predefined: ‘dot‘,‘cross‘,‘triangle‘,‘square‘,..
shapesize: set a few sizes of the shape, like: xx-small, x-small,normal,x-big,xx-big
hinttext: (html?) short text to show in a hint/tooltip if hovered over the point


Can we add it ourselves?

[Jos de Jong]

Sure you can add it yourself, it's an open source project. If it works out nicely you may even contribute it to the project so others can use it as well.

Note that your feature "hinttext" is already supported, it is called "title"

Maybe for the shapesize it is handier to specify a size in pixels?

[C Knook]

I've made it, with contribution to all here.. (source: graph.js vs 1.3.2, 20-aug-2013).

See attached graph.js

Use as:
  <div id="mygraph"></div>
  <p id="range"></p>
  <p id="info"></p>
with within <script type="text/javascript">..</script>
...
        var graphdata = {};
...
            graphdata['dataset'+i] = {
              'label': 'graph '+i,
              'data': []
            };
...
            var shapes = new Array("cross", "circle", "square", "triangle");
            graphdata[ 'dataset'+i ].data.push({
              'date' : new Date((val['datetime']+gmtoffset)*1000),
              'value': new Number(val['value']),
              'title': 'hint text here', /* if used text inside a box with line or given color else default date + value hint */
              'text' : 'html as is text here',  /* if used no preformat as title has and suppresses title */
              'shape': shapes[ val['shapeindex'] ],
              'shapesize': val['shapesize'],
              'shapecolor': val['shapecolorindexorvalue'],
              'color': '#FF0000' /* hint text color optional */
            });
...
        var options = {
          'width':  '100%',
          'height': '350px'
        };

        // Instantiate our graph object.
        var graph = new links.Graph(document.getElementById('mygraph'));

        // Draw our graph with the created data and options
        var gd = [];
        for (i=0; i<nrofdatasets; i++) {
          gd.push( graphdata[ 'dataset'+i ] );
        }
        graph.draw( gd, options);




Op donderdag 16 januari 2014 15:11:18 UTC+1 schreef C Knook:

[C Knook]

The attachement.. graph-1.3.2b.js

Op donderdag 16 januari 2014 15:11:18 UTC+1 schreef C Knook:

Hi,

[C Knook]

Now shape is one of ["none", "cross", "circle", "square", "triangle"] or is a value as index to this array (0..4): 0=none..4=triangle.

If you like to have only shaped points with a red boxed color else default line color:

set color tag to: 'color': ((val['shape']=="none") ? '' : '#FF0000')

graph-1.3.2c.zip attached.

(Note: attach via firefox does not work.., done via IE)

Op donderdag 16 januari 2014 15:11:18 UTC+1 schreef C Knook:

Hi,

[Jos de Jong]

nice work!

can you possibly do a pull request on github with these changes?

Jos