Raphael.js how to store the name in each element? - javascript

I have rendered several rectangulars in Raphael.js. I would like to give each of the rectangular a name, and store the name to each of them. How to do in Raphael?
For example:
var r1 = paper.rect(10, 10, 50, 50); //name it 'car'
var r2 = paper.rect(10, 10, 50, 50); //name it 'plane'
var r3 = paper.rect(10, 10, 50, 50); //name it 'bike'
then, in future, I can distinguish them by check the name, like r1.attr('name')=='car'
How to add new attribute to store the names then?

Why not just add an ID to the DOM object using .node?
var r1,r2,r3;
r1 = paper.rect(10, 10, 50, 50);
r1.node.id = 'car'
r2 = paper.rect(10, 10, 50, 50);
r2.node.id = 'plane'
r3 = paper.rect(10, 10, 50, 50);
r3.node.id = 'bike'

Related

get Y value given X value in AM Charts JS

I am using AMCharts for my project, what I want is to accomplish this:
given 1. data points:
const data = [{x: 23, y: 0},{x: 24, y: 0},{x: 25, y: 23},...,{x: 26, y: 24}]
I want to extract any Y value given X value from the series...
Partial code I am using to create chart:
this.chart = am4core.create(this.chartDiv, am4charts.XYChart);
this.title = this.chart.titles.create();
// chartData is just an array of x,y values
this.chart.data = this.props.chartData;
const X_AXIS = this.chart.xAxes.push(new am4charts.ValueAxis());
X_AXIS.title.text = "X VALUES";
const Y_AXIS = this.chart.yAxes.push(new am4charts.ValueAxis());
Y_AXIS.title.text = "Y VALUES";
this.series = this.chart.series.push(new am4charts.LineSeries());
this.series.dataFields.valueX = "xValue";
this.series.dataFields.valueY = "yValue";
// cursor
this.chart.cursor = new am4charts.XYCursor();
this.chart.cursor.xAxis = X_AXIS;
this.chart.cursor.yAxis = Y_AXIS;
this.chart.cursor.snapToSeries = this.series;
How can I accomplish this? Say Y value for X = 24 in JS (something like this.series.get(25))
Why not just search through the data using the Array.prototype.find method since you're generating your points based on the data array anyways.
const data = [{x: 23, y: 0},{x: 24, y: 0},{x: 25, y: 23},{x: 26, y: 24}];
console.log(data.find(item => item.x === 23).y);

How to set the max value in the heatmap properly setData?

I have some data saved and it is huge, 100.000 plus points saved in the database. In this format:
database_data = [
{ x: 100, y: 100, value: 1},
{ x: 200, y: 100, value: 1},
{ x: 120, y: 320, value: 1},
...
]
I am giving the value of 1 for each point as you can see above. I would like to use:
heatmap.setData({
max: max_value,
data: database_data
});
To plot the data on the screen. How can I calculate the max_value of the heatmap? Because I wanna have the information been displayed on the screen where the most red color is the points where we have more frequently in the database and the less red color would be the point where we have only once in the database. But as we know, (x:100, y:100) and x:120, y: 120) will have some intersection between them, and that would also need to be consider, just like the normal heat map.
In other words, I want to know how to automatically calculate the value for "max" in the heatmap using setData function!
Here below it is a function that is working fine, but it takes too much time:
var body = document.body;
var bodyStyle = getComputedStyle(body);
var hmEl = document.querySelector(".heatmap-wrapper");
hmEl.style.width = bodyStyle.width;
hmEl.style.height = bodyStyle.height;
hmEl.style.background = "#3e1852";
hmEl.style.zIndex = "1000";
var hm = document.querySelector(".heatmap");
var heatmap = h337.create({
container: hm,
radius: 40,
});
var dbh_x = <?php echo $dbh_x;?>; //LIKE THIS->["100", "200", "300","400", "420", "500", "600", "600"];
var dbh_y = <?php echo $dbh_y;?>;//LIKE THIS->["100", "200", "300","400", "420", "500", "600", "600"];
for ( var i =0; i< dbh_x.length; i++){
heatmap.addData({
x: dbh_x[i],
y: dbh_y[i],
});
};
Because of the loading time, I was trying to use setData instead:
var body = document.body;
var bodyStyle = getComputedStyle(body);
var hmEl = document.querySelector(".heatmap-wrapper");
hmEl.style.width = bodyStyle.width;
hmEl.style.height = bodyStyle.height;
hmEl.style.background = "#3e1852";
hmEl.style.zIndex = "1000";
var hm = document.querySelector(".heatmap");
var heatmap = h337.create({
container: hm,
radius: 40,
});
heatmap.setData({//This function will show the data kind a fast for 100000+points
max: 10, //This is the problem
data: [{ x: 891, y: 50, value: 1},{ x: 891, y: 50, value: 1},...]
});
Appreciate your guys time!

Group array base on maximum and length

