I'm trying to implement toggle the graph series using custom html/css buttons instead of legends as per requirement.
This AmCharts: custom button to hide/show graph is similar to my requirement but not working for me.
Currently, i'm using amCharts4
Please help me to handle this.
The following is the code I'm trying
I made char as global (var chart), if i'm using series hitting the error series is not defined even i'm making it var global
<button onClick={this.handleSeries}>Series </button>
/* <button class="toggle-graph" data-graph-index="0">Series1 </button> */
handleSeries = (e) => {
var graph = chart.graphs[e.currentTarget.dataset.graphIndex];
if (graph.hidden) {
chart.showGraph(graph);
} else {
chart.hideGraph(graph);
}
/* if (series.isHiding || series.isHidden) {
series.show();
} else {
series.hide();
} */
};
To solve this, I followed the different approach without touching the graph or amChart legends.
I just used a boolean in the state and used if condition
if(this.state.booleanTrue){
show graphSeries logic
}
Here I just made the button as toggle
this.setState({ !this.state.booleanTrue })
This logic fulfilled my requirement.
Please mention if there is any other approach for this
Related
To calculate custom labels for Vue-Chartjs the only solution I could find was via
animation: { onComplete: function () {
The problem that follows is that these labels are blinking on bar hover. I also saw the same behaviour in many other custom label examples/solutiond. Did anyone manage to solve this?
See example here fiddle
The blinking effect is caused because the animation is only triggered when the bars are hovered. You can use the onHover option to trigger whenever the chart canvas is hovered.
Here's an example logic:
(uses the plugin chartjs-plugin-datalabels to make it easier)
options : {
onHover : function (e) {
const display = e.type === 'mouseout' ? false : true
const labels = this.chart.options.plugins.datalabels
if (display&&labels.display) return //avoid updating if already set
labels.display = display
this.chart.update();
}
}
working example
I extend a Control to create a new custom control in UI5 and this control renders a tree as UL items nicely. Now I need to implement a collapse/expand within that tree. Hence my renderer writes a tag like
<a class="json-toggle" onclick="_ontoggle"></a>
and within that _ontoggle function I will handle the collapse/expand logic.
No matter where I place the _ontoggle function in the control, I get the error "Uncaught ReferenceError: _ontoggle is not defined"
I am missing something obvious but I can't find what it is.
At the moment I have placed a function inside the
return Control.extend("mycontrol",
{_onToggle: function(event) {},
...
Please note that this event is not one the control should expose as new event. It is purely for the internals of how the control reacts to a click event.
I read things about bind and the such but nothing that made sense for this use case.
Took me a few days to crack that, hence would like to provide you with a few pointers.
There are obviously many ways to do that, but I wanted to make that as standard as possible.
The best suggestion I found was to use the ui5 Dialog control as sample. It consists of internal buttons and hence is similar to my requirement: Render something that does something on click.
https://github.com/SAP/openui5/blob/master/src/sap.ui.commons/src/sap/ui/commons/Dialog.js
In short, the solution is
1) The
<a class="json-toggle" href></a>
should not have an onclick. Neither in the tag nor by adding such via jQuery.
2) The control's javascript code should look like:
sap.ui.define(
[ 'sap/ui/core/Control' ],
function(Control) {
var control = Control.extend(
"com.controlname",
{
metadata : {
...
},
renderer : function(oRm, oControl) {
...
},
init : function() {
var libraryPath = jQuery.sap.getModulePath("mylib");
jQuery.sap.includeStyleSheet(libraryPath + "/MyControl.css");
},
onAfterRendering : function(arguments) {
if (sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this, arguments);
}
},
});
control.prototype.onclick = function (oEvent) {
var target = oEvent.target;
return false;
};
return control;
});
Nothing in the init(), nothing in the onAfterRendering(), renderer() outputs the html. So far there is nothing special.
The only thing related with the onClick is the control.prototype.onclick. The variable "target" is the html tag that was clicked.
I'm using smart-table at the moment, and I have input text boxes up the top of each column and I am using st-search. The point of what I am making is something is selected from the table, and then the results in the table are changed.
I am trying to clear the search boxes when the row is clicked. At the moment other business logic is implemented on click, so it's at this point that I am looking to clear these text boxes.
I have tried to associate an ng-model to these text boxes, and to clear them when the row is clicked but the text boxes don't change. I have also googled this issue and I have only found solutions on how to make this work for when you click on a button (by a directive) to clear the predicates. I haven't been able to make these solutions work programatically however.
To resolve this I did the following:
Monkey-patched smarttable.js with the code in this github issue (https://github.com/lorenzofox3/Smart-Table/issues/164). For me this occured at around line 574.
// added from https://github.com/lorenzofox3/Smart-Table/issues/164
ng.module("smart-table").directive("stResetSearch",
function() {
return {
restrict: 'EA',
require: '^stTable',
link: function(scope, element, attrs, ctrl) {
return element.bind('click',
function() {
return scope.$apply(function() {
var tableState;
tableState = ctrl.tableState();
tableState.search.predicateObject = {};
tableState.pagination.start = 0;
return ctrl.pipe();
});
});
}
};
});
Added 'st-research-search' to the element that was calling the function in angularjs. For me, that was the "tr" element. Like below.
<tr ng-repeat="medicine in medicines" ng-click="medicationMatched(medicine)" ng-class="heatmapClass(medicine)" st-reset-search>
This worked fine. Unfortunately, I wasn't able to programatically clear the predicates from the code. But this works well enough for me.
Because I needed a custom setup for my scheduling setup, I am implementing separate Calendar, Scheduler, and RecurrenceEditor widgets. So far, everything has worked fine, but I can't get the parsed string from the RecurrenceEditor widget. I haven't seen a method to pull the rule as a string in the API documentation (nor is the RecurrenceEditor widget really documented there).
This is how I'm setting up the recurrenceEditor:
$(document).ready(function()
{
$("#recurrence-editor").kendoRecurrenceEditor({
start: new Date(),
change: function(e)
{
var editor = e.sender;
// I want to get the recurrence rule string here.
}
});
});
I'm not seeing anything in Firebug that gives me a hint for the method or property I might try. So far, I've tried:
editor.ruleValue
editor.recurrenceRule
It looks like I have access to some of the information, but I didn't want to write my own selections-to-parseable-string method if I could get it from the recurrence editor itself.
UPDATE: When I set it up this way:
$(document).ready(function()
{
$("#recurrence-editor").kendoRecurrenceEditor({
start: new Date(),
edit: function(e)
{
var editor = e.sender;
var recurrenceString = editor.RecurrenceRule;
return recurrenceString;
}
});
});
The edit event never fires. Probably because I'm not implementing the recurrence editor as part of the Scheduler widget, but as a standalone widget on the page.
Thanks!
Setup the recurrence editor in the Scheduler's edit event, it will fire the change event and the value property is the standard iCal Recurrence Rule.
Here's mine:
// Setup Recurrence Editor
// Telerik support recommends this method over the common inline script
// because it allows us to choose which recurrence editor. However, it does
// break the MVVM two-way bindings, so the current value MUST be explicitly set
// on creation, and the change event must be handled.
var event = e.event,
container = e.container,
recurrenceEditor = container.find("#recurrenceEditor");
if (kendo.support.mobileOS === false) {
recurrenceEditor.kendoRecurrenceEditor({
start: new Date(e.event.start),
value: e.event.recurrenceRule,
timezone: self.scheduleConfig.timezone,
messages: self.scheduleConfig.messages.recurrenceEditor,
change: function (ev) {
event.set("recurrenceRule", this.value());
}
});
} else {
// The Mobile Recurrence Editor requires the parent kendo pane
// be passed as a parameter, otherwise it will crash when the
// user attempts to alter the frequency
var pane = container.parent(".km-pane").data("kendoMobilePane");
recurrenceEditor.kendoMobileRecurrenceEditor({
start: new Date(e.event.start),
value: e.event.recurrenceRule,
timezone: self.scheduleConfig.timezone,
messages: self.scheduleConfig.messages.recurrenceEditor,
pane: pane,
change: function(ev) {
event.set("recurrenceRule", this.value());
}
});
}
And the HTML (inside the custom editor template)
<div class="lineEntry" data-bind="invisible: recurrenceId">
<div id="recurrenceEditor" name="recurrenceRule" data-bind="value: recurrenceRule" class="toInlineBlock">
</div>
</div>
You have to get it from the event you are describing in the editor's event edit/creator modal. Once you get the event, it's just .RecurrenceRule, if memory serves, it's just e.event.RecurrenceRule
Fun fact, the standard used in that string is RFC 5545 3.3.10
Highcharts offers the opportunity to detect clicks on chart points, but is it possible
to detect other events, such as the double click or mousedown event?
Thanks in advance
Each component only supports certain events, for example the Chart component will detect addSeries, click, load, redraw, and selection. I don't believe this set is extensible, so you can't capture a different event like mousedown.
You could try to inspect the source of your page and attach listeners to the elements that HighCharts generates, but this would be an undocumented work-around and would be liable to break in future releases. In addition, if you have to support < IE9 you would need handlers for both SVG and VML generated markup.
You can get creative with some events. Here's an example of detecting a double click using a click handler:
Working Demo
var clickDetected = false;
// create the chart
$('#container').highcharts({
chart: {
events: {
click: function(event) {
if(clickDetected) {
alert ('x: '+ event.xAxis[0].value +', y: '+ event.yAxis[0].value);
clickDetected = false;
} else {
clickDetected = true;
setTimeout(function() {
clickDetected = false;
}, 500);
}
}
}
},
...
It's possible, but in a different way. In Highcharts you can add event to each element using element.on. For example:
chart.series[0].data[0].graphic.on('dblclick', function() {
//callback here
});
And simple jsFiddle for you. Good thing is that you can add to all elements, and make sure work in all browsers.