Question Re: Multi lines chart in Technology Q&A

Multi lines chart

Former Member — Wed, 10 Feb 2016 04:17:16 GMT

Would like to check is it possible to create a multi lines chart because no matter how I play with the feed item, it seems that I am only able to get a single line chart with the vizType : 'line'.

Something similar to what is below.

Re: Multi lines chart

saivellanki — Wed, 10 Feb 2016 04:21:30 GMT

Hi Beck,

You can use dual_line


vizType : 'dual_line'

Regards,

Sai Vellanki.

Re: Multi lines chart

Former Member — Wed, 10 Feb 2016 04:32:03 GMT


var oChart = new sap.viz.ui5.controls.VizFrame({
  vizType : 'line',
  vizProperties : {
  general : {
            layout : {
  padding : 12
  }
  },
  interaction : {
            selectability : {
  mode : 'NONE',
  plotStdSelection : false
  }
  },
  valueAxis : {
  title : {
  text : 'Leakage time (microAmps)'
  }
  },
  categoryAxis : {
  title : {
  text : 'Time (Hours)'
  }
  }
  },
  legendVisible : false
});


var oModel = new sap.ui.model.json.JSONModel();
var data = {
  'Electrical' : [ {
  time : 20,
  current : 15,
  model: 'A'
        }, {
  time : 40,
  current : 14,
  model: 'A'
        }, {
  time : 60,
  current : 14,
  model: 'A'
        }, {
  time : 80,
  current : 14,
  model: 'A'
        }, {
  time : 100,
  current : 13,
  model: 'A'
  }, {
  time : 120,  
  current : 13,
  model: 'A'
  }, {
  time : 140,  
  current : 12,
  model: 'A'
  }, {
  time : 160, 
  current : 12,
  model: 'A'
  }, {
  time : 180, 
  current : 11,
  model: 'A'
  }, {
  time : 20,
  current : 15,
  model: 'B'
        }, {
  time : 40,
  current : 14,
  model: 'B'
        }, {
  time : 60,
  current : 14,
  model: 'B'
        }, {
  time : 80,
  current : 14,
  model: 'B'
        }, {
  time : 100,
  current : 13,
  model: 'B'
  }, {
  time : 120,  
  current : 13,
  model: 'B'
  }, {
  time : 140,  
  current : 12,
  model: 'B'
  }, {
  time : 160, 
  current : 12,
  model: 'B'
  }, {
  time : 180, 
  current : 11,
  model: 'B'
  }, {
  time : 20,
  current : 15,
  model: 'C'
        }, {
  time : 40,
  current : 14,
  model: 'C'
        }, {
  time : 60,
  current : 14,
  model: 'C'
        }, {
  time : 80,
  current : 14,
  model: 'C'
        }, {
  time : 100,
  current : 13,
  model: 'C'
  }, {
  time : 120,  
  current : 13,
  model: 'C'
  }, {
  time : 140,  
  current : 12,
  model: 'C'
  }, {
  time : 160, 
  current : 12,
  model: 'C'
  }, {
  time : 180, 
  current : 11,
  model: 'C'
  }, {
  time : 20,
  current : 15,
  model: 'D'
        }, {
  time : 40,
  current : 14,
  model: 'D'
        }, {
  time : 60,
  current : 14,
  model: 'D'
        }, {
  time : 80,
  current : 14,
  model: 'D'
        }, {
  time : 100,
  current : 13,
  model: 'D'
  }, {
  time : 120,  
  current : 13,
  model: 'D'
  }, {
  time : 140,  
  current : 12,
  model: 'D'
  }, {
  time : 160, 
  current : 12,
  model: 'D'
  }, {
  time : 180, 
  current : 11,
  model: 'D'
  }]
};
oModel.setData( data );


