Stacked Bar Chart valueAxis

[mantrishekar]

Hello All,

I am working with viz frame Stacked bar chart.

Now i need to display time vales on X-Axis.

I need to populate the time values from my JSON Object.But while displaying time values it is displaying as some garbage numbers instead of time.

How can i print the time values on X-Axis.

Below is my Code.

var DataSet = new sap.viz.ui5.data.FlattenedDataset({

  dimensions : [{name : "LossType",value : "{lossType}"},

               {name : "Machine",value : "{machine}"}],

  measures  : [

              {name : "TimeLoss",value : "{timeFrom}"

              },

             // {name : "MachineStatus",value : "{crStatus}"},

              ],

     data : {path : "/modelData"}

  });

Regards,

Shekar.

[former_member196805]

Maybe this is an alternative:

vizFrame does comes with a chart type called timeseries_column which could plot timestamp as Dimension. There are few guidelines according to my understanding:

1, you must define your timeStamp as Dimension and set it's dataType as "date" like below

var DataSet = new sap.viz.ui5.data.FlattenedDataset({

  dimensions : [

               {name: "DateTime", value: {datetime}, dataType: "date"}

  ],

  measures  : [{name : "TimeLoss",value : "{timeFrom}"}],

     data : {path : "/modelData"}

  });

2, try ensure the date value is in milliseconds form in dataset like:

{"datetime": 1271635200000, timeForm: 889232} // Mon Apr 19 2010 08:00:00 GMT+0800

{"datetime": 1273104000000, timeForm: 22321} // Thu May 06 2010 08:00:00 GMT+0800

3, one of the limitation to timeseries_column is that it accepts only 1 dimension.

I have a demo here https://jsfiddle.net/Chapman/Lbephzqn/

[mantrishekar]

Hello All,

In the below code am i doing anything wrong if so please let me know.

Am getting invalid data binding error

var oVizFrame = new sap.viz.ui5.controls.VizFrame();

  var oModel = new sap.ui.model.json.JSONModel();

  var data = {

  'Cars' : [

  {"Model": "Alto","Value": "1271635200000"},

  {"Model": "Zen","Value": "1273104000000"},

  {"Model": "Santro","Value": "1272758400000"},

  {"Model": "Matiz","Value": "1276300800000"},

  {"Model": "Wagan R","Value": "1271635200000"},

  ]};

  oModel.setData(data);

//                3. Create Viz dataset to feed to the data to the graph

  var oDataset = new sap.viz.ui5.data.FlattenedDataset({

  measures : [{

  name : 'Model',

  value : "{Model}"}],

  dimensions : [{

  name : 'Cars Bought',

  value : '{Value}',dataType: 'date'},

  ],

  data : {

  path : "/Cars"

  }

  });

  oVizFrame.setDataset(oDataset);

  oVizFrame.setModel(oModel);

  oVizFrame.setVizType('stacked_bar');

//                4.Set Viz properties

  oVizFrame.setVizProperties({

  timeAxis:{

  title:{visible:false},

  levels:["hour", "minute"],

  },

  plotArea: {

  colorPalette : d3.scale.category20().range()

  }});

  var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

  'uid': "timeAxis",

  'type': "Dimension",

  'values': ["Cars Bought"]

  }),

  feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

  'uid': "valueAxis",

  'type': "Measure",

  'values': ["Model"]

  });

  oVizFrame.addFeed(feedCategoryAxis);

  oVizFrame.addFeed(feedValueAxis);

[former_member196805]

  'Cars' : [
  {"Model": "Alto","Value": "1271635200000"},
  {"Model": "Zen","Value": "1273104000000"},
  {"Model": "Santro","Value": "1272758400000"},
  {"Model": "Matiz","Value": "1276300800000"},
  {"Model": "Wagan R","Value": "1271635200000"},
  ]};
  oModel.setData(data);


//                3. Create Viz dataset to feed to the data to the graph
  var oDataset = new sap.viz.ui5.data.FlattenedDataset({
  measures : [{
  name : 'Model',
  value : "{Model}"}],

1, we could only render numeric values as measure to vizFrame. So you cannot define Model, which consist of strings, as measure.

  dimensions : [{
  name : 'Cars Bought',
  value : '{Value}',dataType: 'date'},
  ],


  data : {
  path : "/Cars"
  }
  });
  oVizFrame.setDataset(oDataset);
  oVizFrame.setModel(oModel);
  oVizFrame.setVizType('stacked_bar');