Having a hard time to group this array. any suggestions.
As an example I have an array var a = [10, 100, 20, 50, 20, 50, 70, 120]
and I have a maximum of 150 and minimum length of 3 i.e each sub array can have a total maximum sum of 150 and a maximum length of 3
any suggestion to make it like this [[10, 100, 20], [50, 20, 50], [70], [120]]
thanks in advance
Here you go, the groupArray function will iterate on your input and build groups based on max length and max sum provided.
function groupArray(input, maxSum, maxLen) {
const res = [[]];
let mark = 0;
let sum = 0;
input.forEach( ele => {
// if the current group has already reach maxLenght or maxSum
// then create a new group
if ( res[mark].length > (maxLen-1)
|| (sum + ele) > maxSum ) {
res.push([ele]);
mark++;
sum = ele;
}
// otherwise add to current grop
else {
res[mark].push(ele);
sum += ele;
}
});
return res;
}
const test_1 = [10, 100, 20, 50, 20, 50, 70, 120];
const test_2 = [10, 130, 20, 50, 20, 50, 70, 120];
const test_3 = [140, 110, 20, 50, 20, 50, 70, 120];
console.log(groupArray(test_1, 150, 3));
console.log(groupArray(test_2, 150, 3));
console.log(groupArray(test_3, 150, 3));
Note: Since the question did not have any additional rules, this function does not reorder the array or try to look for the best possible length match or best possible sum matches.

How to add a edge to my toolbar [mxGraph - js]

I`m trying to add an edge to a toolbar in mxGraph. Vertex following the examples i can do it perfectly. But edges i can't do it, someone can help me? I declare a link style, but it doesn't work.
var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
var img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;
graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
var tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, (tmp) ? 100 : 20);
img.enabled = tmp;
});
};
addVertex('images/rectangle.gif', 100, 40, '');
addVertex('images/rounded.gif', 100, 40, 'shape=link');
addVertex('images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('images/actor.gif', 30, 55, 'shape=umlActor');
I think you can edit XML file of the toolbar you want to add edge to it, just like adding new cell to the toolbar
Though Edge is a cell object, it cannot be placed in the toolbar for drag and drop. If your intention is to create connection between vertices, you can use the following in your code and check:
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
On mouseover for any vertex (source vertex), one connection icon (With Right Arrow) will appear. Just click and drag that icon to the another vertex (Target Vertex). This will create edge between two verties
var addVertex = function(mylabel, icon, w, h, style)
{
var vertex = new mxCell(mylabel, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
addToolbarItem(graph, toolbar, vertex, icon);
};
addVertex("None",'<c:url value="/resources/js/examples/editors/images/swimlane.gif"/>', 120, 160, 'shape=swimlane;startSize=20;');
addVertex("Catagory 1",'<c:url value="/resources/js/examples/editors/images/rectangle.gif"/>', 100, 40, 'shape=rectangle');
addVertex("Catagory 2",'<c:url value="/resources/js/examples/editors/images/rounded.gif"/>', 100, 40, 'shape=rounded');
addVertex("Catagory 3",'<c:url value="/resources/js/examples/editors/images/ellipse.gif"/>', 40, 40, 'shape=ellipse');
addVertex("Catagory 4",'<c:url value="/resources/js/examples/editors/images/rhombus.gif"/>', 40, 40, 'shape=rhombus');
addVertex("Catagory 5",'<c:url value="/resources/js/examples/editors/images/triangle.gif"/>', 40, 40, 'shape=triangle');
addVertex("Catagory 6",'<c:url value="/resources/js/examples/editors/images/cylinder.gif"/>', 40, 40, 'shape=cylinder');
addVertex("Catagory 7",'<c:url value="/resources/js/examples/editors/images/actor.gif"/>', 30, 40, 'shape=actor');
// toolbar.addLine();

Automatically add pixels when adding rectangle to canvas

For the moment, I have this
var x = 150;
var o = 100;
var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "red";
canvas.height = 0;
var rects = [
[20, 20, x, o],
[20, 130, x, o],
[20, 240, x, o],
[20, 350, x, o],
[20, 460, x, o],
[20, 570, x, o],
[20, 680, x, o],
[20, 790, x, o],
[20, 900, x, o]
];
as you can see i have added manually every rectangle.
I want to add automatically 70 pixels by each rectangle added by uses a jQuery function drawRect().
I have tried this so far Jcanvas
My reason for this is that i want to load data into an other canvas by clicking on the rectangle in this "canvas". I think it would be easier by using JQuery drawRect() instead of typing it manually like I did below. Since the rectangles dont have any ID.
I am stuck can you please clearify things for me?
You need something like this as I understood from your comment:
// Using Canvas API
ctx.fillStyle = '#000000';
rects.forEach(function (rect) {
ctx.fillRect.apply(ctx, rect);
});
// Using Jcanvas
var canvas = $('#NodeList');
rects.forEach(function (rect) {
canvas.drawRect({
fillStyle: '#000000',
x: rect[0],
y: rect[1],
width: rect[2],
height: rect[3]
});
});

Categories

Resources