var oDataset = new sap.viz.ui5.data.FlattenedDataset( {
  dimensions : [ {
  axis : 1,
  name : 'time',
  value : "{time}"
  } ],
  measures : [  {
  name : 'model', 
  value: '{model}'
  } , {
  name : 'current', 
  value : '{current}'
  }],
  data : {
  path : "/Electrical"
  }

} );
oChart.setDataset( oDataset );
oChart.setModel( oModel );


var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem( {
  'uid' : "primaryValues",
  'type' : "Measure",
  'values' : [ 'model', 'current' ]
} );


var feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem( {
  'uid' : "axisLabels",
  'type' : "Dimension",
  'values' : [ "time" ]

} );


oChart.addFeed( feedPrimaryValues );
oChart.addFeed( feedAxisLabels );

This is the code I am running and I just keep getting only a single line

Re: Multi lines chart

saivellanki — Wed, 10 Feb 2016 06:16:08 GMT

Beck,

Can you try something like this?


     var oDataset = new sap.viz.ui5.data.FlattenedDataset({
           dimensions: [{
                name: 'model',
                value: '{model}'
            }], 
            measures: [{
                name: "time",
                value: "{time}"
  }, {
  name : 'current',   
  value : '{current}' 
  }],
            data: {
                path: "/Electrical"
            }
        });

Sample: Plunker (I changed your model a bit)

Regards,

Sai Vellanki.

Re: Multi lines chart

vijay_kumar49 — Wed, 10 Feb 2016 06:23:29 GMT

Please refer the example document and use "sap.viz.ui5.DualLine" using this API . it should be useful Example -1 and Example -2

Kindly let me know if you need any more information

Re: Multi lines chart

Former Member — Wed, 10 Feb 2016 06:47:48 GMT

thank you guys for the sample and help. But I think the dual line does not seems to be able to achieve what I looking for. Because I would like to get every single line to be of its own model for example. line 1 is model A, line 2 model B, line 3 model C and so on. With the axis being some measurements. But based on the line chart provided by SAPUI5, it seems that I am only able to achieve same model of different measurements as 2 separate lines.

Re: Multi lines chart

Former Member — Wed, 10 Feb 2016 09:59:40 GMT

Folks, have a look at his initial picture.

A DualLine chart only allows to add a 2nd measurement resulting in 2 y-axes with the x-axis holding the dimensions.

I think he is asking to have 2 separate measure axes (being x and y) with the possibility to display several dimensions (models) in this matrix.

With that being said, I didn't find a solution for this.

Re: Multi lines chart

Former Member — Thu, 11 Feb 2016 02:08:01 GMT

thanks Oliver Jordan helping me explain what I really want to achieve.

Re: Multi lines chart

dominik-st — Wed, 22 Jun 2016 10:37:30 GMT

Hi,

for building a multi line chart using a VizFrame and posted a solution in my thread

Maybe this helps...

Best regards

Dominik

Re: Multi lines chart

Rudy_Clement1 — Wed, 22 Jun 2016 11:24:40 GMT

Hi Beck,

You should define 1 measure and 2 dimensions like this:


     var oDataset = new sap.viz.ui5.data.FlattenedDataset({
           dimensions: [
               { name: "model", value: "{model}" },
               { name: "time", value: "{time}" }],
            measures: [
       { name : "current", value : "{current}" }],
            data: {
                path: "/Electrical"
            }
        });

Then you should define 3 feed items referring to these measures and dimensions like this:


        var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                "uid": "valueAxis",
                "type": "Measure",
                "values": "current"
            }),
            feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                "uid": "categoryAxis",
                "type": "Dimension",
                "values": "time"
            });
            feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
                "uid": "color",
                "type": "Dimension",
                "values": "model"
            });

Finally add the feed items to the VizFrame:


        oVizFrame.addFeed(feedValueAxis);
        oVizFrame.addFeed(feedCategoryAxis);
        oVizFrame.addFeed(feedColor);

Then it should look like this:

Kind regards,

Rudy.