We Keep Coding

Data label not rendered on sapui5 viz dual y-axis graph when line and column intersect

I have a requirement to show data labels of two graphs on the same axes.
Only when they intersect, one of the two labels won't show. This can be demonstrated below:
As you can see on the 2nd, 5th and 6th columns from the left with values 0%, 7% and 8% respectively
only the orange line values are shown but the blue column values are missing.
This is the final html of the graph after rendering:
So data-datapoint-id 142, 145 and 146 are missing from the html.
I tried using the plotArea.dataLabel.renderer function as a manipulation of what was proposed here but nothing changed, still not rendering.
Anyone encountered a similar problem? Is that a sapui5 issue or can it be fixed by manually inserting the labels into the HTML if so how?
Thanks,
Ori

Using SVG text and jQuery I managed to manually insert the labels into the top middle of the blue rectangle columns.
This is the result, not perfect but works:
and this is the code:
chart.setVizProperties({
plotArea: {
dataLabel: {
formatString: {'פחת כללי': FIORI_PERCENTAGE_FORMAT_2},
renderer: function (oLabel) {
// Create empty text node to be returned by the function such that the label won't be rendered automatically
var node = document.createElement("text");
if (oLabel.ctx.measureNames === "כמות פחת כללי") {
var kamutLabelIdx = oLabel.ctx._context_row_number;
// Use jQuery and SVG to manipulate the HTML
var kamutLabelQuery = '[data-id=\"' + kamutLabelIdx + '\"]';
var kamutColumn = $(kamutLabelQuery)[0];
// Create text element as child of the column
kamutColumn.innerHTML += "<text>" + oLabel.text + "</text>";
var labelNode = $(kamutLabelQuery += ' text');
// Set the label position to be at the middle of the column
const labelLength = 60;
const xPos = (labelLength + oLabel.dataPointWidth) / 2;
const yPos = oLabel.styles['font-size'];
labelNode.attr({
"textLength" : labelLength,
"x" : xPos,
"y" : yPos,
"font-size" : yPos
});
return node;
}
}
}
}
});
The oLabel parameter of the renderer function provides useful info about the data label to be created:
I still wonder if that's a bug with sapui5 vizframe and if there is a simpler way to do this.
Please let me know of your thoughts

Highcharts: add custom text bottom left, like credits?

Highcharts can have a customized credits section; and that also has an alignment.
I would like to have both a url on the bottom-right, and a custom text (i.e. the current date/time) on the bottom-left.
What would be the best way to add that, keeping the same look-and-feel as the credits?

Use the SVGRenderer tool to render a custom text.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
Check the included demo.
EDIT:
Here is a simple example how you can achieve it: https://jsfiddle.net/BlackLabel/x3om10L8/
chart: {
events: {
render() {
let chart = this,
credits = chart.credits,
creditsBB = credits.getBBox();
if (chart.customLabel) {
// keep label responsive
chart.customLabel.destroy();
}
chart.customLabel = chart.renderer.label('my custom text', 0, creditsBB.y - 5).css(credits.styles).add();
}
}
},
API: https://api.highcharts.com/highcharts/chart.events.render

Javascript - AmCharts hide and show graph using legends

I am using Amcharts plugins in making a graph. But I am having issues in hiding and showing the graph using legends.
This is my function code:
function handleLegendClick( graph ) {
var chart = graph.chart;
for( var i = 0; i < chart.graphs.length; i++ ) {
if ( graph.id == chart.graphs[i].id )
chart.hideGraph(chart.graphs[i]);
else
chart.showGraph(chart.graphs[i]);
}
if (graph.id == chart.graphs['3'].id)
chart.hideGraph(chart.graphs['4']);
if (graph.id ==chart.graphs['4'].id)
chart.hideGraph(chart.graphs['3']);
chart.validateNow();
// return false so that default action is canceled
return true;
}
This code is working but my problem is, it hides only one graph and show the graph again when the user click another legend. What I need to do is to hide multiple graphs by clicking it's assigned label text and marker, and when the graph is hidden I should click the same legend to show the hidden graph.
Please help me. Thank you.

