I'm designing a chart with Highstock, which display a series with some flags on it.
Depending of my data, flags can be close enough so they overlap. It can give something like this :
Is there a way to throw to the front of the chart, with zIndex or something like this?
UPDATE
All these flags belong to a series (different from the spline).
This series is build like this :
var flagsNews = {
type : 'flags',
data : aFlags,
onSeries : 'myLineSeries',
shape: 'squarepin'
};
each element of aFlags is pushed like this :
aFlags.push({
x : (new Date(newsData['date_publication']).getTime()),
title : 'a title',
text : 'a text',
id : 'flagID',
events : {
mouseOver : function(){
//some stuff
},
mouseOut : function(){
//some stuff
}
}
});
In general this solution is not supported, but you adapt this solution http://jsfiddle.net/menXU/6/.
events: {
load: function() {
StaggerDataLabels(this.series);
},
redraw: function() {
var series = this.series;
setTimeout(function() {
StaggerDataLabels(series);
}, 1000);
}
},
Related
I'm looking for example code on how to implement a drilldown in a sankey diagram.
I tried using the drilldown code from the column drilldown demo but it didn't work for sankey.
The intended functionality is very similar to a dendogram, i.e- click a node to hide reveal child nodes.
Example:
https://jsfiddle.net/y_tddel/d7jby2z1/5/
.
In this example each node in the second column will be clickable and have their own child nodes.The expanded view of Indo-Iranian node is shown as as an example.
Series.point.events can be used to trigger the event when the user clicks on any node, and update the series data, and adding a back button.
Link: https://api.highcharts.com/highcharts/series.sankey.point.events.click
Look at the following code sample:
Highcharts.chart('container', {
series: [{
point: {
events: {
click: function (e) {
console.log(e, 'e')
let series = this.series,
chart = series.chart;
if (this.isNode) {
if (isDrilldown[isDrilldown.length - 1] != this.name && drilldown_data.hasOwnProperty(this.name)) {
chart.backButton = chart.renderer.button('back', chart.plotLeft, 20, function () {
isDrilldown.pop();
d = JSON.parse(JSON.stringify(drilldown_data[isDrilldown[isDrilldown.length - 1]]));
series.update({data: d});
chart.backButton.destroy();
chart.title.show();
}).add()
isDrilldown.push(this.name);
chart.title.hide()
this.series.update({
data: JSON.parse(JSON.stringify(drilldown_data[this.name]))
})
}
}
}
}
},
keys: ['from', 'to', 'weight', 'drilldown'],
data: JSON.parse(JSON.stringify(plot_data)),
type: 'sankey'
}],
});
Demo: https://jsfiddle.net/deveshgoyal/1zcnuq5b/2/
Current drilldown module is not compatible with the sankey series. You will need to create your own drilldown logic. Below is a basic demo which shows how to update series on click event - which could be treated as an drilldown to other series.
Demo: https://jsfiddle.net/BlackLabel/hn19xga5/
events: {
click() {
let series = this.series,
chart = series.chart;
if (!isDrilldown) {
chart.backButton = chart.renderer.button('back', 20, 20, function() {
series.update({
data: initialData
})
chart.backButton.destroy();
isDrilldown = false;
}).add()
isDrilldown = true;
}
this.series.update({
data: drilldown1
})
}
}
API: https://api.highcharts.com/highcharts/series.sankey.data.events.click
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I have this script on my .html page to display a graph. My values are from -1 to 1 and I have values like 0.0045. It is possible to define this scale on Y axis?
<script>
function js_fun() {
$.getJSON('/myopteboard/data/selectedEngines/'
+ getAllEnginesIdsSelected(), function(datas) {
$.each(datas, function(index, indexData) {
data = indexData.evidencesValues;
console.log(data);
drawChart(data, indexData.name);
});
});
}
var data = [];
var options1 = {
chart : {
renderTo : 'thermal_graph'
},
yAxis : {
labels : {
format : '{value:.002f}'
}
},
series : []
};
var drawChart = function(data, name) {
console.log(name);
// 'series' is an array of objects with keys: 'name' (string) and 'data' (array)
var newSeriesData = {
name : name,
data : data
};
// Add the new data to the series array
options1.series.push(newSeriesData);
// If you want to remove old series data, you can do that here too
// Render the chart
var chart = new Highcharts.Chart(options1);
};
</script>
Next time please provide fiddle for your code.
Try tickInterval option for axis http://jsfiddle.net/Paulson/zwwsuc0L/
I have sample code for question here: http://jsfiddle.net/MuydK/
The problem relates to legend title in the key under chart are changing after I have drilled in and out.
They should stay as
"actual" and
"target"
And are changing to "series 1" and "series 2".
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
I think I may be missing something in drilldown configuration or setChart code?
I got the same problem with a couple if charts based on code posted above.
Many Thanks
Hope this is what you need,
JSFiddle - Legend Name Problem
code:
function setChart(name, categories, data, color) {
console.log(name, categories, data, color);
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
color: color[i]
});
}
}
Edit2: The problem is in your else statement in the function bellow.
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color);
} else { // restore
setChart(name, categories1, [data1, data2], 'white');
}
}
Instead get rid of name1 = 'Actual' and only have data1 and data2 and add name and color to them then you could do like this instead
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
chart.xAxis[0].setCategories(drilldown.categories);
setChart([drilldown.data]);
} else { // restore
chart.xAxis[0].setCategories(categories);
setChart([data1, data2]);
}
}
// add code for removing series
chart.addSeries({
data
});
I hope you understand, but it will be easier if you build data1/2as a highcharts object, and just add the drilldown part to it. So you can change;
series: [{
name: name1,
data: data1,
color: colors[0]},
{
name: name2,
data: data2,
color: colors[1]}],
to:
series: [data1, data2],
Edit: When you are doing operations bellow you should not set redraw to true, it will be much faster. The same goes for adding the series. You do not need to call chart.redraw() until you have removed and added the charts. And removing stuff is easier backwards. So change:
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
To
for (var i = chart.series.length; i >= 0; i--){
chart.series[i].remove(false);
}
// add series with redraw == false
chart.redraw();
I've seen many questions regarding context-menu and two-way communication and it appears that I know the answer to my question... "you can't", but I'm going to try anyway.
On each page there is a modal div that is created by a page-mod. This modal is designed to show up when a user hovers over words in text nodes to give a translation of the word. This works perfectly and I don't have any problems with the page-mod.
What I want to do now is allow the user to highlight a selection of text, right click to bring up the context menu where my new menu item will be to "Translate Selection", and then display the selection in the modal div. Here's where the problems begin. I can respond to the context and click events in the content script, which is fine if I didn't have to do a translation. The translation is done by a web service and the content script cannot call a web service because the callbacks don't exist in the context of the content script because it is in a proxy sandbox. That means that all web service calls need to come from main.js (this is how it works in the page-mod). The problem is that the context-menu object in main.js does not have access to the DOM to update the content of the modal div and show it, and it cannot send information to the content script so that the content script can update the DOM and show the modal div. So how do I get the translation to the DOM from the add-on script for the context-menu?
Is what I want to do possible with the SDK, or do I have to undo many hours of work to put my project back into the "old school" way of doing things so I can get the context menu to work correctly?
This is what I have (the page-mod works, need help with the context-menu):
exports.main = function (options, callbacks) {
'use strict';
var myAppMenuItem,
myAppContextMenu,
myAppPanel,
myAppMod,
self = require('self'),
contextMenu = require('context-menu');
myAppMenuItem = require('menuitems').Menuitem();
if (myAppMenuItem.getAttribute('checked') === 'false') {
return;
}
myAppMod = require('page-mod');
myAppMod.PageMod({
include: '*',
contentScriptWhen: 'ready',
contentScriptFile: [self.data.url('jquery-1.7.2.min.js'), self.data.url('myAppmod.js')],
contentStyleFile: self.data.url('myAppmod.css'),
onAttach: function (worker) {
worker.port.on(
'translate',
function (data) {
require('request')
.Request({
url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
content: {
appid : 'myappid',
to : data.to,
from : data.from,
text : data.text
},
onComplete: function (response) {
worker.port.emit('translation', { response : response.text, elementId : data.elementId });
}
})
.get();
}
);
}
});
myAppContextMenu = contextMenu.Item({
label: "Translate Selection",
context: contextMenu.SelectionContext(),
contentScriptFile : [self.data.url('jquery-1.7.2.min.js'), self.data.url('myAppcontextmenu.js')],
onMessage: function (data) {
require('request')
.Request({
url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
content: {
appid : 'myappid',
to : data.to,
from : data.from,
text : data.text
},
onComplete: function (response) {
<what can I do here to send the information to the content script?>
}
})
.get();
}
});
};
Thank you to Wladimir! The following code does what I want it to:
In the main.js for the context-menu:
myAppContextMenu = contextMenu.Item({
label: "Translate Selection",
context: contextMenu.SelectionContext(),
contentScriptFile : [self.data.url('jquery-1.7.2.min.js'), self.data.url('myAppcontextmenu.js')],
onMessage: function (data) {
var text = require('selection').text;
require('request')
.Request({
url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
content: {
appid : 'myappid',
to : data.to,
from : data.from,
text : text
},
onComplete: function (response) {
var index,
tabs = require('sdk/tabs');
for (index = 0; index < workers.length; index += 1) {
if (workers[index].tab === tabs.activeTab) {
workers[index].port.emit('selectionTranslation', { text: text, response : response.text, leftOffset : data.leftOffset, topOffset : data.topOffset });
}
}
}
})
.get();
}
});
and in the content script:
self.on(
'click',
function (node, data) {
'use strict';
var selectedElement = $(node),
messageData =
{
to : 'es',
from : 'en',
topOffset : selectedElement.offset().top + (selectedElement.height() / 2),
leftOffset : selectedElement.offset().left + (selectedElement.width() / 2)
};
self.postMessage(messageData);
}
);
There is a global workers array variable defined in the exports.main function that gets populated by the onAttach function of the page mod as so:
workers.push(worker);
worker.on(
'detach',
function () {
var index = workers.indexOf(worker);
if (index >= 0) {
workers.splice(index, 1);
}
}
);
I am getting tooltip on mouse hover by each row for current column but I am unable to get next column tooltip on continue hover on same row.
But I can get it if I hover on another row & again hover any column of the previous row by using:
listeners:{
'itemmouseenter': function (view, record, item, index, e, eOpts) {
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(this.view.cellSelector).cellIndex];
Ext.fly(item).set({ 'data-qtip': 'Des:' + column.dataIndex });
}
}
Can anyone show me what I'm missing or point me in the right direction?
I have an easy one, using the renderer function:
{
xtype : 'gridcolumn',
dataIndex : 'status',
text : 'Status',
renderer : function(value, metadata) {
metadata.tdAttr = 'data-qtip="' + value + '"';
return value;
}
}
I was looking through this. I could manage to get the tool tip for each cell by doing something like this:
Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.cellSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
var gridColums = view.getGridColumns();
var column = gridColums[tip.triggerElement.cellIndex];
var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
tip.update(val);
}
}
});
});
Let me know if it helps
{
text: name,
width: 80,
dataIndex: dataIndex,
sortable: true,
listeners: {
afterrender: function ()
{
Ext.create('Ext.ToolTip',
{
target: this.getEl(),
anchor: direction | "top",
trackMouse: true,
html: this.text
});
}
}
}