Stacked Bar Chart valueAxis

[#1]

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.

[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