From your description, the default legend behavior does exactly what you're asking for without needing to add your handleClick code. I'm not sure what's the point of it.
var chart = AmCharts.makeChart("chartdiv", {
// ...
"legend": { }, //default setup
});
Here's an example with multiple graphs.

Animate transition between values on amcharts svg bar graph

I have a bar chart I built using the 'amcharts' plugin.
The graph updates its values when the a dropdown menu item is selected,
I am trying to get the graph to animate the transition between the values when it changes, currently it either resets the whole animation and animates from '0', or if animateAgain() is commented out (line 142 in js) it jumps to the new value. This code is called after the values have been updated:
// Animate between values instead of resetting animation?
chart.animateAgain(); // Resets animation
chart.validateData(); // redraws the chart with new data
I've searched the docs and google but can't find anything to help with this, anyone have any ideas or pointers in the right direction? Is it possible? Here's the codepen :
http://codepen.io/bananafarma/pen/yewbJQ
Cheers!!

You can use amCharts' own Animate plugin.
It adds a new method to chart objects animateData().
function updateGraph() {
var newData = chart.dataProvider.slice();
if( document.getElementById('data-set').value == 1 ) {
newData[0].gain= 3.8;
newData[1].gain= 8.5;
newData[2].gain= 3;
newData[3].gain= 1.9;
}
else if ( document.getElementById('data-set').value == 2 ) {
console.log("yo");
newData[0].gain= 2.6;
newData[1].gain= 8.6;
newData[2].gain= 13.8;
newData[3].gain= 4;
}
else if ( document.getElementById('data-set').value == 3 ) {
newData[0].gain= 4.8;
newData[1].gain= 10.6;
newData[2].gain= 15.9;
newData[3].gain= 16;
}
// use Animate plugin
chart.animateData( newData, { duration: 1000 } );
}
Here's your updated working demo.

How to provide Space between Y-2 Axis Labels and Title at Y-2 axis in Flotr2 Multi-Axis Chart

I'm Using Flotr2 for Multi-Axis Chart creation..
Here is the Flotr2 Multi-Axis Chart Image:
In this Multi-Axis Chart at Right side Axis Labels and TITLE are overlapping..
I need How to provide some space between Axis Labels and TITLE for easy reading.
I'm adding the reference of this Multi-Axis Flotr2 Chart Url: http://www.humblesoftware.com/flotr2/#!advanced-titles
Can anyone help me pls..

It is a bug, as can be seen here:
https://github.com/HumbleSoftware/Flotr2/issues/151
A good workaround for me is to put in the page html an image with the axis title in the right corner of the graph,.

You could try changing the labelMargin in the grid object.
grid : {
verticalLines : false,
backgroundColor : 'white',
labelMargin: 20
},
Seems to help a bit, but it effects all the labels.

Okay, live with the bug for now.
Add spaces to the tick labels (the numbers) would do the trick making room for the axis label.
function addSpace(v,axis) {
return Flotr.defaultTickFormatter(v,axis)+" ";
}
...
y2axis: title:"Leistung (W)", tickFormatter:addSpace,
Three spaces (0x20) are sufficient for me.
Later I found, IMHO, ist is a bug in the internal getBestTextAlign member function. When I remove the two obscure angle-dependent alignment adjustments, everything works fine:
getBestTextAlign: function(angle, style) {
style = style || {textAlign: 'center', textBaseline: 'middle'};
angle += Flotr.getTextAngleFromAlign(style);
// if (Math.abs(Math.cos(angle)) > 10e-3)
// style.textAlign = (Math.cos(angle) > 0 ? 'right' : 'left');
// if (Math.abs(Math.sin(angle)) > 10e-3)
// style.textBaseline = (Math.sin(angle) > 0 ? 'top' : 'bottom');
return style;
},
I have no idea what's the idea behind this code. It is not commented at all. Sorry, no good coding practise.