I'm trying to do a tooltip similar to this:
https://codepen.io/team/amcharts/pen/dyyaxLr
But when a series is disabled via the legend (i.e. "cars"), I also want to remove the value in the tooltip.
I guess there should be a way to format the series.tooltipText with an adapter like this:
series.adapter.add("tooltipText", function (text, target) {
// generate text dynamically
// ...
return text;
});
But I can't figure out how to get only the data for the visible series and format the string accordingly.
Is something like this possible?
I found the following solution:
series.adapter.add("tooltipText", function (ev) {
var text = "[bold]{dateX}[/]\n";
x.series.each(function (item) {
if (!item.isHidden)
text +=
"[" +
item.stroke.hex +
"]●[/] " +
item.name +
": {" +
item.dataFields.valueY +
"}\n";
});
return text;
});
Related
So I'm adapting this example from forge.
I can currently retrieve all issues through a panel, I'm trying to sort the multiple issues by a attribute such as due date. I've tried a few different sortBy() methods but unsure how to get it to work.
Any ideas? here's the code below, where do I input the sortBy method?
BIM360IssueExtension.prototype.showIssues = function () {
var _this = this;
//remove the list of last time
var pushPinExtension = _this.viewer.getExtension(_this.pushPinExtensionName);
pushPinExtension.removeAllItems();
pushPinExtension.showAll();
var selected = getSelectedNode();
_this.issues.forEach(function (issue) {
var dateCreated = moment(issue.attributes.created_at);
// show issue on panel
if (_this.panel) {
_this.panel.addProperty('Title', issue.attributes.title, 'Issue ' + issue.attributes.identifier);
_this.panel.addProperty('Assigned to', issue.attributes.assigned_to, 'Issue ' + issue.attributes.identifier);
//_this.panel.addProperty('Location', stringOrEmpty(issue.attributes.location_description), 'Issue ' + issue.attributes.identifier);
_this.panel.addProperty('Version', 'V' + issue.attributes.starting_version + (selected.version != issue.attributes.starting_version ? ' (Not current)' : ''), 'Issue ' + issue.attributes.identifier)
_this.panel.addProperty('Due Date', issue.attributes.due_date, 'Issue ' + issue.attributes.identifier);
_this.panel.addProperty('Created at', dateCreated.format('MMMM Do YYYY, h:mm a'), 'Issue ' + issue.attributes.identifier);
}
// add the pushpin
var issueAttributes = issue.attributes;
var pushpinAttributes = issue.attributes.pushpin_attributes;
if (pushpinAttributes) {
issue.type = issue.type.replace('quality_', ''); // temp fix during issues > quality_issues migration
pushPinExtension.createItem({
id: issue.id,
label: issueAttributes.identifier,
status: issue.type && issueAttributes.status.indexOf(issue.type) === -1 ? `${issue.type}-${issueAttributes.status}` : issueAttributes.status,
position: pushpinAttributes.location,
type: issue.type,
objectId: pushpinAttributes.object_id,
viewerState: pushpinAttributes.viewer_state
});
}
})
}
First, you'll need some library to sort, something like Underscore. You can simply use their CDN:
<script src="https://underscorejs.org/underscore-min.js"></script>
Then, after loading the Issues and before listing them (e.g. this line at the sample), try something like:
// sort by title
_this.issues = _.sortBy(_this.issues, function (i){return i.attributes.title});
// or sort by due date (this Date.parse returns an int representing the date)
_this.issues = _.sortBy(_this.issues, function (i){return Date.parse(i.attributes.due_date)});
BTW, you'll need to handle the case where the due_date is not specified (null)
How we can get all features properties in D3 with clicking on a feature?
For example, how we can get 'AREA' and 'PERIMETER' of all provinces of this map: GeoJson map of Colombia, when clicking on a province?
The code below not work. I see 'properties' undefined.
function clicked(d) {
var polys= effectLayer.selectAll("path");
var x;
var txt;
for (x in polys) {
//show this:
txt += polys[x].properties.AREA + " ";
}
alert(txt );
}
You're mistaking a selection for a datum. You cannot access a selection like this:
polys[x].properties.AREA
So, since what you want is the datum, use an each:
var txt = "";
var polys= mapLayer.selectAll("path").each(function(e){
txt += e.properties.AREA + " "
});
Here is the updated bl.ocks, check the console: https://bl.ocks.org/GerardoFurtado/bb29d8d5b984da7fc8079c94cce9423c/e9963b96e01b2ecab5215ecf31c7d821c6b54daf
I'm trying to find if amcharts has a facility to have legends as checkboxes just like highcharts does. Some examples in here -
http://stackoverflow.com/questions/19174158/in-highchart-legend-want-to-bring-checkbox-at-start
http://jsfiddle.net/lukelarsen/yHGS9/9/
http://flexdevtips.blogspot.co.nz/2009/10/linechart-with-checkbox-legend.html
I tried to put checkboxes outside the chart & add listeners & so forth. it gets complicated. So wondering if anyone has had this requirement & has managed to implement it?
Any help would be highly helpful.
There you go:
First we have to add eventlisteners to create the boxes everytime the chart redraws. (this is necessary because the checkboxes are child elements of the legend and the legend is recreated everytime sth happens with the chart)
chart.addListener("init", function() {
chart.addListener("drawn", createCheckboxes);
chart.legend.addListener("showItem", createCheckboxes);
chart.legend.addListener("hideItem", createCheckboxes);
}
Then we're creating the one checkbox for each legend entry.
function createCheckboxes() {
var legend = chart.legend.legendData;
var div = $("<div style='position:absolute; top: 10px'></div>");
for(var i = 0; i < legend.length; i++) {
div.append("<input style='float: left; "
+ "position: absolute; top:" + legend[i].legendEntry.y + "px' "
+ "type='checkbox'" + (legend[i].hidden ? " " : " checked ")
+ "onclick=toggleItem(" + i + ")></input>");
}
div.appendTo($(chart.legend.div));
}
The last step is to handle the click event on the checkboxes.
var toggleItem = function(i) {
chart.legend.clickLabel(chart.legend.legendData[i], event);
}
That's it. Demo
I am currently migrating all TinyMCE plugins to CKeditor and having trouble with InsertInline plugin.
In TinyMCE I have a code like this:
(function ($) {
Drupal.wysiwyg.plugins['insertinline'] = {
/**
* Return whether the passed node belongs to this plugin.
*/
isNode: function(node) {
return ($(node).is('img.wysiwyg-inline-image'));
},
/**
* Execute the button.
*/
invoke: function(data, settings, instanceId) {
alert(Drupal.t('This is a pseudo plugin/button.\nIt does not insert an inline image.\n\nPlease use the INSERT button from the image upload fieldset.'));
},
/**
* Replace all <!-- INLINE:xxx;w=x;h=x --> tags with images.
*/
attach: function(content, settings, instanceId) {
that = this;
// Replace inline images with physical image
content = content.replace(new RegExp('<!-- INLINE:([0-9]*);w=([0-9]*);h=([0-9]*) -->', 'gi'), function($0, $1, $2, $3) { return that._getPlaceholder($1, $2, $3); });
return content;
},
/**
* Replace images with <!-- INLINE:xxx;w=x;h=x --> tags in content upon detaching editor.
*/
detach: function(content, settings, instanceId) {
var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(
$.each($('img.wysiwyg-inline-image', $content), function (i, elem) {
altText = ' ' + Drupal.checkPlain(elem.getAttribute('alt')) + ' ';
if (elem.parentNode && elem.parentNode.parentNode && elem.parentNode.tagName == 'H2') {
// Moving the current element to left side of H2 tag
elem.parentNode.parentNode.insertBefore(document.createComment(altText), elem.parentNode);
elem.parentNode.removeChild(elem);
}
else {
elem.parentNode.insertBefore(document.createComment(altText), elem);
elem.parentNode.removeChild(elem);
}
});
return $content.html();
},
/**
* Helper function to return a HTML placeholder.
*/
_getPlaceholder: function (fid, w, h) {
if (!fid) {
fid = '';
}
if (!w) {
w = '240';
}
if (!h) {
h = '240';
}
// Grab image detail data
var imgData = Drupal.cnngo_inline.getInlineImageDetail(fid, w, h);
// Build and return image tag
return '<img src="' + imgData.src + '" alt="' + imgData.alt + '" title="' + imgData.title + '" class="wysiwyg-inline-image" width="' + w + '" height="' + h + '" />';
}
};
})(jQuery);
How it works:
Let say I uploaded a 600x600 px image and I inserted it in the WYSIWYG area by default it will insert an img tag
When I click the "Insert" button as described in the image. It will insert img tag like this
<img class="wysiwyg-inline-image" title="Inline image 240x240" src="http://mydomain.com/sites/default/files/styles/inline_image_temp_240x240/public/2013/05/28/600x600_1.png" alt="INLINE:142879;w=240;h=240" width="240" height="240" data-mce-src="http://mydomain.com/sites/default/files/styles/inline_image_temp_240x240/public/2013/05/28/600x600_1.png">
See the image below.
Now if I'm going to detached the editor (clicked the Switch to plain text) the img tag is replaced by
<p><!-- INLINE:142879;w=240;h=240 --></p>
And it will show the img tag (will render the img) when I turned the editor back on.
Can someone point me in the right direction of what is the equivalent of detact/attach in Ckeditor.
I spent hours in Google but can't find the exact answer (maybe my question is not right).
main goal:
upon resizeStop, I need to resize the element's width inside the cell. e.g. edittype="select"
here's the scenario:
1) there's a jqgrid, has columns, let's say in column 3 has edittype="select".
2) user resize the column 3
3) after resizing, the resizeStop(newwidth, index) event
4) inside the resizeStop event, want to get a reference to all select element of the given index. Then resize it appropriately.
problem:
I don't know on how to implement the number 4...
please guide me or give me hints to investigate.
thanks in advanced.
Look at the getCol method it is probably what you need.
resizeStop: function (newwidth, index) {
var selectedRowId = jQuery("#jqgridElementId").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_' + (index-1) + '"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
},
onSelectRow: function(id){
if(id ){
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#jqgridElementId_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}