Using ExtJS,
new Ext.slider.MultiSlider({
renderTo: 'multi-slider-horizontal',
width : 214,
minValue: 0,
maxValue: 100,
values : [10, 50, 90],
plugins : new Ext.slider.Tip()
});
now this will display slider, but my requirement is to make it work when css is turned off?
trying to make it compliant to section 508.
Since I don't have your working example, I will use the demos I found. It seems as though none of the sliders on that page get keyboard focus, therefore you have bigger issues than making it work without CSS.
As a work around I would probably recommend you putting a compliant text box next to the slider so that somebody could use the text box to update the slider.
Related
I have 3 lines graphed, and when I hide one, the color of the bottom line changes to the color of the top one, how do I keep the color the same regardless of the hidden line?
It took me some time to find a way to achieve what you wanted and I'm giving you live demo (React Google Charts - Toggle Line Visibility) so you can inspect it and see if that's what you wanted.
It's a little bit hacky, but hey it's working fine, I guess.
What I did is:
Listen for select event and detect when legend is pressed
Apply series with some configuration and make it state variable for our custom Graph component
By setting lineWidth: 0 and tooltip: false we fake line invisibility. Line width trick is obvious... Tooltip is disabled so you can't get tooltip when you try to hover over "invisibile" line on the graph (try to comment out line of code which sets tooltip: false and go hover over the area where dot of an "invisible" line is suppose to be to see what I mean by that)
I hope this helps, because there is nothing out there for this scenario in React.
So I created a bar chart using echarts(v4.6.0) library inside Reactjs project. It has legend, data series chunked into groups with same colour and dataZoom slider. Every legend label corresponds to particular group of bars in the graph(they have same colours). However at the moment if user clicks on legend label, bars that correspond to this label disappears. What I want to achieve is when user clicks on legend label, the chart needs to zoom in to the group of bars that correspond to it instead of hiding them. Is there any way to do this?
In the common practice to make bar selected you can use the emphasis, it's style set activated by mouseover (something like rules declaration under :hover in CSS), for example (see tutorial):
itemStyle: {
// default styles
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
// activated by mouseover
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
If you need just to show bar in focus, it's easy:
Define emphasis styles.
Capture event legendselectchanged on legend component and suppress default behavior (see workaround) for prevent series disappear.
Dispatch highlight action for series or dataIndex and bar will be looks like selected.
I could be wrong, but as far as I know to zoom single (and stacked) bar it's not easy task. There are several unconventional ways like a draw resized bar clone above original, manipulations with datazoom component and recalculate/update bar data on mouseover and then return back old data on mouseout. Let me know if you choose one of these options I'm will try to help you.
Very simple scenario: I want to have a small grid for a good overview. But when clicking in a cell the editor should have a higher width than the actual column.
Example:
https://fiddle.sencha.com/#fiddle/reg&view/editor
I tried to specify the width and I tried to add it in the afterrender. Width is always exactly as wide as the column. Same problem with textareas.
editor: {
xtype: 'textfield',
enableKeyEvents: true,
selectOnFocus: true,
width: 500,
listeners: {
afterrender: function (field) {
field.setWidth(500);
}
}
}
I thought this should be easy but I couldn't find a way to accomplish that. I can specify the height on a textarea but the width isn't considered.
Check below fiddle.
https://fiddle.sencha.com/#fiddle/27bv&view/editor
Here I have done change for setting width of table node in which cell editor is rendered by Ext.get(Ext.get(Ext.query('div.x-grid-editor')[0]).dom.childNodes[0]).setWidth(300).
This approach is having one limitation- for first time width is not getting set as in beforeedit event we do not get instance of editor.If we get this instance we can apply similar logic for setting editor's width.
please check if it could solve your issue or not.Also let me know for any changes.
Note: I have impl. this thing for first column only.
Okay, I figured out a solution which is pretty close to mine.
afterrender: function (field) {
field.bodyEl.setWidth(500);
}
This works for textareas and textfields with Ext version 5. I found out that in my fiddle I also used the wrong Ext version. Seems not to work with Ext 4.
https://fiddle.sencha.com/#fiddle/27cc&view/editor
I am new to chrome app development. I have searched through many reference but I couldn't find a way to add close button to chrome app as we can see in postman or in browser.
I have read this doc, but I am not able to write code.
Can some one please tell me how to add those buttons.
In createWindowOptions their is one attribute as frame by default it is set chrome.
I have set that option as none so that's why basic browser button like close, minimize and maximize was not visible.
I would recommend making your own frame and using a frameless window. Here is an example of it: Frameless Window Sample on Github
Otherwise, if you're ok with having the minimize and close buttons, you can set a min and max for width and height. This will get rid of the maximize button.
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'index.html',
{
id: 'mainWindow',
bounds: {width: 800, height: 600},
maxWidth: 800,
maxHeight: 600
}
);
});
I am using angular-chart.js to create a dashboard. Instead of using the built in legend within the canvas I created my own and am using ng-repeat to dynamically create the labels with matching colors.
Now, what I would like to accomplish is this: when an item is hovered in my custom legend it would highlight that item in the graph and vice versa.
I was thinking that perhaps if I can find what the event that is triggering the tooltip event I can manipulate that and create a ng-mousover expression...
is this even possible?
Thanks,
Emad
Not exactly, the same but someone posted an example of hiding / showing line on legend click: https://github.com/jtblin/angular-chart.js/issues/70
In Chart.js 2.x, there is support for an onclick event as well on the legend to something similar: http://www.chartjs.org/docs/#chart-configuration-legend-configuration
color: [
{
backgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
borderColor: 'rgba(255, 255, 255, 0)',
hoverBackgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderWidth: 10,
hoverRadius: 0
}
],
It works fine when mouse over on active segment in angular 2