2, dataType: 'date' works only for timeseries_line or timeseries_column chart. Error will be prompted if use it on other chart type.

  oVizFrame.setVizProperties({
  timeAxis:{
  title:{visible:false},
  levels:["hour", "minute"],

  },

3, timeAxis chart property available only timeseries_line or timeseries_column chart.

[mantrishekar]

Hi Chapman,

After all these discussion i have got some idea where and how to use timeAxis.

But my requirement is to use time values in x-axis for stacked bar chart in vizframes.

Is it possible to do so or if not please let me know the alternative.Because i have to display data with multiple dimensions so am preferring stacked bar chart.

Regards,

Shekar.

[former_member196805]

Hello Shekar,

  I don't really know how would your dataset look like so I had made this sample, JS Bin, with a very lousy dataset. Please try modify the dataset.

  If you stick with stacked bar chart, you have to ensure the timestamp/date value is already in the correct format you wish it to show as this dimension value is only a string to the chart now. Chart will not do any transformation like timeseries_*** chart type.

BR,

Chapman

[mantrishekar]

Hello Chapman,

Till here it is fine.But am trying to interchange the axis like i want the time values on x-axis and profit values on Y-Axis.Am unable to achieve that part.

Regards,

Shekar

[Former Member]

Use Chapmans JSBin and change the VizType to stacked_column

[mantrishekar]

Hi Pascal,

Bars should be displayed in Horizontal way only.

One more thing is you are printing some number labels on the bars,in that place i want to print other numbers like in my requirement i have a status called C and R.Is it possible to print those values

Regards,

Shekar.

[former_member196805]

Let's do some definition on terms before continue:

categoryAxis = Axis for Dimension visualization

valueAxis = Axis for Measure visualization

for stacked_bar chart,

categoryAxis is the vertical axis so it's y-Axis.

valueAxis is the horizontal axis so it's x-Axis.

By applying the above with your expectation

i want the time values on x-axis and profit values on Y-Axis.Am unable to achieve that part.

So x-Axis, horizontal axis, has reserved for measure so you cannot apply the timestamp, which consider as a string on stacked_bar chart, on x-Axis, vice versa to y-axis.

[mantrishekar]

Hello Chapman,

From the above explanation

a) We cannot apply time stamp on X-axis for Stacked Bar Chart  for MEASURES because time stamp is a String Value.

b)We Cannot apply time stamp on Y-Axis for Stacked Column Chart for MEASURES because time stamp is a String Value.

IF above is true then if i want to achieve my functionality then i need to use Stacked Column Chart.

IF yes Please reply so that we can close this thread with this conclusion

Regards,
Shekar

[former_member196805]

Yes, Shekar.

[SergioG_TX]

MAntri,

most likely the "garbage numbers" is  the javascript time... try  new Date(youtTimeObject)  -- this will display the datetime object.

the long number you see... most likely is the number of milliseconds since 1/1/1970

[mantrishekar]

Hi Sergo,

Now it is showing invalid Date

[SergioG_TX]

what type of data is this gargabe number you have?  can you please share a screenshot

[mantrishekar]

Hi Sergio,

Now am getting the converted values in conversion.

But while displaying on graph it is dispalying like below.

Now actually i want to display like 7:00 am etc

[SergioG_TX]

then it may be an issue with the data... are you running these values through a function? or are you manipulating them somehow? that may be the case...

[mantrishekar]

Hi Sergio,

In the below way am getting the time value and passing this to JSON and am binding the JSON to Chart

					var timeFrom = myArray[j].DateFrom
					timeFrom  = new Date(timeFrom).getTime();

[Former Member]

Can you please give an example of the actual value of myArray[j].DateFrom?

You can get this by setting a breakpoint after the variable declaration or just put a console.log(timeFrom) after the first line where you declare your variable. Then copy the value out of your console.

[mantrishekar]

Hi Pascal,

02-02-2016 06:00:00

the above is the value of myArray[j].DateFrom

[Former Member]

Okay, so this is a valid Javascript date if you use:

var timeFrom = new Date(myArray[j].DateFrom)

You don't need to call getTime(). You just have to tell your dimension binding that its dataType is "date"

If you are using an XML view it would be:

1. <viz.data:DimensionDefinition name="Date"
2.    value="{DateFrom}" dataType="date"/>

[mantrishekar]

Hi Pascal,

I wnat to bind time not date

[Former Member]

