Customized Android GraphView x-axis date labels not displaying as per setNumHorizontalValues() - android-graphview

I attempt to show a tersely formatted date/time on the x-axis in a graphview chart. As per the API Code examples, I set HumanRounding to false when using using a date formatter on that axis. I'm also setting the NumHorizontalLabels to 3 in order to display reasonably OK in both orientations.
This results in e.g. the following, where the date labels show as a black shape, and the LineChart background is different. I'm speculating that the black shape is the result of all my date data points overwriting each other:
With HumanRounding set to true (commented out), I get labels showing, but instead of the expected 3 evenly distributed labels, they are unpredictably spread out and/or not equal to 3, sometimes the labels over-write each other, sometimes they are bunched on the left...
The number of date data-points on the x-axis can vary depending on how much history the user has selected. Note that this can vary from 60 to thousands of minutes.
Here's the code that receives data and charts it. Note that the unixdate retrieved from wxList elements has already been converted to a Java date (by multiplying by 1000) by the time they get used here (the time portion of the x-axis are in fact correct when they do show up in a reasonably distributed manner):
protected void onPostExecute(List<WxData> wxList) {
// We will display MM/dd HH:mm on the x-axes on all graphs...
SimpleDateFormat shortDateTime = new SimpleDateFormat("MM/dd HH:mm");
shortDateTime.setTimeZone(TimeZone.getTimeZone("America/Toronto"));
DateAsXAxisLabelFormatter xAxisFormat = new DateAsXAxisLabelFormatter(parentContext, shortDateTime);
if (wxList == null || wxList.isEmpty()) {
makeText(parentContext,
"Could not retrieve data from server",
Toast.LENGTH_LONG).show();
} else {
// Temperature Celcius
GraphView tempGraph = findViewById(R.id.temp_graph);
tempGraph.removeAllSeries();
tempGraph.setTitle(parentContext.getString(R.string.temp_graph_label));
DataPoint[] tempCArray = new DataPoint[wxList.size()];
for (int i = 0; i < wxList.size(); i++) {
tempCArray[i] = new DataPoint(wxList.get(i).getUnixtime(), wxList.get(i).getTempC().doubleValue());
}
LineGraphSeries<DataPoint> tempCSeries = new LineGraphSeries<>(tempCArray);
tempGraph.addSeries(tempCSeries);
tempGraph.getGridLabelRenderer().invalidate(false, false);
tempGraph.getGridLabelRenderer().setLabelFormatter(xAxisFormat);
tempGraph.getGridLabelRenderer().setNumHorizontalLabels(3);
tempGraph.getViewport().setMinX(wxList.get(0).getUnixtime());
tempGraph.getViewport().setMaxX(wxList.get(wxList.size() - 1).getUnixtime());
tempGraph.getViewport().setXAxisBoundsManual(true);
// Code below seems buggy - with humanRounding, X-axis turns black
// tempGraph.getGridLabelRenderer().setHumanRounding(false);
...
I have tried many variations,but I cannot get the graph to consistently display 3 datetimes evenly spread out, for both orientations, for varyings sample sizes. Any help is appreciated.

Related

React vis - Formatting time tick on the x axis

I have added the xType="time" to the chart to show the time scale on the x-axis. I am displaying data only for 25 seconds range. Currently, the x-axis is showing the time format as :SS.
So the x-axis shows time in the following format (data showing each second):
:23, :24, :25
What I am getting from the database is time string in the following format:
2019-07-01T10:42:38.621Z
I have tried the following:
new Date(item.date) // shows ':023'
new Date(item.date).getTime() // shows ':023'
new Date(item.date.substring(19, 0)).getTime() // shows ':023'
oscilloscope.oscilloscope.map((item, index) => {
return {
x: new Date(item.date.substring(19, 0)).getTime(),
y: item.data.fuelInjection
}
})
Always getting the same result.
I would like the x-axis to be formatted in HH:MM:SS format.
So the x-axis showing data like:
11:42:05, 11:42:06, 11:42:07
I am showing a range of 25 seconds apart. This seems to be set by the chart automatically as if I change the range to the extent that a couple of minutes are included the time display on x-axis changes to MM:SS format. I still need the HH:MM:SS format thou. Can this be done at all?
To answer my own question week later, I found an answer in different question about react-vis here on the Stack Overflow:
show date in( MM-DD) format in x-axis using react-vis
In my case the solution was:
<XAxis
tickFormat={function tickFormat(d){
const date = new Date(d)
return date.toISOString().substr(11, 8)
}}
/>
That did the job. Hope it will save someone else time.

Date logic in DAX

I am trying to compute a percentage difference between two values - market index levels separated by a period of time (the period will be determined by user input in a Power BI Slicer tool). I don't understand how I can cross reference values DAX uses by the associated date.
Value % difference from Value =
VAR __BASELINE_VALUE = SUM('Equity Markets (2)'[Value])
VAR __VALUE_TO_COMPARE = SUM('Equity Markets (2)'[Value])
RETURN
IF(
NOT ISBLANK(__VALUE_TO_COMPARE),
DIVIDE(__VALUE_TO_COMPARE - __BASELINE_VALUE, __BASELINE_VALUE)
)
"Value" is a column in a table "Equity Markets (2)" the table also includes a "Date" column.
What is the syntax for selecting a value from Value based on an associated date?
Apologies for asking such a basic question - feels like 30 sec of googling should have done it for me.
The slicer is engaging with the bar graph correctly - I know becouse I'm measuring the levels. I think all the % changes are zero because I'm evaluating x/x -1
percentage change =
VAR
__EarliestValue = CALCULATE(SUM('Equity Markets (2)'[Value]),
FIRSTDATE('Equity Markets (2)'[Date]))
VAR __LastDateValue = CALCULATE(SUM('Equity Markets (2)'[Value]),
LASTDATE('Equity Markets (2)'[Date]))
RETURN
CALCULATE(
DIVIDE(__LastDateValue,__EarliestValue)-1)

How can I show daily grid lines in HighStock? Currently seems buggy

I am using Highstock to create a GANTT style workflow, but I'm using the X-Range Highcharts plugin to allow for start and end dates on the X-axis. I am trying to get grid lines to display on every day, so I set the following on the X-axis:
tickInterval: 24 * 36e5
However, the grid lines only appear on every week. I've searched all over but can't seem to find a solution specific to this problem, any help would be greatly appreciated.
Here's a jsfiddle showing the problem.
Highcharts prevents from rendering too many ticks on the chart. Maybe the current logic is a bit harsh, but you can always use xAxis.tickPositioner, take a look:
tickPositioner: function() {
console.log(this.tickPositions);
var tp = this.tickPositions,
first = tp[0],
last = tp[tp.length - 1],
ticks = [],
interval = 24 * 36e5;
while (first <= last) {
ticks.push(first);
first += interval;
}
return ticks;
},
Demo: http://jsfiddle.net/LeL28nqr/6/
For a better readability, I suggest to change labels.step option - for example set to every 7th day: http://jsfiddle.net/LeL28nqr/7/

How to remove negative symbol on values Google Charts?

i have a column chart and work fine, but i want to allways show positive number, but i force negative number to "divide" bars on top and bottom.
He a example:
Here my code
google.load('visualization','1.1',{packages:['corechart']});
google.setOnLoadCallback(function(){
var GoogleChart=new google.visualization.ColumnChart(document.getElementById( 'chart' ));
var data = google.visualization.arrayToDataTable([
["Age","Male","Female"],
["<15",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
["15-20",{"v":8.3333333333333,"f":"8,3333333333333%"},{"v":0,"f":"0%"}],
["20-25",{"v":75,"f":"75%"},{"v":-8.3333333333333,"f":"8,3333333333333%"}],
["25-30",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
["30-35",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
["35-40",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
["40-45",{"v":8.3333333333333,"f":"8,3333333333333%"},{"v":0,"f":"0%"}],
["45-50",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
["50-55",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
["55-60",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
[">60",{"v":0,"f":"0%"},{"v":0,"f":"0%"}]
]);
new google.visualization.NumberFormat({"pattern":"#,##%"}).format(data, 1);
new google.visualization.NumberFormat({"pattern":"#,##%"}).format(data, 2);
var options ={
"isStacked":true,
"hAxis":{
"title":"age"
},
"vAxis":{
"title":"Percentage",
"format":"#,##%",
"viewWindowMode":"explicit",
"viewWindow":{
"min":-100,
"max":100
}
}
};
GoogleChart.draw(data, options);
i dont know how to remove negative symbol("-").
Thanks
P.S: Google Charts 1.1
The google visualization pattern format is a subset of the ICU pattern set. By that you can specify subpatterns for both positive and negative numbers to avoid the minus sign (because if the negative subpattern is not specified, you will get the minus prefix by default) :
format: "#,##%;#,##%"
Unfortunetaly this does not work in visualization - it complains about "Too many percent/permills" - but since % is nothing but "Multiply by 100 and show as percentage" - then you can simply add ,00% as a string suffix instead :
vAxis:{
format:"#,##',00%';#,##',00%'",
...
}
new google.visualization.NumberFormat({"pattern":"#,##',00%';#,##',00%'"}).format(data, 1);
new google.visualization.NumberFormat({"pattern":"#,##',00%';#,##',00%'"}).format(data, 2);
Minus sign now removed from both the vAxis and tooltips.
demo -> http://jsfiddle.net/pcvtf7q9/

How to set the background-color of a SAPUI5 Table Column dynamically?

Assume a table with a date header (days 1 till 31) of a given year and month.
The content of the table depends on the selected year and month of course.
Now, for example, assume to set the background-color of all "weekend" columns to "gray".
With the following code (example from http://scn.sap.com/thread/3360580) we have some problems:
we can only set the background of available data (assume a table with
10 default rows but only 2 entries; so we can only set the background of the first two entries)
we "misuse" the tooltip property (or any other) to handle the background color
removing of class value seems not working this way, if we change year/month of the bound table data we should change the color accordingly
oTemplate.bindProperty("tooltip", bindPath, function(sValue) {
var classToSet = "";
switch (sValue) {
case "A": classToSet = "cssClassX"; break;
case "B": classToSet = "cssClassY"; break;
default: break;
}
cellId = this.getId();
$("#"+cellId).parent().parent().removeClass("cssClassX", "cssClassY");
$("#"+cellId).parent().parent().addClass(classToSet);
}
More or less the question is:
Is there a way to bound the background-color of a full table column on some data?
Wouldn't the sap.me.OverlapCalender be a better choice instead of using a table? Gives you way more freedom, especially when combined with the sap.me.CalendarLegend control
See https://sapui5.hana.ondemand.com/sdk/test-resources/sap/me/OverlapCalendar.html for a working example