I am trying to drill up using my own button but having difficulties.
JSfiddle with multi drilldown
$( "#backbtn" ).click(function(e) {
setChartC(name, categories, data, '', 1);
alert(chartC.xAxis[0]);
});
I have levels, how can I access the drilldown.level?
exporting: {
enabled: true,
buttons: {
customButton: {
text: 'Go Back',
onclick: function () {
var drilldown = chartC.drilldown;
alert(chartC.level);
}
}
}
Cant seem to access the level as i got drill down. is there any way I can access the level
You can use the native Highcharts back button. You can see an example here (link author here).
However, if you want to add a custom button, I don't believe that Highcharts have an easy way for that. If you find that I'm wrong, please correct me.
So, to add a custom back button, you need to track what is the current chart that you are showing. Knowing what is the current, you could look into a dictionary to find which level it is. To get the current chart, you can track the click events:
plotOptions: {
column: {
point: {
events: {
click: function () {
console.log("I'm at: " + this.drilldown.name)
}
}
}
}
}
Regarding the custom back button, look this JSFiddle.
Add this HTML:
<input type="button" id="backbtn" value="Back">
And this JS:
$("#backbtn").click(function(e) {
setChart(name, categories, data);
});
Since the variables name, categories and data were defined with the values of the top-level chart, clicking in this button will restore to the top-level.
If you create a tree object with all charts and their name/categories/data info, and if you know the current chart, you can set the Chart with its parent data to implement the custom back button.
Related
I have a chart where I have about 5 series. But it makes no sense having two of them enabled at the same time. When my page loads one is enabled and one is disabled based on backend code - which is fine. But obviously the user can enable the second series by clicking on the legend. Can someone share some quick JS code that disables series B when series A is enabled? Thank you!
Use the legendItemClick event callback function and toggle visibility of the opposite series.
series: [..., {
...,
events: {
legendItemClick: function() {
this.chart.series[4].setVisible();
}
}
}, {
...,
events: {
legendItemClick: function() {
this.chart.series[3].setVisible();
}
},
visible: false
}]
Live demo: http://jsfiddle.net/BlackLabel/tpj26vqw/
API Reference:
https://api.highcharts.com/highcharts/series.line.events.legendItemClick
https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
I've built a network graph with Highcharts and I'm struggling to find a way to easily "expand" or "show" a node's children. The problem I've got is that the way the data is declared is very linear. It doesn't really have much of a hierarchy.
Here's a pen of what I have so far https://codepen.io/anon/pen/xvGMwa. The issue I have is that the "links" aren't associated with the nodes. So I can't easily find a group of nodes and their links and hide/show them.
What I'd like is for it to start off with just the first 4 nodes and then be able to click an action on the node to show/hide its children. I'd ideally do this with CSS.
The nearest I've found is this example but it's not really what I want:
point: {
events: {
click: function() {
this.remove();
}
}
}
Weirdly, the example from Highcharts here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-networkgraph/data-options/ has ids on the links. But my example doesn't. I don't know why that is? I think if I had ids on my links then it'd be easier to find them and hide/show them.
By clicking on the node you can find its links in point.linksTo and point.linksFrom arrays.
To show and hide them just use Highcharts.SVGElement.hide() and Highcharts.SVGElement.show() methods. Check demo and code posted below.
Code:
series: [{
...
point: {
events: {
click: function() {
var point = this;
if (!point.linksHidden) {
point.linksHidden = true;
point.linksTo.forEach(function(link) {
link.graphic.hide();
link.fromNode.graphic.hide();
link.fromNode.dataLabel.hide();
})
} else {
point.linksHidden = false;
point.linksTo.forEach(function(link) {
link.graphic.show();
link.fromNode.graphic.show();
link.fromNode.dataLabel.show();
})
}
}
}
}
...
}]
Demo:
https://jsfiddle.net/BlackLabel/9drzxj2L/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show
I am using a Google Pie Chart for data representation. The chart's tooltips include action items that users can click on. To keep the tooltips open long enough for users to click the items, I have opted to have the tooltips show on click/selection rather than on hover:
tooltip: { trigger: 'selection' }
The problem now is that the only way to close these tooltips is to either make another selection on the chart (thus showing another tooltip) or to click the same legend/pie slice value that was previously selected.
This is clunky; for good UX, I want to allow users to dismiss tooltips simply by clicking the empty space around the pie chart.
So far the closest solution I have found is in this question, but the first answer does not work and the second does not allow the tooltip to be closed by click-away. The problem appears to be that all of the whitespace around the chart is still considered part of the chart itself rather than a separate element. I tried to get around this limitation by checking the type of the clicked element to see whether it was the whitespace as shown below:
function clearChartSelection(e) {
if (!chartDOMElement.contains(e.srcElement) || e.srcElement.tagName.toUpperCase() == 'RECT') {
chart.setSelection();
}
}
Unfortunately, this didn't work either as the legend element sometimes renders as a rectangle type instead of text (I'm still trying to figure out what causes this). In pie charts, legend clicks also set the selection, and I want to keep this functionality.
Right now I'm investigating the following two paths, but without luck:
Some other way to distinguish between the slices/legend and the empty chart area, or
Somehow prevent the click event if the selection event is also triggered.
I'm definitely open to any other ideas that may resolve this issue. The functionality I want is pretty common for tooltips in general, so hopefully I've just missed something obvious.
in addition to the body click,
use the chart's click event
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['A', 1],
['B', 2],
['C', 2],
['D', 2],
['E', 7]
]);
var options = {
tooltip: {
trigger: 'selection'
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
google.visualization.events.addListener(chart, 'click', clearSelection);
document.body.addEventListener('click', clearSelection, false);
chart.draw(data, options);
function clearSelection(e) {
if (!container.contains(e.srcElement)) {
chart.setSelection();
}
}
});
html, body {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am new to Extjs. I am using the Bryntum scheduler in my application.
In that I want to show tooltip over scheduled item. I checked the Bryntum API and found that I can use **tooltipTpl** to show tooltip and **tipCfg** to configure it. I added eventmouseenter listener and in respective function I tried to add tooltipTpl
My listener is
eventmouseenter: this.eventMouse
and eventMouse function is
function(e) {
e.apply(e.tipCfg,
{
trackMouse: false
});
var tooltipTpl = "My Tool Tip";
e.apply(e,
{
tooltipTpl: tooltipTpl
});
}
but the code doesn't seems to work. Please help me out for using tootipTpl.
You don't need a listener, just use the tooltipTpl configuration on your Scheduler:
tooltipTpl: new Ext.XTemplate('<span>My Tool Tip</span>'),
...
It can be a String as well:
http://www.bryntum.com/docs/scheduling/3.x/?#!/api/Sch.panel.SchedulerGrid-cfg-tooltipTpl
Edit: See the code of this example using tooltips: http://www.bryntum.com/examples/scheduler-latest/examples/performance/performance.html
I have a sitiuation with Twitter Bootsrap popovers. I managed to make them work to show remote content via iframes, but the problem is I have a Google visualization chart (table) and it has links to trigger popovers depending on the cells values.
The table visualization is set to allow html and it works okay even to trigger modals, but not popovers. They just work when outside of the table.
For you guys to have an idea of what's going on I've placed the full code in jsFidle.http://jsfiddle.net/TyPowers/xLkcY/
Though external references are loaded in the same order (which happens to be an issue sometimes), in jsFidle the popoovers outside of the table don't work either.
$(function(){
$(window).load(function(){
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420"
src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>';
$("#blob").popover({title: 'Last 10 spots for the selected station',
content: img, html:true});
$('[rel="popover"]').popover();
})
});
So to see the actual issue please take a look at http://qsl.net/lu5dx/dxo/
The comment in the first record of the table has exactly the same code as the popoevers outside of the table, but it doesn't work. Someone suggested placing a span class, but it didn't work either.
Your help is much appreciated.
Thanks in advance.
What you need to do to fix the popover links is initialize them in a "ready" event handler for the table. Add this to your drawVisualization function after you create the cTable object, but before calling the dashboard's #draw method:
google.visualization.events.addListener(cTable, 'ready', function () {
$('#' + cTable.getContainerId() + ' [rel="popover"]').popover();
});
A few other things to note that might help: you don't need to pre-load the "table" and "corechart" packages - the ChartWrapper and ControlWrapper objects will take care of loading the necessary libraries for you (preloading doesn't hurt, but it's not going to gain you anything either). You also don't need to specify the dataTable parameter for the ChartRangeFilter - that is handled by the Dashboard. The ChartRangeFilter minRangeSize option is a sub-option of the ui option, not ui.chartOptions, so it should be set up like this:
options: {
ui: {
chartOptions: {
height: 70,
chartArea: {'height': '80%', 'width': '99.5%'},
width: '100%',
hAxis: {
format: 'MMM d y'
},
label : 'End Date Filter'
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
minRangeSize: 86400000,
chartView: {
// Display a single series (DXPedition End Date) to filter the table visualization.
columns: [7, {type: 'number', calc: function() { return 0;}}]
}
},
// Filter by the DXPedition End Date axis.
filterColumnIndex: 7
}
Also, it might help with the data-loading problem if you switch the spreadsheet url to use the tq parameter instead of the ccc parameter:
var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?key=0AmR-D3rOsulZdDJtbmxWeVdXLUliSEhRV0gwNUZsbUE');
The tq parameter tells the spreadsheet API to return a DataTable object. I changed this in a jsfiddle (http://jsfiddle.net/asgallant/xLkcY/10/, also contains the other changes from above) and noticed a dramatic reduction in the number of loading errors (though they did not go away entirely).