cancel
Showing results for 
Search instead for 
Did you mean: 

Multi lines chart

Former Member
0 Kudos

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.

http://m.eet.com/media/1159896/coupling-a-supercapacitor-with-a-small-energy-harvesting-source-fig-6.jpg

Accepted Solutions (0)

Answers (5)

Answers (5)

Former Member
0 Kudos

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

dominik-st
Participant
0 Kudos

Hi,

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

Maybe this helps...

Best regards

Dominik

Rudy_Clement1
Participant
0 Kudos

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.

Former Member
0 Kudos

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.

Former Member
0 Kudos

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.

Former Member
0 Kudos

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

saivellanki
Active Contributor
0 Kudos

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.

vijay_kumar49
Active Contributor
0 Kudos

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

saivellanki
Active Contributor
0 Kudos

Hi Beck,

You can use dual_line


vizType : 'dual_line'

Regards,

Sai Vellanki.