I am working on AngularJS base web application.
I used Angular-highchart.js to draw line graph.
In this application, there are 80 of graph lines in a page. So, I want to highlight graph line when users click it.
But I couldn't find out proper options to highlight graph. Are there any options to highlight graph line when users click it?
Yes, you can use series' click event for this:
plotOptions: {
line: {
events: {
click: function() {
this.update({
lineWidth: 5 // increase the width of the line
});
}
}
}
}
Live demo: http://jsfiddle.net/kkulig/2j5fedwh/
API reference: https://api.highcharts.com/highcharts/series.line.events
Related
We have been using Froala editor within Wagtail for years, and even though Draftail is nice, the end user wants to continue to use Frola, especially as a license fee has been paid for it, and it offers extra functionality that they use.
I have used the following which works great for any version of Wagtail prior to version 2.2:
https://github.com/jaydensmith/wagtailfroala/pull/5/commits/d64d00831375489cfacefa7af697a9e76fb7f175
However in Wagtail version 2.2 this has changed:
https://docs.wagtail.org/en/stable/releases/2.2.html#javascript-templates-in-modal-workflows-are-deprecated, this causes selecting images within Froala to no longer work correctly. You get to pick the image, but it fails to move onto the 2nd dialog to select alignment and then click insert.
It looks like wagtailfroala/static/froala/js/froala.js needs to be changed to add onload to the ModalWorkflow.
$.FE.RegisterCommand('insertImage', {
title: 'Insert Image',
undo: false,
focus: true,
refreshAfterCallback: false,
popup: true,
callback: function () {
var editor = this;
return ModalWorkflow({
url: window.chooserUrls.imageChooser + '?select_format=true',
responses: {
imageChosen: function(imageData) {
editor.edit.off();
var $img = $(imageData.html);
$img.on('load', function() {
_loadedCallback(editor, $(this));
});
// Make sure we have focus.
// Call the event.
editor.edit.on();
editor.events.focus(true);
editor.selection.restore();
editor.undo.saveStep();
// Insert marker and then replace it with the image.
if (editor.opts.imageSplitHTML) {
editor.markers.split();
} else {
editor.markers.insert();
}
var $marker = editor.$el.find('.fr-marker');
$marker.replaceWith($img);
editor.html.wrap();
editor.selection.clear();
editor.events.trigger('contentChanged');
editor.undo.saveStep();
editor.events.trigger('image.inserted', [$img]);
}
}
});
},
plugin: 'image'
});
But what needs to be added to make it work? I can't find any documentation or examples on how do to this? Please help or point me in the direction of the documentation for how this should be done.
Thank you so much in advance.
I am using highcharts drilldown chart with multiple levels and I would like to show the users what path they have traversed while drilling down the chart. Is there a way to show that path next to the chart?
for example https://jsfiddle.net/crxmkgaz/
in this fiddle if I click on Chrome and then on v63.0 the path should show like chrome -> v63.0, and should update if the user drill up.
ps: I am using react.
Thanks in advance.
You can use drilldown and drillup events to add information about drilldown level, for example in this way:
chart: {
type: 'pie',
events: {
drilldown: function(e) {
var newEl = document.createElement('span');
newEl.innerText = ' --> ' + e.seriesOptions.name
path.appendChild(newEl);
},
drillup: function() {
path.children[path.children.length - 1].remove();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/8mLhy31p/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/highcharts/chart.events.drillup
Just started using progressbarwidget, I want the text from my textTpl to be center aligned within the progress bar at all times regardless of what percentage the bar is at, when I mean centered I mean the center of the progress bar and not center of the progress value. See fiddle below and attached image
https://fiddle.sencha.com/#fiddle/1dm7
I seen a reference on another thread to set position : relative, this does set the text to the center of the bar but doing so means the bar does not show the progress anymore. I see when the progress bar is created it has 2 divs, containing the following classes, x-progress-text and x-progress-bar, both contain the text value.
Thanks in advance
You can extend ProgressBarWidget, and override the template, like:
Ext.define('Fiddle.view.ProgressBarWidget', {
extend: 'Ext.ProgressBarWidget',
xtype: 'fiddle-progressbarwidget',
template: [{
reference: 'backgroundEl'
}, {
reference: 'barEl'
}, {
reference: 'textEl',
style: {
left: 0,
right: 0
}
}],
});
Working example: https://fiddle.sencha.com/#fiddle/1dn4
The definitive solution is to add an onResize handler on the progress bar container:
onResize: function () {
var me = this,
progressBar = me.down('progressbarwidget');
// Set text width to element width so that it can be centered
progressBar.setWidth(progressBar.el.getWidth());
}
This idea is copied from what happens in Ext.grid.column.Widget.onResize().
The solution from user CD.. doesn't work (nor does the one in user2751034 comment)
in the case you have two-color-text, like in Classic theme:
even if you reproduce the template in Sencha sources (with textEl children of barEl):
Now legend in EXTJS works in such way: it shows all available legend fields and appropriate series and you can enable/disable any of them. I want to make that only one legend item can be enabled in one time. E.g. you have chart with 2 legend items (with 2 series), only first item is active on chart load and then if you want to active second item then first item becomes automatically disabled.
Here is chart fiddle with native ExtJS behaviour:
https://fiddle.sencha.com/#fiddle/1b7d
Please, post ideas how can I make it work as I described before.
If you have a look at the legend source code, freely available in your Ext directory or in the Sencha docs, you find that you can override that toggleItem method in such a way that only one selection is allowed.
The basics should be something like
toggleItem: function (index) {
var store = this.getStore(),
record = store.getAt(index);
store.query("disabled", false).each(function(record) {record.set("disabled", true) });
record.set("disabled", false);
}
but it doesn't work exactly as expected. Perhaps you can pave your way along from there.
this can be easily achieved with using legend type dom, and looping and setting every other legend (button) disabled, as followed -
legend: {
docked: 'bottom',
type: 'dom',
listeners: {
itemclick: function(obj, record, item, index) {
var i = 0,
records = obj.getStore().getRange();
for(i=0; i < records.length; i++){
i === index ? records[i].set('disabled', false) : records[i].set('disabled', true);
}
}
}
}
I am using angular-google-map api http://angular-ui.github.io/angular-google-maps/#!/api
The info window displays on the top of the marker. Is their a way to change it's position to right with the top aligned with the marker? I saw some infowindows fully custom with a custom position and a custom color but we never have the codes or how it is done. Do you have any exemples with the codes or a tutorial to show me? Thanks
UPDATE:
The Infobox instead of the infowindow can do the trick. But I did not manage to find a way to use the infobox with my angular-google-map ui. Can someone please help?
Inside map object you can set inside window.options param pixelOffset
map: {
control: {},
...
window: {
...
options: {
visible: false,
pixelOffset: {
width: -1,
height: -25
}
}
}
I have asked the same question on their support page and got a valuable reply. You can find it here https://github.com/angular-ui/angular-google-maps/issues/1434#issuecomment-130292587
Since infobox is included in the angular google maps library, all you need to do is provide options as follows
windowOptions:{
boxClass: "YOUR CSS CLASS",
boxStyle: { "YOUR STYLE" }
}
and then use it in your view like this
<ui-gmap-google-map>
<ui-gmap-window options="windowOptions"></ui-gmap-window>
</ui-gmap-google-map>
Fiddle: http://jsfiddle.net/Danscho/L789znLk/