var timeFrom = new Date(myArray[j].DateFrom)

var hours = timeFrom.getHours();

var minutes = timeFrom.getMinutes();

var seconds = timeFrom.getSeconds();

var timeOnly = hours + ":" + minutes + ":" + seconds

or do some more formatting like adding leading zeroes if a value is <10 or whatever you like.

[mantrishekar]

Hello Pascal,

Still am not getting the time values.

for (var i = 0;i<uniqueLossTypeLegth;i++)

  {

  for (var j=0;j<dataLength;j++)

  {

  if (uniqueLossTypes[i] == myArray[j].LossType )

  {

  losstypeValue = myArray[j].LossType;

  machineValue = myArray[j].Machine;

  lossCategoryValue = myArray[j].LossCategory;

  var timeFrom = myArray[j].DateFrom

  timeFrom  = new Date(timeFrom);

  var hours = timeFrom.getHours();

  var minutes = timeFrom.getMinutes();

  var seconds = timeFrom.getSeconds();

  var timeOnly = hours + ":" + minutes + ":" + seconds

  var timeTo = myArray[j].DateTo.split(" ")[1];

  var hrmmss = myArray[j].TimeLossDuration.split(":");

  //timeLossDuration = parseInt(timeLossDuration) + parseInt(myArray[j].TimeLossDuration);

  var hrs = parseInt(hrmmss[0]);

  var min = parseInt(hrmmss[1]);

  //var sec = parseInt(hrmmss[2]);

  var totalTime = (hrs * 60) + min;

  timeLossDuration = totalTime + totalTime;

  if (myArray[j].Machine == myArray[j].CausalResultant)

  {

  CRStatus = "C"

  }

  else

  {

  CRStatus = "R"

  }

  }

  }

  graphArray.push({lossType : losstypeValue,tlDur : timeLossDuration,machine : machineValue,crStatus : CRStatus,timeFrom : timeOnly});

  totalLossValue = 0;

  }

d3Chart.setVizType("stacked_bar");

  //d3Chart.setVizType(" 100_dual_stacked_bar");

  //d3Chart.setVizType("stacked_column");

  var graphModel = new sap.ui.model.json.JSONModel();

  graphModel.setData({modelData: graphArray});

  var DataSet = new sap.viz.ui5.data.FlattenedDataset({

  dimensions : [{name : "LossType",value : "{lossType}"},

               {name : "Machine",value : "{machine}"}],

  measures  : [

              {name : "TimeLoss",value : "{timeFrom}"},

             // {name : "MachineStatus",value : "{crStatus}"},

              ],

     data : {path : "/modelData"}

  });

Please check this code and let me know if any modifications need to be done

[Former Member]

Hi Shekar,

What are you getting out of this?

"var timeFrom = myArray[j].DateFrom"

Thanks & Best Regards,

Venkatesh Sora

[mantrishekar]

Hi Venkatesh,

Iam getting the below value from  "var timeFrom = myArray[j].DateFrom"

02-02-2016 06:00:00

[Former Member]

Please provide a jsbin with some demo data, this code is not really readable.

[mantrishekar]

Hi Pascal,

The below is the jsbin link

JS Bin - Collaborative JavaScript Debugging

[Former Member]

Hi Mantri,

thanks for the jsbin. Unfortunately, I have to say that there are a lot of mistakes in your code.

If you want to display time based columns, you should use the TimeAxis, see:

SAPUI5 Explored

In your example, matrixModel is not defined. Also your time calculation is wrong, as you are adding "0" to EVERY value. This means, if you got the following values:

hours: 3

minutes: 30

seconds: 00

Your full "timeOnly" will be 30:300:000 which is obviously not a valid time format.

Furthermore you are not using the MVC concept, which is not a "real" mistake, but this makes your code hard to read.

I am sorry but I do not have the time to rewrite your complete code. But you can have a look at the above mentioned example in sapui5 explored. There you can see and download the template of what you need in a correct structure. Its written with an xml view, which I would suggest as the view language anyway.

Greetings

Pascal

[mantrishekar]

Hi Pascal,

Actually i am loading data from JSON File and in hurry am about to do modification for existing code.And those are taht mistakes actually you are seeing.Now please let me know how to modify my code to get Time values on X-Axis

Please see the properties code snippet and suggest the modifications need to be done.

Please let me now which charts do we need to use either SAP Provided or D3 Charts and its advantages and drawbacks

Regards,

Shekar