Is there a way to make the labels in a legend with horizontal direction wrap?
I made a simple example wtih the cars dataset where i transformed the categtories to generate longer strings in the Vega Editor:
Suppose I have more categories but also want to put the legend at the top/bottom to provide more horizontal space for the chart area.
Use the columns property of legend:
{
"legend": {
"orient": "top",
"direction": "horizontal",
"columns": 2
}
I've created a custom legend in a separate div.
The categories and their mapped colors in the Vega visualization can be accessed via the View API:
const colors = vegaView.scale('color').range();
const categories = vegaView.scale('color').domain()
Related
I want to display particles only inside or as part of 1 div. I did come across many different solutions but I can't seem to get any to work on my React app.
Here is a sample code that I created - https://codesandbox.io/s/particles-inside-1-div-9vhqgi?file=/src/Stars.js
Could someone please help me alter the styles to show the particles as part of the background in the middle div
I used the workaround which was to give a ref to a div parent from the canvas container, then refer to the canvas element in the DOM and set it's style to absolute
Working solution is in the codesandbox in the question.
// outer div ref -> element parent div -> canvas style
myRef.current.children[0].children[0].style.setProperty(
"position",
"absolute",
"important"
);
// stars-config.json
In your particle Json, under the color part, add the "fullScreen" and the "style" (The "zIndex":"-1" is optional)
"color": {
"value": "#fcf6f4"
},
"fullScreen": {
"enable": "false",
"zIndex": "-1"
},
"style": {
"position": "absolute",
"height" : "100%",
"top": "0",
"left":"0"
},
Currently I have two Polymer components that share a great amount of data. You can see here:
<polymer-component1
series="{{series}}"
stackhelper={{stackhelper}}
stack={{stack}}
controls={{controls}}
camera={{camera}}
threed={{threed}}
scene={{scene}}
renderer={{renderer}}>
</polymer-component1>
<polymer-component2
stackhelper=[[stackhelper]]
stack={{stack}}
controls={{controls}}
camera={{camera}}
threed={{threed}}
scene={{scene}}
renderer={{renderer}}
guiobjects={{guiobjects}}>
</polymer-component2>
This is working fine right now but whats the best practice about sharing data? Any way to share all the properties between two components?
It's recommended to share data through data binding, just as what you're doing. You can share any property, not just strings and numbers. e.g. assuming you have an object
JS
data = {
series: "",
stackhelper: "",
stack: "",
controls: "",
camera: "",
threed: "",
scene: "",
renderer: "",
}
Your code can be rewritten like this.
HTML
<polymer-component1 data="{{data}}"></polymer-component1>
<polymer-component2 data="{{data}}"></polymer-component2>
In Polymer 2 one element can just inherit the properties by extending it.
class MyElementSubclass extends MyElement {...}
Or you create an element with just the properties both need and then both components extend the parent. You can find this here scroll down to Extending an existing element
I'm trying to display two gridviews using the dhtmlx scheduler library. The way we are using the scheduler is so that employees can sign out. Right now, we can view it as a monthly view but we also want to have a day view too.
I was able to create the grid, but when I try to click button it does not display the day report.
Here is a code snippet
scheduler.locale.labels.grid_tab = "Month";
scheduler.createGridView({
name:"grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"month",
step:1
});
scheduler.locale.labels.grid_tab2 = "Day Report";
scheduler.createGridView({
name:"day_grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"day",
step:1
});
Your code seems to work on scheduler demos
http://docs.dhtmlx.com/scheduler/snippet/b9320394
The only thing is that you need to define label for a day_grid view correctly, the variable should be named "day_grid_tab" instead of "grid_tab2"
scheduler.locale.labels.day_grid_tab = "Day Report";
Is it possible to insert custom widget (for example button or checkbox) in gridpanel column header?
From documentation it's unclear.
Already I've tried to google it, but without any success.
Please help!
The short answer is 'yes'.
You can extend the grid column, then make an afterrender listener.
In the listener, get the column's innerEl = (component.getEl().down('column-header-inner').
Then, make a new component like button/checkbox, columnComponent.headerButton = new Ext.button.Button()
Then, render it columnComponent.headerButton.render(innerEl).
I hope this helps.
I had the same problem: How to get a button (or any custom component) into the extjs grid header field.
After some research I found the solution for extjs 5: You can configure the "items" property of the grid columns:
{
xtype: "gridcolumn",
text: "column header name in grid",
dataIndex: "...",
items:[
{
xtype: "button",
text: "Foo",
handler: "onFooClick"
}
]
}
This will for example show a button under the grid header text inside the header component.
Having a strange issue with jqplot. I've created a horizontal bar chart with 2 series and 5 labels; all populated with variables from a table.
var plot1 = $.jqplot('chart1', [
[[SERIESA[0],TITLE[0]], [SERIESA[1],TITLE[1]], [SERIESA[2],TITLE[2]], [SERIESA[3],TITLE[3]], [SERIESA[4],TITLE[4]]],
[[SERIESB[0],TITLE[0]], [SERIESB[1],TITLE[1]], [SERIESB[2],TITLE[2]], [SERIESB[3],TITLE[3]], [SERIESB[4],TITLE[4]]]], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
// Rotate the bar shadow as if bar is lit from top right.
shadow: false,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
This renders a lovely horizontal bar chart. I would like for the two series to be stacked under each label, but when I add the line
stackSeries: true,
above my seriesDefaults my bars all vanish. Everything else (labels, ticks, etc) remains the same. Is there something in addition to the stackSeries option I need to add?
I am not sure what might be the reason with your code, what you showed appears to be all right. Maybe something wrong with the way you set the data, but then again it wouldn't work at all.
Check out my example it might help you out.
I found a way to fix my problem (not entirely, but sufficiently for my need). This issue only occurs when I use custom lables pulled from somewhere else; if I use generic "1,2,3,4,etc." the graph stacks properly and shows data. Ideally I would have custom lables, but I can just put a simple table beside the graph to act as the axis labels.
Actually you can have custom labels, by adding tickt, for example:
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: -90
},
labelOptions: {
fontSize: '11pt',
},
ticks: ['tick 1', 'tick 2'],
}