Grouping example not working as intended

[bernardolk]

Hello!

I need to be able to draw two (or more) graphs on top of each other. By looking at the docs, i found an example that seems to show a bar graph and a line graph being assigned to different groups. I hoped the could would display a bar graph for the second group, but it does not! Example code (as is):

// create a dataSet with groups
    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
        groups.add({
        id: 0,
        content: names[0],
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});

    groups.add({
        id: 1,
        content: names[1],
        options: {
            style:'bar'
        }});

    groups.add({
        id: 2,
        content: names[2],
        options: {drawPoints: false}
    });

    groups.add({
        id: 3,
        content: names[3],
        options: {
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});

  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-13', y: 60},
    {x: '2014-06-14', y: 40},
    {x: '2014-06-15', y: 55},
    {x: '2014-06-16', y: 40},
    {x: '2014-06-17', y: 50},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 60, group: 2},
    {x: '2014-06-23', y: 10, group: 2},
    {x: '2014-06-24', y: 25, group: 2},
    {x: '2014-06-25', y: 30, group: 2},
    {x: '2014-06-26', y: 20, group: 3},
    {x: '2014-06-27', y: 60, group: 3},
    {x: '2014-06-28', y: 10, group: 3},
    {x: '2014-06-29', y: 25, group: 3},
    {x: '2014-06-30', y: 30, group: 3}
  ];

  var dataset = new vis.DataSet(items);
  var options = {
      defaultGroup: 'ungrouped',
      legend: true,
      start: '2014-06-10',
      end: '2014-07-04'
  };
  var graph2d = new vis.Graph2d(container, dataset, groups, options);

Also, every plot displays "ungrouped" in the legend box. This may not being an issue and i may just be misusing the library, but since this is an official example excerpt, i am lost as to how to make it work.

Any thoughts? Thanks a lot.

[ZhukV]

I think this is a bug in library. Because group names does not work correctly. I try to set custom names, but see only default0, default1....

const groups = [
    {id: 1, content: 'Group #1'},
    {id: 2, content: 'Group #2'}
];

But in legend I see - default1, default2.

Any solution for fix this and render correct group names?

[cassiamani]

any solution for this issue?

[DrSnuggles]

I think this is a bug in library. Because group names does not work correctly. I try to set custom names, but see only default0, default1....

const groups = [
    {id: 1, content: 'Group #1'},
    {id: 2, content: 'Group #2'}
];

But in legend I see - default1, default2.

Any solution for fix this and render correct group names?

I found a work around. use string instead of integer as "id"

const groups = [
    {id: 'mean', content: 'Ø Mean'},
];

items.push( {x: dt, y: mean , group: 'mean'} );

In legend Ø Mean is displayed.

[cassiamani]

@DrSnuggles thanks so much, i didn't know about this, you save me, one more time, thanks.

[Jawwad-123]

Don't give a number to id, give a string and have the same string for the content it should work const groups = [ {id: 'string', content: 'string'}, ];

items.push( {x: dt, y: mean , group: 'string'} );