I'm trying to increment text value everytime I click on the rectangle. What am I doing wrong ?
I don't understand because the call to my var works in drawText but doesn't in setLayer.
I looked at "setLayer" source code, who's working with '+=' syntax, but text is a String var and I don't want to make String concatenation.
value=1
$('canvas').drawText({
name: 'count',
fillStyle: '#0f0',
x: 20, y: 20,
fontSize: 22,
fontFamily: 'Verdana, sans-serif',
text: value
})
.drawRect({
strokeStyle: '#000',
fillStyle: '#ccc',
x: 20, y: 50,
width: 20,
height: 20,
layer: true,
click: function(layer) {
// Spin
$(this).animateLayer(layer, {
rotate: '+=180'
});
v=parseInt(value);
$(this).setLayer('count',{
text: value+1 // TRYING to increment over here
});
}})
Removing and recreating layers will make jCanvas unhappy. A much better solution would be to use setLayer() by parsing the current value to a number, incrementing that value, and passing it to the method:
$('canvas').drawText({
layer: true,
name: 'count',
fillStyle: '#0f0',
x: 20, y: 20,
fontSize: 22,
fontFamily: 'Verdana, sans-serif',
text: '1'
})
.drawRect({
strokeStyle: '#000',
fillStyle: '#ccc',
x: 20, y: 50,
width: 20,
height: 20,
layer: true,
click: function(layer) {
var $canvas = $(this),
countLayer = $canvas.getLayer('count');
// Spin
$canvas.animateLayer(layer, {
rotate: '+=180'
});
$canvas.setLayer(countLayer,{
text: parseFloat(countLayer.text) + 1
});
}
});
I found a workaround removing the layer and creating a new one at the same place.
function updateCount(param) {
$('canvas').removeLayer("count")
.drawText({
name: 'count',
fillStyle: '#0f0',
x: 250, y: 180,
fontSize: 22,
fontFamily: 'Verdana, sans-serif',
text: value,
layer: true,
maxWidth: 200
})
.drawLayers();
}
Related
Does anyone has clue how to target specific grid line and style like in the example?
I know how to dash line with:
grid: {
strokeDashArray: 10,
},
But how can I target grid line according to the tick value?
Desired result
Only way you can do it is via css
.apexcharts-gridline:nth-child(2) {
stroke-dasharray: 10;
}
Or use annotations instead https://apexcharts.com/docs/annotations/
I have sorted it by using annotations property. Here is an example:
// Breakdown line
annotations: {
position: 'front',
yaxis: [
{
y: 3000,
strokeDashArray: 5,
label: {
position: 'left',
borderColor: 'transparent',
textAnchor: 'middle',
offsetY: -10,
offsetX: 50,
style: {
color: '#D0D4D9',
background: "transparent",
},
text: ''
}
}
]
}
I can create a stage and add shapes. However, if I use the Konva.Node.create command then the stage no longer displays newly added shapes.
In the code below, the first text 'Hello World !' is displayed, but the second text (after the Konva.Node.create) where it should display 'Hello World 2!' does not appear on the stage.
A working fiddle of this code is here.
Any help would be appreciated. Thanks
var stage = new Konva.Stage({
container : "container",
width : 400,
height : 300
});
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
x: 10,
y: 48,
text:'Hello, World!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();
Konva.Node.create(stage, "container");
var text2 = new Konva.Text({
x: 40,
y: 48,
text:'Hello, World 2!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();
Konva.Node.create overwrites the original stage in div container and creates a new copy. So your changes are not visible.
Probably you just need to remove that line.
It worked!
var stage = new Konva.Stage({
container : "container",
width : 400,
height : 300
});
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
x: 10,
y: 48,
text:'Hello, World!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();
var stage = Konva.Node.create(stage, "container");
var layer = stage.getLayers()[0];
var text2 = new Konva.Text({
x: 40,
y: 48,
text:'Hello, World 2!',
align: 'left',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green',
draggable: true,
name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();
I created a custom legend panel for an Ext chart using Ext.draw.Text.... In my application, legends may have long custom texts. So I need to split them using a fixed length. One way would be two split the text using Javascript and create text sprites for each part of text.
Is there any other way to split text in Ext.draw.Text?
Code:
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. Can i split this into two tspan",
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});
Thanks In Advance.
I was successfully able to generate multiple tspan for Ext.draw.text by inserting new line characters in text content('\n'). JSFiddle
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. \n Can i split this into two tspan", //Added new line character
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});
I want to create a custom element with new attributes, I created my custom element like that but I need a new attribute to store information about the element.
joint.shapes.basic.newRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.newRect',
attrs: {
'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
Thanks!
You can add new properties next to the type and attrs. These will be your default properties for your element, like so:
joint.shapes.basic.newRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.newRect',
attrs: {
'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
},
mycustom: 'foo'
}, joint.shapes.basic.Generic.prototype.defaults)
Later when you instantiate your element, you can also add properties only to that specific element:
var myNewRect = new joint.shapes.basic.newRect({ position: { x: 1, y: 1 }});
myNewRect.set('mycustom2', 'bar')
myNewRect.get('mycustom') // 'foo'
myNewRect.get('mycustom2') // 'bar'
All these properties will be taken into account when serializing the graph as well.
You can also use the provided Element#prop. See http://jointjs.com/api#joint.dia.Element:prop
I'm using ChartsJS to create a gauge. I like their styles so I thought it wouldn't be too hard to implement compared to Highcharts or others.
I put the code (which comes in from a jQuery AJAX load - might be a factor) and it ONLY works if I right click and open Inspect Element, or if it is already open, I have to close it. Otherwise it's just empty white space ... no console errors..
Code:
var scaleSettings = {
startValue: -50,
endValue: 50,
majorTick: {
color: 'black',
tickInterval: 10
},
minorTick: {
visible: true,
color: 'black',
tickInterval: 1
}
};
$("#gaugeGraph").dxCircularGauge({
value:200,
valueIndicator: {
type: 'rangebar',
color: '#483D8B'
},
geometry: {
startAngle: 180, endAngle: 0
},
scale: {
startValue: 0, endValue: 100,
majorTick: {
tickInterval: 25,
tickInterval: 50,
tickInterval: 75,
tickInterval: 100
},
label: {
customizeText: function (arg) {
return arg.valueText + ' %';
}
}
}
});
Load Code:
$(document).ready(function() {
loadURL("dataGraph.php?id=<?php echo $id;?>", $('#section > .graph'));
loadURL("dataGauge.php?id=<?php echo $id;?>", $('#section > .gauge')); //GAUGE
$(window).trigger('resize');
loadURL("dataRecords.php?id=<?php echo $id;?>", $('#section > .dataTable'));
});
#k0pernikus helped to discover the resize issue.
I used this code to make it happen:
$( document ).ready(function() {
var scaleSettings = {
startValue: -50,
endValue: 50,
majorTick: {
color: 'black',
tickInterval: 10
},
minorTick: {
visible: true,
color: 'black',
tickInterval: 1
}
};
$(window).resize(function()
{
$("#gaugeGraph").dxCircularGauge({
value:200,
valueIndicator: {
type: 'rangebar',
color: '#483D8B'
},
geometry: {
startAngle: 180, endAngle: 0
},
scale: {
startValue: 0, endValue: 100,
majorTick: {
tickInterval: 25,
tickInterval: 50,
tickInterval: 75,
tickInterval: 100
},
label: {
customizeText: function (arg) {
return arg.valueText + ' %';
}
}
}
});
}).resize();
});