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'} );