I am using unicode arrow at the value using the chart's numberSuffix. This effects all the numbers on the chart. Is there a way to just apply it only on the value?
I did use annotations before trying this out but scaling messes up with the arrow placement.
I have found another way of implementing the above mentioned feature.
A small hack into the code.
Here is the fiddle link.
Although accessing internal objects for implementation is not supported by FusionCharts as it is subjected to change.
FusionCharts.addEventListener('rendered', function(e) {
var dataset = e.sender.jsVars.instanceAPI.components.dataset[0],
labelEle = dataset.graphics.dataLabel && dataset.graphics.dataLabel[0];
labelEle && (labelEle.attr({
text: labelEle.attrs.text + " ↓"
}));
});
You can use annotations for this requirement.
Here is a workaround.
Fiddle
<div id="chart-container">FusionCharts will render here</div>
Related
Is there currently any way I can create an extension that applies a text decorator above or below the specified range which I can use to supply any HTML/CSS visual I want?
I'm still working through the API and my guess is either no, or not directly via the extensions API.
It depends on what types of decorations you are talking about. Since you used the words "text decorator" then I'm going to assume you're talking about the decoration API described here.
As you can see, there are several css properties that they officially support, but none of them "arbitrary css".
What I've done, though, in my vscode dimmer extension, is apply an opacity style using this technique:
dimDecoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions> {
textDecoration: `none; opacity: ${opacity / 100}`
});
When vscode sees this, it basically adds text-decoration: none; opacity: 1 to the stylesheet.This allows me to use arbitrary styling.
The above snippet creates a "Decoration" which can then be applied to ranges as shown below.
function dimEditor(editor: vscode.TextEditor) {
if (!dimDecoration) return;
let startPosition = new vscode.Position(0, 0)
let endPosition = new vscode.Position(editor.document.lineCount, Number.MAX_VALUE);
editor.setDecorations(dimDecoration, [new vscode.Range(startPosition, endPosition)]);
}
Disclaimer: Of course, this isn't officially supported and they could change the way they process the arguments to stop at the first ; and anybody using this workaround would have a broken extension.
Edit:
If you're wanting to have a "hover" behavior, there is the HoverProvider api. It can take a "marked string" which is essentially markdown, and display it. This extension uses it to display img previews on hover.
If markdown will meet your needs you can try that, otherwise you can try with arbitrary HTML and see if it accepts that.
I'm using Leaflet (v 0.7.7). It expects setting L_PREFER_CANVAS as a script tag, which is global. I wish to create 2 maps on same page, one with L_PREFER_CANVAS flag ON and once with OFF. How can I do that ?
1) I've tried setting window.L_PREFER_CANVAS before the map creation.
2) I've tried creating my layers with extended classes like this
var MyCircle = L.Circle.extend({
statics: {
CANVAS: true,
SVG: false
}
});
then using 'new MyCircle' instead of 'L.circle'.
Neither of the two methods have the desired effect, even though the map is rendered successfully
I'm looking into leaflet code but i'm not very comfortable with its inner workings yet, due to lack of js sorcery know-how i believe
Edit: A thing that partly works is cloning the entire leaflet source under a new object (M.* instead of L.), and keep my desired flag enabled for it. But its clumsy and breaks with plugins which add their functionality to L. classes. Thereby requiring more duplication to fix, which i'm trying to avoid
Would recommend you look into migrating onto Leaflet 1.0, where preferCanvas is now a traditional option inside the map constructor...Among many other significant improvements.
http://leafletjs.com/reference-1.0.0.html#map-prefercanvas
I want to develop an application which is getting form data via JSON from an external database. I need to create the form fields and its properties according this dynamic data.
It seemed to me that I need to use the classical way in Titanium instead of alloy because I think I can not add any rows dynamically on the xml (view) side in Alloy. Am I correct or is it also possible to do it in Alloy? If yes can you please tell me how
This can be done. Using this widget https://github.com/albinotonnina/it.numidia.gridWidget I was able to figure out how to create dynamic content in Alloy. Similar to the method used in this widget, I have a controller for each item I want to support. I created a textfield, textarea, label among others. It allows me to still use the Alloy styling and dynamically add the elements to my views.
Here is an example of my textfield controller:
XML
<Alloy>
<TextField id="textfield"/>
</Alloy>
js
function applyProperties(_props){
var apply = {};
_.extend(apply, _.pick(_props, 'left', 'value', 'textAlign', 'font', 'color', 'shadowOff'));
// alert(apply);
$.textfield.applyProperties(apply);
}
exports.getContent = function(){
return $.textfield.value;
};
exports.setContent = function(val){
$.textfield.value = val;
};
if(arguments[0]){
applyProperties(arguments[0]);
}
exports.applyProperties = applyProperties;
The style is completely empty since I'm using the app.tss to style this element.
My problem seemed easy at first but i got stuck.
I have some containers (divs) in my page with some custom attributes.
<div class="myclass" myattr1="blah" myattr2="text1-text2-text3-text4-"></div>
myattr1 and myattr2 are defined by me.
All divs are visible on page load.
Now, depending on user selection from a list, i want to show only the divs with myattrib1="blah" and hide the rest.
I tried the following code, with no success at all
$('#mySelectID').change(function()
{
var startName = $(this).val();
$(".myclass").not('[myattrib1!="+startName+"]').toggle();
});
The same approach will be used to filter results by attrib2, but there i will use myattrib2|="+startName+" ( i think this is correct - thats why i have the extra - on the end of myattr2="text1-text2-text3-text4-").
Can anyone advice me on how to properly achieve this kind of filtering?
thank you!
You are close, but as you can see form the syntax highlighting, your are not performing string concatenation. +startName+ will be taken literally. Fix the quotes and your fine:
.not('[myattrib1!="' + startName + '"]')
Note that you should be using data-* attributes instead of custom ones.
I need a option to hide the header from a dojox.grid.DataGrid grid.
Didn't find anything.
I'm grateful for any info!
I use in dojo 1.6 (and probably works since dojo 1.3)
#myGrid .dojoxGridHeader { display:none; }
You can use CSS:
.dojoxGrid-header { display:none; }
This solution is taken from:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html#hiding-the-headers-of-a-grid
u can connect at the postrender of the data grid. then find the headerGrid element created
then put style display to none.
//workaround the grid calls postrender after
//the component is at the dom.
//so then i can change the style to reset the header to invisible
dojo.connect(grid,"postrender",function(){
var headerGrid =this.domNode.firstElementChild;
headerGrid.style.display="none";
});
I would recommend switching to using the new and improved dgrid instead of datagrid, it is a lot better!
The setting for hiding headers is the attribute 'showHeader' which is a boolean value.
Check out this dgrid tutorial that talks you through defining grid structures including 'showHeader'.