I got a HighChart with several 2 series.
Now I want certain points in series 1 to be disabled when I click a link.
This is my code so far:
$('.remove').click(function () {
var chart = $('#plot').highcharts(),
series = chart.series[0];
if (series.data.length) {
chart.series[0].data[0].remove();
}
});
The problem is, that after removing this point, [0] changes to another value and after clicking it again, it goes on and on with deleting.
I just want the points to disappear, this is possible with visible:
visible Since 1.2.0 Read only. The series' visibility state as set by
series.show(), series.hide(), or the initial configuration.
But I just don't manage to implement it the right way in my onClick event.
If I understand you well, you need to keep "place" where the point was? If yes, you can try to use point.update() function and set null value.
Example: http://jsfiddle.net/gd4q4jo0/1/
I solved clicks on a link to delete points like this:
$('.remove').click(function () {
var series = chart.series[0];
var id = $(this).data('id');
if (series.data.length) {
// disable point in graph
chart.series[0].data[id-1].update(
{
y:null
});
}
// delete used tablerow
$(this).closest("tr").fadeOut(50);
});
And I managed to expulse points onClick on the graph with an event, it's working like this:
series: [{
name: 'time',
data: data: [[1, 129386],[2, 123966],[3, 123162],[4, 123245],[5, 124314],[6, 123946],[7, 124156],[8, 123367],[9, 124460],[10, 123366],[11, 123182],[12, 123915],[13, 124627],[14, 123142],[15, 124044],[16, 124346],[17, 123156],[18, 124356],[19, 123511],[20, 124239],[21, 123252],[22, 125169],[23, 125027],[24, 123508],[25, 124065],[26, 122719],[27, 124199],[28, 122968],[29, 124132],[30, 124052],[31, 124383],[32, 123265],[33, 124083],[34, 123855],[35, 124284],[36, 123719],[37, 123213],[38, 124245],[39, 123079],[40, 123721]],
events: {
// if point gets clicked, it'll be deleted
click: function(event) {
console.log(event.point);
var pointId = event.point.x;
$("#hidden-points-table").fadeIn(1000);
$('#hidden-elements').append(pointId + ", ");
event.point.update(
{
y: null
});
// deleting the table row
$("[data-id='"+pointId+"']").closest("tr").fadeOut(50);
}
}
}
Since it was hard to find solutions, I hope this will help some people with it.
This page was really helpful, too.
Related
I need to access to getSelectedPoints array on click event but there is a delay i get the previous selected points and to solve that now i am using setTimeout function as shown code below but this is not a solving; Because i can not expect when points are selection finished.
I have seen this question
HighCharts Multiple Point selection - access/update getSelectedPoints array immediately after point select
but it's solve the problem in JQuery and old version of hightcharts that has select event and it's deprecated in new versions of hightcharts. I need answer to be in javascript and hightcharts v8.
plotOptions: {
series: {
events: {
click: function(event) {
var chart = new Highcharts.Chart(this.divElement.nativeElement,this.options);
chart.getSelectedPoints().forEach(point=>{
setTimeout(()=>{
// do something here
},500);
});
}
}
}
Where have you found the information that the select event is deprecated? It's not true, the event is fully supported - API: https://api.highcharts.com/highcharts/series.line.point.events.select
And the demo which shows how to get the array of selected points:
https://jsfiddle.net/BlackLabel/uq4nrtky/
point: {
events: {
select: function() {
var selectedPoints = chart.getSelectedPoints()
selectedPoints.push(this);
console.log(selectedPoints)
}
}
}
Currently, in amchart4, the legends can be used to show / hide the target series on click. I would like the behaviour wherein on clicking on the legend:
Do not hide the clicked series.
Hide all other series except the one that was clicked so as to show only the seires whose legend that was clicked.
This question is on the back of an older question targetting amcharts3. However, since v4 is significantly different from v3, the answer does not work.
Based on the documentation here, it appears that the below should work:
series1.events.on("hidden", function() {
series2.hide();
series3.hide();
// but when I run series1.show() in order to mimic series1 to not hide, I get a max call size exceeded msg
});
Further to that, according to this, one can outright disable the toggle on the legends - but it works at the cart level and not at the series level.
Thanks.
Update: Follow up is available on GitHub. Posting the update here for the sake of completeness.
#zeroin 's answer works perfectly. I just needed it to be modified a bit more to have it working for the below scenario.
How do I re-enable all the series again? In the graph I'm building, I
have a series called 'allTraffic' and multiple other series.
AllTraffic should never get hidden.
When I click on any of the other series apart from AllTraffic, hide the other series apart from AllTraffic and the series whose legend has been clicked.
Reset everything (bring back all the series) when AllTraffic's legend is clicked.
chart.legend.itemContainers.template.togglable = false;
chart.legend.itemContainers.template.events.on("hit", function(event) {
var target = event.target;
chart.legend.itemContainers.each(function(item) {
if (target.dataItem.dataContext.name != 'All traffic' && item.dataItem.dataContext.name != 'All traffic') {
console.log("clicked other: ", target.dataItem.dataContext.name);
item.isActive = true;
item.dataItem.dataContext.hide();
}
if (target.dataItem.dataContext.name == 'All traffic') {
console.log("Clicked all traffic");
item.isActive = false;
item.dataItem.dataContext.show();
}
});
target.isActive = false;
target.dataItem.dataContext.show();
})
Here is how you do it:
https://codepen.io/team/amcharts/pen/285b315ff30a2740fdbf72f27230711c
To avoid SO you need to make itemContainers not togglable:
chart.legend.itemContainers.template.togglable = false;
chart.legend.itemContainers.template.events.on("hit", function(event){
var target = event.target;
chart.legend.itemContainers.each(function(item){
if(item != target){
item.isActive = true;
item.dataItem.dataContext.hide();
}
})
target.isActive = false;
target.dataItem.dataContext.show();
})
I am using highcharts, the pie-drilldown one. I created three buttons outside of the div my highchart is in and when a pie slice is clicked it hides the three buttons, but I want the three buttons to reappear when the drill up button is clicked using jquery. If there is a way to do it without jquery I'm open to that idea too.
var $button0 = $('#button0');
var $button1 = $('#button1');
var $button2 = $('#button2');
$('tspan[class=highcharts-text-outline]').click(function () { // WORKS
$button0.hide(); $button1.hide(); $button2.hide();
.
. Other code that doesn't matter
.
});
$('#highcharts-lb5nb7e-2 > svg > g.highcharts-button.highcharts-drillup-button.highcharts-button-normal').click(function (){ // DOESN'T WORK
$button0.show(); $button1.show(); $button2.show();
alert("AM I BEING CALLED?!");
});
Thank you
You can use events of highcharts for show and hide of buttons
chart: {
type: 'pie',
events:{
drilldown:function(){
var butonsElems=document.getElementsByTagName('button')
for(var i=0;i<butonsElems.length;i++){
butonsElems[i].style.display='none'
}
},
drillup:function(){
var butonsElems=document.getElementsByTagName('button')
for(var i=0;i<butonsElems.length;i++){
butonsElems[i].style.display=''
}
}
}
},
Fiddle Demonstration
I am working on setting up a scenario as following:
1) User is shown existing results on first grid
2) User can select multiple results and click an 'Edit' button which will extract the selected items from the first grid
3)Second grid will be populated with the rows the user has selected from the first grid and will allow them to make edits to the content
4)Pressing save will update the results and show the first grid with the rows updated
So far using drips and drabs of various forum threads (here and here), I have managed to accomplish the first two steps.
$("#editButton").kendoButton({
click: function () {
// extract selected results from the grid and send along with transition
var gridResults = $("#resultGrid").data("kendoGrid"); // sourceGrid
var gridConfig = $("#resultConfigGrid").data("kendoGrid"); // destinationGrid
gridResults.select().each(function () {
var dataItem = gridResults.dataItem($(this));
gridConfig.dataSource.add(dataItem);
});
gridConfig.refresh();
transitionToConfigGrid();
}
});
dataItem returns what i am expecting to see with regards to the selected item(s) - attached dataItem.png. I can see the gridConfig populating but with blank rows (gridBlankRows.png).
gridConfig setup:
$(document).ready(function () {
// build the custom column schema based on the number of lots - this can vary
var columnSchema = [];
columnSchema.push({ title: 'Date Time'});
for(var i = 0; i < $("#maxNumLots").data("value"); ++i)
{
columnSchema.push({
title: 'Lot ' + i,
columns: [{
title: 'Count'
}, {
title: 'Mean'
}, {
title: 'SD'
}]
});
}
columnSchema.push({ title: 'Comment'});
columnSchema.push({ title: 'Review Comment' });
// build the datasource with CU operations
var configDataSource = new kendo.data.DataSource({
transport: {
create: function(options) {},
update: function(options) {}
}
});
$("#resultConfigGrid").kendoGrid({
columns: columnSchema,
editable: true
});
});
I have run out of useful reference material to identify what I am doing wrong / what could be outstanding here. Any help/guidance would be greatly appreciated.
Furthermore, I will also need functionality to 'Add New' results. If possible I would like to use the same grid (with a blank datasource) in order to accomplish this. The user can then add rows to the second grid and save with similar functionality to the update functionality. So if there is any way to factor this into the response, I would appreciate it.
The following example...
http://dojo.telerik.com/EkiVO
...is a modified version of...
http://docs.telerik.com/kendo-ui/framework/datasource/crud#examples
A couple of notes:
it matters if you are adding plain objects to the second Grid's dataSource (gridConfig.dataSource.add(dataItem).toJSON();), or Kendo UI Model objects (gridConfig.dataSource.add(dataItem);). In the first case, you will need to pass back the updated values from Grid2 to Grid1, otherwise this will occur automatically;
there is no need to refresh() the second Grid after adding, removing or changing its data items
both Grid dataSources must be configured for CRUD operations, you can follow the CRUD documentation
the Grid does not persist its selection across rebinds, so if you want to preserve the selection in the first Grid after some values have been changed, use the approach described at Persist Row Selection
I have the following code, and what I would like to do is update the chart with values coming from an AJAX call on a button push (also on page start). The issue I am having is that the chart will not update or re-render. I have hard coded the values coming in from the server just as a test because I know I can get the values.
require(["dojox/charting/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Lines",
"dojo/ready",
"dojox/charting/themes/Claro",
"dojo/request",
"dojo/dom",
"dojo/on"],
function(Chart, Default, Lines, ready, theme, request, dom, on){
ready(function(){
var policeResChart = new Chart("simplechart");
policeResChart.addPlot("default", {type: Lines, enableCache:true});
policeResChart.setTheme(theme);
policeResChart.theme.plotarea.fill = "";
policeResChart.fill = "";//the broder around the chart
policeResChart.addSeries("data", policeResponses, {stroke:{color:"orange", width:3}});
policeResChart.render();
var myButton = dom.byId("btn");
on (myButton, "click", function(evt){
request.post("test.jsp", {
data:{
color: "blue"
}
}).then(
function(response){
var newData = [
{ y: 1 },
{ y: 1 },
{ y: 1 },
{ y: 31 },
{ y: 1 }];
policeResChart.updateSeries("data", newData);
policeResChart.render();
}//end response
);
});//end onclick
});//ends ready function
});//ends require
whats also really strange is that only 1 render() can be called. so for example if I take the first (the on ready) render out and use the onclick render it will work. Im also noticing that ANYTHING i put after the second render in the onclick does not work. so alert("test") after the second render in the button push does nothing. Im not so sure why.
Ok so, for some strange reason when I use policeResChart.fullRender(); in the button push this works. Can someone explain why? I dont fully understand why the render() did not work.
Anyway, glad its "fixed".