How to get columnSpan working in QtQuick GridLayout? - qtquick2

I am trying to create a simple layouting example using QtQuick Layouts.
My goal is to display a layout using GridLayout where I have 3 columns, the first one using 60% of the space, the second and third using 20% each, for a total of 100%.
I would expect the following to give me the expected results, but for some reason it doesn't:
Window
{
width: 1920
height: 1080
visible: true
GridLayout
{
width: parent.width
height: parent.height
columns: 5
Rectangle
{
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 3
}
Rectangle
{
color: "green"
Layout.fillHeight: true
Layout.fillWidth: true
}
Rectangle
{
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
Running the above example gives me the following result, each column using a third of the available space:
What I've tried, without luck:
Removing the explicit columns property for the GridLayout
Specifying an explicit row count for the GridLayout using the rows property
Specifying explicit column and row properties for the rectangles
Specifying explicit columnSpan and rowSpan for all rectangles
Fiddling with the number of columns specified for the GridLayout
Removing the Layout.fillWidth attached properties
What am I doing wrong?

I think you're looking for Layout.preferredWidth. When combined with fillWidth: true this acts as a "stretch factor", meaning it becomes relative to the preferred widths of other items in the layout. I just used the percentage values you gave, but any numbers in the same proportions would work (eg. 6, 2, 2).
Window
{
width: 1920
height: 1080
visible: true
GridLayout
{
width: parent.width
height: parent.height
columns: 3
Rectangle
{
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 60
}
Rectangle
{
color: "green"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 20
}
Rectangle
{
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 20
}
}
}
(If you specifically wanted to use columnsSpan for some reason, please explain.)

Related

How to color individual boxes of an echarts boxplot based on function

How do I color each boxes individually in an echarts box-plot based on a function?
The following function works on a simple bar chart and colors the bars appropriately:
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split("_", 1).toString()]
},
},
}]
However, it does not work on a box-plot:
series: [{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split('_', 1)];
}
},
encode: {
tooltip: [1, 2, 3, 4, 5]
}
},
{
name: 'outlier',
type: 'scatter',
encode: {
x: 1,
y: 0
},
datasetIndex: 2
}
]
If I provide color: "red" rather than a function all boxes are colored red. This leads me to believe that it needs to happen in the transform.config which I can't find in the documents or tutorial.
Echarts Box-Plot currently
The link is the complete charts in its current form.
Apparently, echarts only allows scripting (i.e., using a function for) either the line color -- option itemStyle.borderColor or the fill color -- option itemStyle.color.
The difference between the two appears to be made by the value of the internal property BoxplotSeriesModel#visualDrawType. It is now set to "stroke", which means that borderColor can be set via a function.
Since you wanted to set the fill color, its value should be set to "fill". I searched a way to change that property - it was rather difficult for echarts don't document an API for extensions. Still, navigating the source code I came up with this hacky solution:
const BoxplotSeriesModel = echarts.ComponentModel.getClassesByMainType('series').find(cls=>cls.type==='series.boxplot');
const BoxplotSeriesModelFill = function(...args){
const _this = new BoxplotSeriesModel(...args);
_this.visualDrawType = 'fill';
return _this;
}
BoxplotSeriesModelFill.type = BoxplotSeriesModel.type;
echarts.ComponentModel.registerClass(BoxplotSeriesModelFill);
That's a "patch" to be applied at the beginning of your script, immediately after you have the echarts global defined.
Here's a forked version of your code that uses that patch. The only other change I made was to set a borderColor (can now only be a fixed value) to black.
This will not get you all the way, but if you add colorBy: "data" to your options and remove the itemStyle, it will look like this:

Ag-grid: how to size columns to fit contents?

