I'm implementing the VizFrame component for an SAP ui5 project, so i used the "dual_stacked_combination" type.
When I try to apply the color property, it doesn't work, and the result is some stacked columns with the gradient of the same color.
var scales = [{
'feed': 'color','palette': ['#ff9900', '#0090ea', '#00ff00', '#ff0000', '#f200ff', '#ffe100', '#00ffed', '#039660','#9e9e9e','#000000']}];
oVizFrameLine2.setVizScales(scales);
I want every part of the stacked column to have its own color
use vizProperties and set plotArea.colorPalette to get different colors for each stacked segment
<viz:VizFrame id="idVizFrame" height="50%" width="100%"
vizType='stacked_column' vizProperties="{ plotArea : {colorPalette:
['#f00','#0f0','#00f']} }" >
Related
How do I obtain colour imagery, or more generally, styling information for each legend entry to construct a custom legend in a chart in Swift Charts?
I have a chart here, with a legend positioned on the right, but using the content: argument of chartLegend does not pass any info into the closure to use. I would like to wrap the legend into a scroll view, so when there are too many entries, the chart will appear correctly on the screen, and the user can scroll through the legend below the chart.
Chart(points, id: \.self) { point in
LineMark(
x: .value("time/s", point.timestamp),
y: .value("potential/mV", point.potential)
)
.foregroundStyle(by: .value("Electrode", point.electrode.symbol))
}
.chartLegend(position: .bottom)
// ...
Here is the chart with too many legend entries interfering with the chart sizing, resulting in cropping:
And here is the chart with only a few entries so that the chart is sized correctly, with no cropping, and the legend has text to discern between the electrodes they represent:
Any help is much appreciated.
Not scrolling but the chart legend can be placed on the side with code like this:
.chartLegend(position: .trailing, alignment: .top)
This gives more room for a legend. The legend won't scroll but all the items will be listed even if going past the end of the chart. The frame height can be increased. The example shows a before(default) and after(using the code above).
The colors can be assigned manually using the chartForegroundStyleScale like this after the end of the chart:
.chartForegroundStyleScale([
"Hong Kong": Color.green,
"London": Color.red,
"Taipei": Color.purple,
"New York": Color.teal,
"Paris": Color.pink,
"Sydney": Color.orange
])
Symbols can be created based on the series:
.symbol(by: .value("City", series.city))
I'd like to be able to control bar colors based on xAxis/category label name, throughout multiple charts, while using the dataset.source option of feeding data.
I'm guessing the solution might involve using visualMap?
customColors = {
x1: '#123',
x2: '#456',
x3: '#789',
...
}
I don't think visualMap is the way to do this, you probably want to set the colors in series:
https://echarts.apache.org/en/option.html#series-bar.data.itemStyle.color
or define a color palette:
https://echarts.apache.org/en/option.html#color
Echarts should color the chart by series by default:
https://echarts.apache.org/en/option.html#series-bar.colorBy
I have a table (sap.m.table) and am using the delete table mode (mode="Delete") and am also including the edit feature by setting the ColumnListItem type to (type="DetailAndActive")
<Table id="usersTable" mode="Delete"
...
<ColumnListItem type="DetailAndActive" vAlign="Middle" detailPress="onEdit" highlight="{= ${users>EmailConfirmed} === true ? 'None' : 'Error'}">
I have 2 lines per row as I have an objectidentifier as 1 of the cells:
<ObjectIdentifier title="{users>Email}" text="last: {path: 'users>LastLoggedOnUtcDate', formatter: '.formatDateTime'}"/>
When displaying I get the following outcome:
The button alignment is out - the edit button is vertically aligned at the top while the delete button is vertically aligned in the center.
As you can see I have set vAlign to Middle on the ColumnListItem.
I would appreciate any help for aligning the edit button in the center too?
Thanks!
Does anyone know if its possible to offset the markers so they appear between the column of a google chart?
So that it appears like this design mockup...
Instead of the markers being directly inline with the columns like below which is the default behaviour of the google.visualization.ColumnChart api.
I have search through the documention, however cannot find any references to options that would allow for this kind of customisation. Does anyone know if perhaps there is a way of manipulating the layout after it has been rendered? Or if in fact there is an option to do this but I've just overlooked it?
Thanks
The chart is rendered in a <svg> structure containing <g>, <rect>, <text> (and other) elements. The structure differs a lot form chart to chart, and the internal ordering can change if basic chart elements are left out. The horizontal axis elements is rendered as something like
<text text-anchor="middle" x="468.46875" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">12</text>
To get an idea of where to look for those <text> elements in the <svg> structure you can copy the rendered code of the chart to a editor capable of styling code, or use a online code beautifier.
Then simply iterate through the <svg> by using DOM methods such as querySelector, querySelectorAll, getElementsByTagName etc.
See this google.visualization.ColumnChart :
By changing the x attribute of each <text> element that belongs to the horizontal axis we can get the labels to appear between the columns :
google.visualization.events.addListener(chart, 'ready', updateAxis);
function updateAxis() {
var x,
svg = document.getElementById('chart').querySelector('svg'),
g = svg.querySelectorAll('g'),
chartArea = g[3].querySelectorAll('g'),
hAxisTexts = chartArea[5].querySelectorAll('text');
//0-15 labels, the rest belongs to the yAxis
for (var i=0;i<16;i++) {
x = parseFloat(hAxisTexts[i].getAttribute('x'));
if (x>9) {
x = x-15;
} else {
x = x-18;
}
hAxisTexts[i].setAttribute('x', x);
}
}
demo -> http://jsfiddle.net/hrrL45oq/
This is only an example. You will perhaps need to target a different <g> element holding the <text>'s, and how you manipulate x or other attributes of <text> depends of the layout of the chart.
I need the legends of Google chart to get wrapped (comes in new line) automatically if it exceeds container area.
I don't want scroll button as it is not enough convenient.
With available customization options, seems it cannot be done.
Any other way?
Use the maxLines property for the legend.
i.e.:
options.legend = {position: 'top', maxLines: 5};
Note that this undocumented property only works if the legend is positioned at the top and there is enough vertical space to render both the chart and multi-line legend.
with the maxLines property for the legends, chartArea with specific set of values can help in rendering the display.
legend: { position: "top", alignment: "start", maxLines: 2 },
chartArea: {top:50,bottom:30,right:0,left:50, 'width': '100%' }
I did a lot of testing of this and it seems that you need to have chartArea width and height set to 'auto'. Still not perfect but sort of OK.