Question Re: Stacked Bar Chart valueAxis in Technology Q&A

Stacked Bar Chart valueAxis

mantrishekar — Tue, 21 Jun 2016 12:45:53 GMT

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.

Re: Stacked Bar Chart valueAxis

SergioG_TX — Tue, 21 Jun 2016 12:48:14 GMT

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

Re: Stacked Bar Chart valueAxis

mantrishekar — Tue, 21 Jun 2016 12:53:36 GMT

Hi Sergo,

Now it is showing invalid Date

Re: Stacked Bar Chart valueAxis

SergioG_TX — Tue, 21 Jun 2016 13:06:48 GMT

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

Re: Stacked Bar Chart valueAxis

mantrishekar — Tue, 21 Jun 2016 13:12:12 GMT

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

Re: Stacked Bar Chart valueAxis

SergioG_TX — Tue, 21 Jun 2016 13:20:31 GMT

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...

Re: Stacked Bar Chart valueAxis

mantrishekar — Tue, 21 Jun 2016 13:24:53 GMT

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();

Re: Stacked Bar Chart valueAxis

Former Member — Tue, 21 Jun 2016 13:28:23 GMT

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.

Re: Stacked Bar Chart valueAxis

mantrishekar — Tue, 21 Jun 2016 13:31:33 GMT

Hi Pascal,

02-02-2016 06:00:00

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

Re: Stacked Bar Chart valueAxis

Former Member — Tue, 21 Jun 2016 13:37:20 GMT

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:

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

Re: Stacked Bar Chart valueAxis

mantrishekar — Tue, 21 Jun 2016 13:38:41 GMT

Hi Pascal,

I wnat to bind time not date

Re: Stacked Bar Chart valueAxis

Former Member — Tue, 21 Jun 2016 13:49:28 GMT

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.

Re: Stacked Bar Chart valueAxis

mantrishekar — Wed, 22 Jun 2016 05:01:39 GMT

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

Re: Stacked Bar Chart valueAxis

Former Member — Wed, 22 Jun 2016 07:33:20 GMT

Hi Shekar,

What are you getting out of this?

"var timeFrom = myArray[j].DateFrom"

Thanks & Best Regards,

Venkatesh Sora

Re: Stacked Bar Chart valueAxis

mantrishekar — Wed, 22 Jun 2016 07:39:12 GMT

Hi Venkatesh,

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

02-02-2016 06:00:00

Re: Stacked Bar Chart valueAxis

Former Member — Wed, 22 Jun 2016 07:55:51 GMT

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

Re: Stacked Bar Chart valueAxis

mantrishekar — Wed, 22 Jun 2016 09:36:07 GMT

Hi Pascal,

The below is the jsbin link

JS Bin - Collaborative JavaScript Debugging

Re: Stacked Bar Chart valueAxis

Former Member — Wed, 22 Jun 2016 13:08:55 GMT

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

Re: Stacked Bar Chart valueAxis

mantrishekar — Wed, 22 Jun 2016 13:18:24 GMT

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

Re: Stacked Bar Chart valueAxis

former_member196805 — Thu, 23 Jun 2016 02:56:58 GMT

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/