I have the following code in a D3 project:
function addSquare() {
//Create SVG element
var SQsvg = d3.select("#square")
.append("svg")
.attr({
"width": 70,
"height": 20,
id: "squaresArea"
})
.on("click", resetRefresh);
SQsvg.append("text")
.text("Refresh")
.attr({
x: 15, //margin.left,
y: 15,
"font-family": "sans-serif",
"font-size": "14px",
"text-decoration": "underline",
fill: "blue"
})
.on("click", resetRefresh);
function resetRefresh() {
console.log("hello")
//update bar chart when user selects a square
dsPieChart(initialMeasure, pieDataCSV);
TOPbarChartUpdate("N", initialMeasure, "lightgrey",false);
}
}
When I move my cursor to the text Refresh the interactivity does not seem to span the whole word - why is this? and how do I amend the above so that all the text will trigger the event?
A live example of the whole project is here: http://plnkr.co/edit/w9lBwZhoHqQbmNUjihQv?p=preview
I think its due to the container the pie chart is in is ontop of the Refresh button. I have appended the Refresh button to the body, and seemed to solve the problem :
d3.select('body').append('svg').append("text")
.text("Refresh")
.attr({
x: 15, //margin.left,
y: 15,
"font-family": "sans-serif",
"font-size": "14px",
"text-decoration": "underline",
fill: "blue"
})
.on("click", resetRefresh);
http://plnkr.co/edit/rc78OaAZbOVPjPznGKok?p=preview
Related
We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
var label = new Konva.Label({
"id": "assetLabel_62c280d6f82f05238c2a8779",
"x": 329.3701840204836,
"y": 78.69399520035239,
"width": 50,
"height": 200,
"draggable": true
});
// It plays the role of background for role. If anything regarding to appearance of the
// label should be changed than Konva.Tag will be place to change.
var tag = new Konva.Tag({
"fill": "#FFFF60",
"stroke": "black",
"strokeWidth": 0.8,
"cornerRadius": 4,
"shadowBlur": 6,
"shadowColor": "blue",
"shadowOpacity": 0.7
});
// Text displayed on the label.
var text = new Konva.Text({
"padding": 5,
"fill": "black",
"align": "left",
"fontFamily": "Open Sans",
"fontSize": "16",
"text": "M:1 | C:0 | T:1\nDeviceType: Mono SFP",
"width": "auto",
"height": "auto"
});
//clubbing labels together #important to club them together before using the label
// to avoid issues regarding to dimension.
label.add(tag).add(text);
<script src="https://unpkg.com/konva#8/konva.min.js"></script>
We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
Please find the code snippet :
self.label = new Konva.Label({
id: ASSET_LABEL + assetData.properties._id,
x: assetData.properties.labelCoordinates.x,
y: assetData.properties.labelCoordinates.y,
draggable: true
});
self.tag = new Konva.Tag({
fill: config.color || Color.DARK_YELLOW,
stroke: Color.BLACK,
strokeWidth: LABEL_STROKE_WIDTH,
cornerRadius: CORNER_RADIUS,
shadowBlur: SHADOW_BLUR,
shadowColor: Color.BLUE,
shadowOpacity: SHADOW_OPACITY
});
self.text = new Konva.Text({
padding: 5,
fill: Color.BLACK,
align: DEFAULT_TEXT_ALIGNMENT,
fontFamily: config.fontFamily || DEFAULT_FONT_FAMILY,
fontSize: config.fontSize || DEFAULT_FONT_SIZE,
text: displayText
});
self.label.add(self.tag).add(self.text);
I have the following code. What I want to do is that when mouseover on legend, text should appear in the center of the donut.
Like it happens when mouseOver at the single piece of the donut.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'distrubution_of_funds',
type: 'pie',
borderRadius: 0
},
...
series: [ {
name: 'Versions',
data: [{
"name": "№ 123 (manager)",
"y":2709.74,
"color": "#E85620"
},{
"name": "№ 333",
"y":885.5,
"color": "#92B145"
}, {
"name": "other (127)",
"y": 3151.3274920329,
"isOther": true,
"color": "#B6B9BE"
}],
size: '80%',
innerSize: '60%',
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
useHTML: true,
width: 160,
}
},
function(chart) {
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the text
chart.innerText = chart.renderer.text('$$$', 270, 210).css({
color: '#0f1122',
fontSize: '16px',
textAlign: 'center'
}).attr({zIndex: 999}).add();
});
How to do it?
for example working chart at this page
I added the jquery library in order to use less code, so this is not a vanilla javascript solution. I added the following code inside of your function(chart) { // on complete section:
$(chart.series[0].data).each(function(i, serie){
$(serie.legendItem.element).hover(function(){
chart.innerText.attr({text: serie.y})
}, function(){
chart.innerText.attr({text: '$$$'});
});
});
It's a little bit tricky, but basically, you are attaching a hover event on every legendItem element, that changes the chart innerText attribute, to the y property of the serie.
You can see it working here: JSFiddle demo
Its works here :
http://jsfiddle.net/fw71sxx6/5/
I add jquery for add this in function chart :
// Render the text
chart.innerText = chart.renderer.text('$$$', 270, 210).css({
color: '#0f1122',
fontSize: '16px',
textAlign: 'center',
display: 'none'
}).attr({
class:'getlegend',
zIndex: 999
}).add();
And I add this script:
$( document ).ready(function() {
$('.highcharts-series').mouseover(function() {
$('.showlegend').html($('.getlegend').html());
});
});
I am using highcharts and a phantomjs server to render charts and labels but the useHTML flag while rendering the labels does not seem to be working. I started the server as mentioned in the docs
phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003
and then I am sending post requests with the following as the infile
{
chart: {
events: {
load: function() {
var label = this.renderer.label('Hello World', useHTML=true)
.css({
color: '#FF11FF',
fontSize: '12px'
})
.attr({
fill: 'rgba(0, 0, 100, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add()
box = label.getBBox();
label.align(Highcharts.extend(box, {
align: 'center',
verticalAlign: 'top',
x: 0,
y: 20
}),
null, 'spacingBox');
var label2 = this.renderer.label('Goodbye World')
.css({
color: '#222222'
})
.add()
label2.align(Highcharts.extend(label2.getBBox(), {
align: 'left',
verticalAlign: 'top',
x: 0,
y: box.height + 40
}),
null, 'spacingBox');
}
},
height: 800,
width: 500
},
title: {
text: ''
}
};
I am then exporting this as an svg, but the text for the label gets printed as it is. I also tried
var label = this.renderer.label('Hello World',null, null, 'rect', null, null, true)
but this leads to the first text not being displayed at all, the blue background gets added and so does the second text but not the first text. The first one is not even working on export.highcharts.com but the second one works fine over there. What am I doing wrong here ?
Renderer.label takes more arguments than you provided, docs:
http://api.highcharts.com/highcharts/Renderer.label
Example:
this.renderer.label('Hello World',null,null,null,null,null,true)
Your fiddle with proper use of Renderer.label:
https://jsfiddle.net/6atnc2xj/
I have to plot the graph something like below using highcharts.
I have managed to do all everything expect showing the grids and their labels .
$(function() {
var options = $.parseJSON('{"chart":{"renderTo":"container","type":"column"},"averageText":"3.7","plotOptions":{"series":{"pointWidth":["30"],"borderRadius":["10"]},"column":{"pointPadding":[0]}},"credits":{"enabled":false},"title":{"text":"Volume","margin":140},"xAxis":{"categories":[0,1,2,3,4,5,4,3,2,1,0],"gridLineWidth":0},"yAxis":{"labels":{"enabled":true},"title":{"text":"Responses"},"gridLineWidth":0},"series":[{"showInLegend":false,"name":"speaker","data":[{"y":2,"color":"#C82506"},{"y":5,"color":"#BC5B0C"},{"y":3,"color":"#F39019"},{"y":1,"color":"#F5D329"},{"y":1,"color":"#70BF40"},{"y":6,"color":"#01882A"},{"y":10,"color":"#70BF40"},{"y":6,"color":"#F5D329"},{"y":3,"color":"#F39019"},{"y":7,"color":"#BC5B0C"},{"y":3,"color":"#C82506"}]}]}');
new Highcharts.Chart(options, function(chart) {
chart.renderer.circle(200, 70, 40).attr({
fill: '#327CAD',
stroke: '#327CAD',
'stroke-width': 1,
}).add();
chart.renderer.text('3.3', 180, 79)
.attr({})
.css({
"color": "#fff",
"font-size": "30px",
})
.add();
chart.renderer.text('Average', 175, 120)
.attr({})
.css({
"color": "#000",
})
.add();
})
});
Here is what I have done so far. Please suggest me what further option can I include to make it look like graph below
All custom text / shapes can be added by renderer. Axis lines can be achieved by gridLines.
I am having some trouble in adding text from an input box into my canvas, I have successfully added another layer, however my text doesn't seem to add to the canvas and I am baffled as to why not.
I have included a JSfiddle link,
Any help would be greatly appreciated,
Melissa
$("#addbutton").click(function () {
// simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable: true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
textLayer.add(label);
textLayer.draw();
});