Ag-grid has a sizeColumnsToFit function that sizes the columns to fit the screen, but what I want is to size the columns to fit the data. In other words I want each column's width to be the minimum required to fit its content (without truncating strings and adding ellipses) even if that means I have to scroll horizontally to see some of the columns.
The autoSizeColumns function seems to be making all the columns equal width, disregarding the width of the contents.
You can see both of these functions in the "Resizing Example" demo on this page.
For the "size to fit" option you can see truncated strings in some columns, but not the first column, presumably because it has "suppressSizeToFit: true". But adding that option to all column defs doesn't solve the problem; there's still some truncation in some columns, while others are wider than they need to be for the content.
Here's the code from that example:
const columnDefs = [
{ field: 'athlete', width: 150, suppressSizeToFit: true },
{
field: 'age',
headerName: 'Age of Athlete',
width: 90,
minWidth: 50,
maxWidth: 150,
},
{ field: 'country', width: 120 },
{ field: 'year', width: 90 },
{ field: 'date', width: 110 },
{ field: 'sport', width: 110 },
{ field: 'gold', width: 100 },
{ field: 'silver', width: 100 },
{ field: 'bronze', width: 100 },
{ field: 'total', width: 100 },
];
const gridOptions = {
defaultColDef: {
resizable: true,
},
columnDefs: columnDefs,
rowData: null,
onColumnResized: (params) => {
console.log(params);
},
};
function sizeToFit() {
gridOptions.api.sizeColumnsToFit();
}
function autoSizeAll(skipHeader) {
const allColumnIds = [];
gridOptions.columnApi.getAllColumns().forEach((column) => {
allColumnIds.push(column.getId());
});
gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((response) => response.json())
.then((data) => gridOptions.api.setRowData(data));
});
Any help?
I'm actually trying to get this working with JustPy using run_api, and I have that (sort of) working, except that the sizeColumnsToFit function doesn't do what I expected.
Most columns of my data consist of fixed-width strings (different widths, but the same width for all strings in a column), so I guess my "plan B" is to commit to a monospace font and font size and try to use trial and error to come up with a width calculation formula based on string lengths.
But sizing columns to fit data is a pretty common thing to want (isn't that what autofit does in Excel?), so I'm hoping there's a more robust solution.
I think you'll find autoSizeColumns does what you need it to.
Take a look at this demo.

Google embed api set chart background color

i am trying to edit the background colour of my chart however it isnt working i can only edit the background colour of the full thing not the chart area, my code is below
var sessions = {
query: {
dimensions: 'ga:date',
metrics: 'ga:sessions'
},
chart: {
type: 'LINE',
options: {
width: '100%',
title: 'Sessions',
titleTextStyle: {
color: '#0f55c4',
fontSize: '16',
bold: true
}
}
}
};
I have tried all the following combinations none have worked;
backgroundColor: 'red', (changed background colour not chart colour)
chartArea: {
backgroundColor:'red'
} (again background colour only)
chartArea: {
backgroundColor: {
fill: 'red'
}
} (again background colour only)
chartArea: {
fill: 'red'
} (doesn't work)
Not to sure what else i can try I've tried everything i can find in the documentation and several sites nothing seams to work it just goes onto the whole background not just the chart area, any help is greatly appreciated.
Thanks.
According to the documentation you're able to change the background color and the backgroundcolor of the chartArea.
I'm able to change both of these colors with the following option:
var options = {
backgroundColor: '#ccc',
chartArea: {
backgroundColor:'#e5e5e5'
}
};
Fiddle.
Sadly I'm not familiar with the way you have arranged your options and such, but my guess would be that you should place this option within
options: {
width: '100%',
.....
chartArea: {
backgroundColor:'#e5e5e5'
}
.......
};
I hope this helps you out!

Reduce the length of callout line in Pie chart Sencha touch

Below is the code for a pie chart i have in my Sencha touch app. The issue i face is that whenever the space to display chart is not enough for all labels there are callout lines and labels, but then i want these callout lines to be shorter in length then they are right now because they do not fit my screen and labels get cut.
I cannot find the correct config property for that.
EDIT - the two charts in image have the same code and are placed in hbox layout in container
{
xtype: 'polar',
itemId: 'pieChart',
background: 'white',
store: 'GraphsStore',
shadow: true,
innerPadding: 25,
//bind the chart to a store with the following structure
//interactions: ['rotate'],
colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
//configure the legend.
legend: {
position: 'top',
//width: 100
hidden: true
},
//describe the actual pie series.
series: [{
type: 'pie',
xField: 'g1',
renderer: function(sprite, config, rendererData, index) {
var changes = {},
store = rendererData.store,
curentRecord = store.getData().items[index];
var text = curentRecord.data.g1;
changes.text = text;
return changes;
},
label: {
field: 'name',
display: 'rotate',
font: '8px'
},
donut: 25,
style: {
miterLimit: 5,
lineCap: 'miter',
lineWidth: 1
}
}]
}
Any pointers will be helpful !
Thanks.
In the chart/series/sprite/PieSlice.js, modify the following two lines:
x = centerX + Math.cos(midAngle) * (endRho + 40);
y = centerY + Math.sin(midAngle) * (endRho + 40);
Change the 40 to a smaller number.

Show legend of "Indicator plot" in dojo charts

Is there a way to create a Legend control for series that belong to Indicator Plot with Dojo Charting.
I've tried some standard well described ways from the documentation. But with no success! Legend are not appearing for Indicator Plot.
Maybe somebody know is it possible to draw legend for this case or not?
Thanks in advance!
EDIT(my code added):
1. id - id of chart dom element.
2. opts.chartOpts - chart options from outside js.
3. legname - id of legend dom element.
4. scale.avg - is just a double value.
this.chart = new Chart(id, this.opts.chartOpts);
this.chart.addPlot("default", {
animate: { duration: 1000, easing: easing.linear },
type: ColumnsPlot,
markers: true,
gap: 1
});
this.chart.addPlot("avgline", {
type: IndicatorPlot,
vertical: false,
lineStroke: { color: "#00ff00", style: "ShortDash" },
stroke: { width: '1.2px' },
fill: '#eeeeee',
font: 'normal normal normal 11px Arial',
labels: 'none',
offset: { x: 32, y: 4 },
values: [scale.avg],
precision: this.opts.precision
});
//Add axis code goes here... cutted for clearance
this.chart.addSeries('Power', chartOptions.data);
this.chart.addSeries('Average', [scale.avg], { plot: 'avgline' });
var tip = new Tooltip(this.chart, "default", { 'class' : 'kaboom' });
var mag = new Magnify(this.chart, "default");
var hightlight = new Highlight(this.chart, "default");
this.chart.render();
this.leg = new Legend({ chart: this.chart, horizontal: false }, this.legName);
And as result of this code I see legend for 'default' plot 'Power' series only. And nothing for 'Average' series.