I am trying to set scrollbar color in Amcharts, but none of the options specified on Amcharts site has worked.
I am using "#amcharts/amcharts4": "^4.2.2" in react app.
I have tried many options which are mentioned below. None of them are working.
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.fill = "#017acd";
chart.scrollbarX.setFill(new am4core.color("#017acd"));
chart.scrollbarX.setStroke(new am4core.color("#017acd"));
chart.scrollbarX.stroke = "#017acd"; //this sets the border line color of
scrollbar.
Thanks for the help.
A scrollbar has a background, a thumb, a startGrip and an endGrip. Each of them can be styled individually by :
chart.scrollbarX.background.fill = am4core.color("#017acd");
chart.scrollbarX.thumb.background.fill = am4core.color("#017acd");
chart.scrollbarX.startGrip.background.fill = am4core.color("#017acd");
chart.scrollbarX.endGrip.background.fill = am4core.color("#017acd");
chart.scrollbarX.stroke = am4core.color("#017acd");
You can create different states for all the components to set different colors for hover or press (down).
chart.scrollbarX.thumb.background.states.getKey('hover').properties.fill = am4core.color("#017acd");
chart.scrollbarX.thumb.background.states.getKey('down').properties.fill = am4core.color("#017acd");
I created this code pen to show you a complete example.
If you want to style not a single scrollbar, but all the scrollbars in your app I would suggest creating a custom theme for that.
function am4themes_myTheme(target) {
if (target instanceof am4core.InterfaceColorSet) {
target.setFor("secondaryButton", am4core.color("#6DC0D5"));
target.setFor("secondaryButtonHover", am4core.color("#6DC0D5").lighten(-0.2));
target.setFor("secondaryButtonDown", am4core.color("#6DC0D5").lighten(-0.2));
target.setFor("secondaryButtonActive", am4core.color("#6DC0D5").lighten(-0.2));
target.setFor("secondaryButtonText", am4core.color("#FFFFFF"));
target.setFor("secondaryButtonStroke", am4core.color("#467B88"));
}
if (target instanceof am4core.Scrollbar) {
target.stroke = am4core.color("#017acd");
}
}
am4core.useTheme(am4themes_myTheme);
Here is a code pen showing a theme example.
Related
I want to display table and its chart using toggle button. Default it should disply chart, when I click button, it should change to table view.
On first click it works but doesn't work from second click.
I have created the codesandbox project.
CodeSandbox
What mistake have I done in this code.
Dynamic change of the showTable option does not change the display of the table. You need to toggle the containers visibility:
Highcharts.Chart.prototype.viewData = function () {
$(this.renderTo).toggle();
if (!this.insertedTable) {
var div = document.createElement('div');
div.className = 'highcharts-data-table';
// Insert after the chart container
this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
div.innerHTML = this.getTable();
this.insertedTable = true;
div.id = this.container.id + '-data-table';
} else {
$('#' + this.container.id + '-data-table').toggle();
}
};
Live demo: https://codesandbox.io/s/l4x11ykm67
API Reference: https://api.highcharts.com/highcharts/exporting.showTable
I am a newbie to ExtJS.I am now working on grids.I would like to toggle the visibility of the headers on a button click(Show and hide the header only).Any suggestions should be appreciated.Thanks in advance.
I would try
var el = myDataGrid.headerCt.getEl();
if (el.isVisible()) {
el.hide();
} else {
el.show();
}
If you want to hide all headers in all grids, I suggest you assign them some custom class and then you do the above for all of them separatelly.
Something along the following lines (not tested)
var allGrids = Ext.dom.Query.select(".myDataGrids");
Ext.Array.each(allGrids, function(gridDomElement, index) {
var el = Ext.fly(gridDomElement);
// Do the above
// ....
});
I can't seem to get a tooltip to stick to a menu button. Is this a bug?
var menu = new qx.ui.menu.Menu();
var undoButton = new qx.ui.menu.Button("Undo", "icon/16/actions/edit-undo.png", this.__undoCommand);
var tooltip = new qx.ui.tooltip.ToolTip("test", null);
undoButton.setToolTip(tooltip);
By default, qx.ui.menu.Button hides tool tips. Try
undoButton.setBlockToolTip(false);
I am trying to figure out how to make a multi-screen app using Appcelerator Titanium. I am familiar with Android development, so using the Android SDK I would create a few different activities, each doing their different work (login screen, screen displaying list of items, etc.) What is the equivalent in Titanium? I know that app.js is the main part of the app, but I assume it is not recommended to just put all code in that single file. The kitchen sink app has a lot of files and functionality, but I am not sure how they all fit together. So, what is the recommended way to create a project in Titanium for a basic app with a few screens doing different things? I am missing the Titanium concept of a screen.
no..
you can do it like
var button = Ti.UI.createButton({..});
button.addEventListener('click',function(e){
var window = Ti.UI.createWindow({
url:"../newWindow.js",
title:"newWindow"
});
Titanium.UI.currentTab.open(window,{animated:true});
});
i recommend to use the MVC-pattern like i already posted here.
App.js file is basically the file to initialize different window screens, and use Tabs to load those windows screens.Here is a link to create simple screens Create Window & Tabs
For further properties related to TitaniumUI
Try doing this:
app.js
Tintanium.include('window1.js', 'window2.js');
...
var button1 = Titanium.UI.createButton({...});
button1.addEventListener('click',function(){
window1.open();
});
window1.js
var window1=Titanium.UI.createWindow({...});
...etc...
Hope this will help ;)
try using my code below:
// functions
function openHomescreen(e)
{
settings.close();
getlucky.close();
survey.close();
homescreen.url = 'homescreen.js';
homescreen.open();
}
function openGetlucky(e)
{
settings.close();
homescreen.close();
getlucky.url = 'getlucky.js';
getlucky.open();
}
// events
Ti.App.addEventListener('homescreen',openHomescreen);
Ti.App.addEventListener('getlucky',openGetlucky);
openHomescreen({});
To open homescreen in other JS file, use this.
Ti.App.fireEvent('homescreen');
After a lot of time research i i found the solution for opening different windows with a click event attached to a button.
employee.js
//Current window (employee window)
var employeeWin = Ti.UI.currentWindow;
//define button
var moveToDetailBtn = Ti.UI.createButton({
width : 200, //define the width of button
height : 50, //define height of the button
title : 'Show Detail' //Define the text on button
});
//Click event to open the Employee Details window
moveToDetailBtn.addEventListener('click', function(){
//Call a export function
var win = require('employeeDetails').getEmployeeDetailSWin;
//Create new instance
var employeeDetailsWin = new win();
//Open the Employee Details window
employeeDetailsWin.open();
});
//Add the button to the window
employeeWin.add(moveToDetailBtn);
In employeeDetails.js
exports.getEmployeeDetailSWin = function(){
//Creates a new window
var empDetailsWin = Ti.UI.createWindow({
backgroundColor : '#ffffff' //Define the backgroundcolor of the window
});
//Addin a label to the window
empDetailsWin.add(Ti.UI.createLabel({
width : 100, //Define width of the label
height : 50, //Define height of the label
title : 'Employee Details'
}));
return empDetailsWin;
};
I found the solution in this page: http://www.mindfiresolutions.com/Open-New-Window-Without-URL-Property-In-Titanium-2214.php
I have the following method which adds a new column to a Telerik RadGridView:
private void CreateNewColumn(FieldDescriptor fd, uint fieldno) {
fieldGrid.Columns.Add(new GridViewDataColumn() {
UniqueName = fd.fieldName,
Header = fd.displayName,
DataMemberBinding = new Binding("Fields[" + fieldno + "]"),
ContextMenu = new ContextMenu() {
Tag = fieldno,
Items = {
new MenuItem() {
Header = "Field Properties",
Command = Commands.FieldProperties,
CommandBindings = { new CommandBinding(Commands.FieldProperties, FieldProperties_Execute) }
},
new MenuItem() {
Header = "Delete Field",
Command = Commands.DeleteField,
CommandBindings = { new CommandBinding(Commands.DeleteField, DeleteField_Execute) }
}
}
}
});
}
The problem I'm having is that the context menu never appears when I right click anywhere on the grid. If I bind the context menu directly to the grid, i.e.
fieldGrid.ContextMenu = new ContextMenu() { ...
then the context menu shows up, but I have no way of determining which column the user right-clicked on. Has anyone gotten context menus to work on individual columns or column headers?
I cannot speak for Telerik's grid, but with the Infragistics grid you would attach the context menu to the grid, and then use the mouse location to determine what the user right clicked on in the grid. The Infragistics grid has some decent helper methods to facilitate the hit testing.
You can check my answer on your forum post:
http://www.telerik.com/community/forums/wpf/gridview/column-contextmenu.aspx