I am able to retrieve all the shapes properly except swimlane pool. I tried with jointjs 0.9.5 and also 0.9.3. Both of them throw similar error:
Uncaught Error: dia.ElementView: reference does not exists
# joint_0.9.5.js:5286
joint.dia.ElementView.joint.dia.CellView.extend.positionRelative
# joint_0.9.5.js:5286
Using jointjs 0.9.3 gives error at this line
Uncaught TypeError: Cannot read property 'bbox' of undefined
if (ref) {
// Get the bounding box of the reference element relative to the root `<g>` element.
bbox = V(this.findBySelector(ref)[0]).bbox(false, this.el);
}
My shape is defined like this:
joint.shapes.devs.Container = joint.shapes.devs.Model.extend(_.extend({}, joint.plugins.TooledModelInterface, {
markup:
[
'<g class="rotatable">',
'<g class="scalable">',
'<rect class="body"/>',
'</g>',
'<rect class="pool_header"/>',
'<text class="t"/>',
'<g class="inPorts"/>',
'<g class="outPorts"/>',
'<g class="moveTool"/>',
'<g class="resizeTool"/>',
'<g class="portsTool"/>',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'devs.TooledModel',
position: {x: 200, y: 100},
size: {width: 71, height: 625},
attrs:
{
'.body': {fill: '#ffffff', stroke: '#000000', width: 500, height: 200, 'pointer-events': 'stroke'},
'.pool_header': {fill: '#fff', stroke: '#000', width: 30, ref: '.body', 'ref-height': 1, 'pointer-events': 'visiblePainted'},
'.t': {transform: 'rotate(-90)', ref: '.pool_header', dx: '-0.1%', dy: '50%', 'x-alignment': 'middle', 'text-anchor': 'middle'},
rect: {stroke: '#000000', fill: '#EEEEEE', 'stroke-width': 2}, '.': {magnet: false},
'.inPorts circle': {type: 'input'},
'.outPorts circle': {type: 'output'},
'.port-body': {r: 3}
}
}, joint.shapes.devs.Model.prototype.defaults)
}
Update:
I checked it so many times. This problem occurs only whlie retrieving from Database, jointjs is not able to get bounding box of the following:
console.log(V(this.findBySelector(ref)[0]).bbox(false, this.el));
I checked it manually and here is the error. Because of this error, the pool header is not displayed and the shape itself looks distorted
I think that it is because '.port-body' its not in your markup. So "reference" (port-body) doesnt exist in your markup
Try removing port-body, and all the references that are not in the markup.
Regards!
Related
I have been trying to create overlays with Plotly.js, e.g. Week over Week, Month over Month etc., and I am required to render a similar looking chart as below. I believe the candleStick chart can get me somewhat near to it, but just wanted to explore if anyone has got a better idea.
Year Over Year, chart sample
The candleStick plots are a good option indeed, but they are somewhat limited in Plotly (see below). Another one is to use fill between two curves, something that'd look like this:
Here is the code to produce this:
<html>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="item-graph" id="plotly_graph">
</div>
</body>
<script>
// Some random data
const date = ["2022/01/01", "2022/01/07", "2022/01/13", "2022/01/18", "2022/01/25", "2022/02/01", "2022/02/07", "2022/02/13", "2022/02/18", "2022/02/25"]
const new_date = date.map(function (d) { return new Date(d) })
const bluecurve = [450, 550, 460, 450, 530, 440, 340, 345, 290, 270]
const graycurve = [390, 410, 320, 490, 470, 380, 480, 410, 190, 310]
const min = [350, 430, 420, 410, 480, 350, 320, 310, 230, 190]
const max = [500, 600, 520, 490, 540, 500, 450, 390, 350, 360]
// Setting range of Forecast for hoverinfo
var hovertemplate = []
for (let i = 0; i < min.length; i++) {
hovertemplate.push(min[i] + ' - ' + max[i])
}
// Setting up the traces:
traces = [
{
x: new_date,
y: max,
// name: 'Forecast',
yaxis: 'y',
showlegend: false,
line: { width: 1, shape: 'hvh', color: "lightblue" },
hoverinfo: 'skip',
mode: 'lines',
},
{
x: new_date,
y: min,
name: 'Forecast',
yaxis: 'y',
showlegend: false,
line: { width: 1, shape: 'hvh', color: "lightblue" },
// hoverinfo: 'skip',
hovertemplate: hovertemplate,
mode: 'lines',
fillcolor: "lightblue",
fill: 'tonexty',
},
{
x: new_date,
y: bluecurve,
name: "This Year",
yaxis: 'y',
type: 'scatter',
showlegend: false,
mode: 'markers',
marker: {
size: 20,
color: "blue",
line: {
width: 2,
color: 'DarkSlateGrey'
},
},
},
{
x: new_date,
y: graycurve,
name: "Last Year",
yaxis: 'y',
type: 'scatter',
showlegend: false,
mode: 'markers',
marker: {
size: 20,
color: "lightgray",
line: {
width: 2,
color: 'DarkSlateGrey'
},
},
},
]
// Setting up layout
const layout = {
yaxis: {
rangemode: 'nonnegative',
range: [0, 700]
},
hovermode: "x unified",
};
// Creating the plots
Plotly.react("plotly_graph", traces, layout);
</script>
</html>
If you want to use candlesticks, you can change the layout and the first two elements on the traces to, respectively:
const layout= {
xaxis: {
type: 'date',
rangeslider: {
visible: false,
},
},
yaxis: {
rangemode: 'nonnegative',
range: [0,700]
},
hovermode: "x unified",
};
and
{
x: new_date,
low: min,
open: min,
high: max,
close: max,
decreasing: {line: {color: "lightblue" }},
increasing: {line: {color: "lightblue" }},
yaxis: 'y',
type: 'candlestick',
showlegend: false,
// text: hovertemplate,
hoverinfo: 'skip',
},
The hoverinfo of the candlesticks seem to always include high, low, open and close (I couldn't find a way to edit it, as text just adds to those, so I deactivated it). Here is how it looks like:
There's also no control over the width, apart from the number of sticks in the figure.
I have come across this strange problem and would like to know if there is a solution to it. I am using ApexChart Pie Chart to show a breakdown but whenever I go above the 7 number it gives this error. The error does not appear if the series array (see code below) is 7 or less.
Uncaught (in promise) TypeError: t.push is not a function
Here is my code
const [series, setSeries] = useState([8, 17, 3, 3, 3, 3, 10, 34])
const options = {
chart: {
width: 500,
type: 'pie',
foreColor: '#373d3f'
},
labels: ['Alpha', 'Charlie', 'Delta', 'Mike', 'NS', 'Deltaa', 'Mikee', 'er'],
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: "#03111E",
width: 2,
dashArray: 0,
},
responsive: [{
breakpoint: 540,
options: {
chart: {
width: 350
},
legend: {
position: 'bottom'
}
}
}]
}
<Chart options={options} series={series} type="pie" height={360 + Math.random() * 10}
width={550}
style={{margin: "auto"}}/>
Versions
"apexcharts": "^3.35.3",
"react-apexcharts": "^1.4.0",
I have seen some other question related to this but sadly they do not answer the question. I would like to know if there is a solution to this or is this just a limitation of ApexChart. Thank you.
Work fine when you pass stroke colors as array, not string
stroke: {
...
colors: ["#03111E"],
...
}
https://apexcharts.com/docs/options/stroke/#colors
I am trying to add a tooltip to the legend in highcharts. I am using a pie chart. Using angular js framework.
The legend code is as below
legend: {
useHTML: true,
layout: 'vertical',
align: 'left',
itemMarginTop: 10,
itemMarginBottom: 15,
title: {
style: {
fontSize: "14px",
fontWeight: "600",
color: "#404040"
}
},
itemStyle: {
fontWeight: 'normal',
color: '#404040',
fontSize: '14px'
},
//x : 70,
//y: 110,
labelFormatter: function() {
return ` <md-icon>
<md-tooltip md-direction="top">Hello</md-tooltip>
<i class="material-icons help_icon">info_outline</i>
</md-icon>`
}
},
I do not get the expected results. it just displays the letter H and no icon. If i use a standalone icon like
<i class="material-icons help_icon">info_outline</i>
It just displays the icon. But I am unable to add any tooltip. I searched online and found a solution using the jquery UI plugin. Is there any other way without the plugin and using the angular material icons? Please suggest.
Ps: I have also tried with single quotes / double quotes instead of inverted ticks.
Unfortunately, tooltip in a legend is not supported. However, you can create it using Highcharts.SVGRenderer. Check code and demo posted below.
Code:
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
legend = chart.legend,
legendItems = legend.allItems,
group,
rectElem,
textElem,
box,
i;
group = chart.renderer.g('legend-tooltip').attr({
transform: 'translate(-9999, -9999)',
zIndex: 99
}).add();
textElem = chart.renderer.text().attr({
class: 'legend-tooltip-text',
zIndex: 7
}).add(group);
rectElem = chart.renderer.rect().attr({
'class': 'legend-tooltip',
'stroke-width': 1,
'stroke': '#c5c5c5',
'fill': 'rgba(245, 245, 245, 0.95)',
}).add(group);
for (i = 0; i < legendItems.length; i++) {
(function(i) {
var item = legend.allItems[i].legendItem.parentGroup;
item.on('mouseover', function(e) {
// Define legend-tooltip text
var str = chart.series[i].userOptions.fullName;
textElem.element.innerHTML = str;
// Adjust rect size to text
box = textElem.getBBox()
rectElem.attr({
x: box.x - 8,
y: box.y - 5,
width: box.width + 15,
height: box.height + 10
});
// Show tooltip
group.attr({
transform: `translate(${e.clientX + 7}, ${e.clientY + 7})`
})
}).on('mouseout', function(e) {
// Hide tooltip
group.attr({
transform: 'translate(-9999,-9999)'
})
});
})(i);
}
}
}
},
series: [{
data: [10, 12, 5],
fullName: 'Series 1 tooltip'
}, {
data: [6, 10, 7],
fullName: 'Series 2 tooltip'
}]
});
Demo:
https://jsfiddle.net/BlackLabel/3cbpe0mn/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
My following code work fine with kineticjs version 4.4.3 but give error with kineticjs version 5.1.0 (as shown in screen shot)
Code is:
var simpleText = new Kinetic.Text({
x: 50,
y: 50,
text: 'TESTING',
fontSize: 16,
fill: "white"
});
simpleText.toImage({
width:50,
height:50,
x : 50,
y : 50,
callback: function(img){
var yodaImg = new Kinetic.Image({
image: img,
x: 0,
y: 0,
width: 50,
height: 50,
name: 'image'
});
console.log(yodaImg.src);
}
});
For some reasons I have to use this latest version.
Any solution?
Thanks in advance
var textOnCanvas = new Kinetic.Text({
x: 0,
y: 0,
text: fullText,
fontFamily: "Arial",
fontSize: 22,
fill: '#000000',
align: 'left',
padding: 5,
width: 1024
});
layer.add(textOnCanvas);
layer.draw();
var textImgSrc = textOnCanvas.toDataURL(); // base64 image of text
var textImgObj = new Image();
textImgObj.src = textImgSrc;
var kineticIMG = new Kinetic.Image({
image: textImgObj,
x: 0,
y: 0,
});
src will be in base64 string. Then you can apply this image to the Kinetic.Image() object.
I am using Extjs 4 to create a line chart. Now I want to create a chart series with a dashed line. Currently my code looks the following way:
series: [{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data1',
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}, ...
I tried setting the 'border-style' to 'dashed' but this neither works.
Is this possible in ExtJs Charting?
You just missed one property to get the dashed lines working. You need to add stroke-dasharray property as well. Here is the updated code:
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3,
'stroke-dasharray': 10 // You need to add this!
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
},
You will have to play with the value (10 in my case) to get your desired dash length. Note that this will not work with IE (since its using VML to render the graph). Other browsers should render it properly.
In ExtJS 5.x or 6.x when using sencha-charts (not ext-charts package), stroke-dasharray won't work. After lot of effort, discovered the lineDashed property of Ext.draw.sprite.Sprite works like a charm. So, if you are using sencha-chart package the style config should look like :
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3,
lineDash: [10,10] // Draws dashed lines
}
Hope this will be useful for anyone having problem with sencha-charts.