Plot.ly does not render when passed an array of traces - javascript

The code below fails to render data. No exceptions are thrown. However, the same code does work when given only one of the two traces as shown in the second code segment. The only difference is calling
Plotly.newPlot(target_target, traces); // doesn't render
instead of:
Plotly.newPlot(target_target, trace0); // trace1 also works.
I'm a javascript noob so it's probably something wrong with my traces array, but it looks like the example code I looked at.
Code that doesn't work (complete):
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='target' style="width:600px;height:450px;"></div>
<script>
var target_target = document.getElementById('target');
var trace0 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
}];
var trace1 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
type: 'scatter'
}];
var traces = [ trace0, trace1 ];
Plotly.newPlot(target_target, traces);
</script>
</body>
</html>
Code that does work (complete):
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='target' style="width:600px;height:450px;"></div>
<script>
var target_target = document.getElementById('target');
var trace1 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
type: 'scatter'
}];
Plotly.newPlot(target_target, trace1);
</script>
</body>
</html>


The mistake you made was simply that the individual traces should be objects not array of a single object, all you need to do is to make this correction.
Before:
var trace0 =
[{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
}];
After:
var trace0 =
{
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
};
Then these individual traces(objects) need to be grouped into an array and set in plotly.
var traces = [ trace0, trace1 ];
Plotly.newPlot(target_target, traces);
That is why the second example works, since the traces are received as an array of objects.
Please do refer the below example and check if your issue is resolved!
var target_target = document.getElementById('target');
var trace0 = {
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
type: 'scatter'
};
var trace1 = {
x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
type: 'scatter'
};
var traces = [trace0, trace1];
Plotly.newPlot(target_target, traces);
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id='target' style="width:600px;height:450px;"></div>
</body>
</html>

Related

Filling array with map function issue

I don't understand how to fill the array with a map() with the one difference:
I have array which is filled with a template like :
const templateOfRanks = {
rankingElementsTemplate : [
{row : [1.1, 1.2, 1.3, 1.4]},
{row : [2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9]},
{row : [3.1, 3.2, 3.3, 3.4]},
]
}
Result
It looks like a dimensional array. How can I fill a new array without "rows"? I want to get an array with elements from this template but without nested elements.
It should look like: [ 1.1, 1.2, 1.3, 1.4, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9,3.1, 3.2, 3.3, 3.4]
Probably I should use the push() function, I don't know...but I need to have two arrays: the first one is dimensional and the second one is single.
Help me, please.

you can use flatMap
const templateOfRanks = {
rankingElementsTemplate : [
{row : [1.1, 1.2, 1.3, 1.4]},
{row : [2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9]},
{row : [3.1, 3.2, 3.3, 3.4]},
]
}
const flat = templateOfRanks.rankingElementsTemplate.flatMap(i => i.row);
console.log(flat);

Change z index label in plotly js

I want to change the z-index label in plotlyjs
I am using the following code. It currently shows X,Y,Z on hover. X, Y values are good. I want to know if there is some way where we can change the value label of Z?
On hover on the graph I want Z to be shown as 'Value'. How to get that?
var data = [ {
z: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
type: 'contour',
colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']]
}
];
var layout = {
title: 'Custom Contour Plot Colorscale'
};
Plotly.newPlot('myDiv', data, layout);

Try the hovertemplate option (https://plot.ly/javascript/reference/#contour-hovertemplate):
var data = [ {
z: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
type: 'contour',
colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']],
hovertemplate: 'x: %{x}, y: %{y}, Value: %{z}<extra></extra>'
}
];
var layout = {
title: 'Custom Contour Plot Colorscale'
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js"></script>
<div id=myDiv>
</div>

Sort an array by two fields

I'm trying to summarise this unordered 2d array:
[
[3.0, 1.0, 4.0],
[2.0, 1.0, 1.0],
[1.0, 1.0, 6.0],
[1.0, 1.0, 1.0],
[3.0, 2.0, 5.0],
[2.0, 2.0, 1.0],
[3.0, 1.0, 1.0],
[1.0, 1.0, 4.0],
[1.0, 2.0, 3.0],
[3.0, 1.0, 2.0],
[2.0, 1.0, 1.0],
[2.0, 2.0, 2.0]
]
I'm able to order it by the first then second columns like so:
[
[1.0, 1.0, 6.0],
[1.0, 1.0, 1.0],
[1.0, 1.0, 4.0],
[1.0, 2.0, 3.0],
[2.0, 1.0, 1.0],
[2.0, 1.0, 1.0],
[2.0, 2.0, 1.0],
[2.0, 2.0, 2.0],
[3.0, 1.0, 4.0],
[3.0, 1.0, 1.0],
[3.0, 1.0, 2.0],
[3.0, 2.0, 5.0]
]
Using this code:
function sortData(myArr) {
// sort on second column, asc
myArr.sort(function (element_a, element_b) {
return element_a[1] - element_b[1];
});
// sort on first column, asc
myArr.sort(function (element_a, element_b) {
return element_a[0] - element_b[0];
});
return myArr;
}
Ultimately, the result below is what I'm trying to get (sum of third column, grouped by 1st and 2nd in ascending order):
[
[1.0, 1.0, 11.0],
[1.0, 2.0, 3.0],
[2.0, 1.0, 2.0],
[2.0, 2.0, 3.0],
[3.0, 1.0, 7.0],
[3.0, 2.0, 5.0]
]

You can first sort your data and then use forEach() loop to group by first two elements and sum third element.
var data = [[3,1,4],[2,1,1],[1,1,6],[1,1,1],[3,2,5],[2,2,1],[3,1,1],[1,1,4],[1,2,3],[3,1,2],[2,1,1],[2,2,2]]
data.sort(function(a, b) {
return a[0] - b[0] || a[1] - b[1]
})
var result = [];
data.forEach(function(e) {
var key = e[0].toString() + e[1].toString();
if(!this[key]) result.push(this[key] = e.slice())
else this[key][2] += e[2]
}, {})
console.log(JSON.stringify(result))

Go through the sorted array, creating a new array of sums.
Create a new element when the 1st or the 2nd column become different, or add to the current element as long as those columns remain the same.

Using Array#reduce:
let arr = [
[3.0, 1.0, 4.0],
[2.0, 1.0, 1.0],
[1.0, 1.0, 6.0],
[1.0, 1.0, 1.0],
[3.0, 2.0, 5.0],
[2.0, 2.0, 1.0],
[3.0, 1.0, 1.0],
[1.0, 1.0, 4.0],
[1.0, 2.0, 3.0],
[3.0, 1.0, 2.0],
[2.0, 1.0, 1.0],
[2.0, 2.0, 2.0]
]
let res = Object.values(arr.reduce((a, c)=>{
let key = c.slice(0,2).join('|');
if(!a[key]){
a[key] = c
}else{
a[key][2] += c[2]
}
return a
},{})).sort((a, b)=>{
return a[0]-b[0] || a[1] - b[1]
});
console.log(JSON.stringify(res))
Basic theory is to use first 2 values to create an object key. If that key doesn't exist create a new one with current array as value.... if it already exists sum last value of each

WebGL solid colors

https://www.dropbox.com/s/4zkhtdv4yaqhpxy/Screenshot%20from%202015-01-28%2010%3A42%3A02%201.png?dl=0
Can someone explain to me, what am I doing wrong? I want every face of the cube to have one solid colour. The code, which creates the cube, is in RunCube.coffee file and the vertices and colour are defined in Cube.coffee file. I think the problem is that I do not know, how to use indexes for colours.
Here is the repository on github https://github.com/trimpirim/shiny-soice
UPDATED:
I have Cube with all it's data.
#vertices: [
[ 6.89954888016507530, 0.39691390817415106, -4.02972512706645780],
[-0.78006682662096161, -3.78853119791598660, -7.00275139558893490],
[-5.79336942493284560, 3.47790796230961650, -4.28264251507835430],
[ 1.88624628185319150, 7.66335306839975420, -1.30961624655587690],
[ 0.78006682662096205, 3.78853119791598920, 7.00275139558893490],
[ 5.79336942493284290, -3.47790796230961740, 4.28264251507835780],
[-1.88624628185319150, -7.66335306839975150, 1.30961624655588270],
[-6.89954888016507440, -0.39691390817415328, 4.02972512706646220]
];
#faces: [
[0, 1, 2], [0, 2, 3],
[0, 3, 4], [0, 4, 5],
[0, 5, 6], [0, 6, 1]
[2, 1, 6], [2, 6, 7],
[2, 7, 4], [2, 4, 3],
[4, 7, 6], [4, 6, 5]
];
#colors: [
[1.0, 0.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
]
Can someone tell me, how should correct colours data look like?

EDIT:
There are not separated indices for colors. Indices are same for both, vertex positions and colors (or any other property you could think of).
To achive cube with 6 solid colors, you will have to repeat some parts of your arrays.
This is kind of prototype, how vertices look like:
vertices: [
{
position: [x,y,z],
color: [r, g, b, a]
},
{
position: [x,y,z],
color: [r, g, b, a]
},
...
];
Vertex with position: [0,0,0], color [1,0,0,1] is not same as vertex with position: [0,0,0], color [0,1,0,1]. You want one corner of cube be part of 3 faces with different color. So there must be 3 vertices in one corner with same position, but different color. Unfortunately in this case, position cannot be shared.
So your definition should look like this:
var vertex_positions = [
// see that front face and back face has 8 unique positions
// front face
[0, 0, 0],
[1, 0, 0],
[1, 1, 0],
[0, 1, 0],
// back face
[0, 0, 1],
[1, 0, 1],
[1, 1, 1],
[0, 1, 1],
// see that bottom face and top face has 8 unique positions too,
// but they repeated with different order from front and back
// bottom face
[0, 0, 0],
[1, 0, 0],
[1, 0, 1],
[0, 0, 1],
// top face
[0, 1, 0],
[1, 1, 0],
[1, 1, 1],
[0, 1, 1],
// left and right face have 8 unique positions too, but again
// repeated from front, back / bottom, top
// left face
[0, 0, 0],
[0, 1, 0],
[0, 1, 1],
[0, 0, 1],
// right face
[1, 0, 0],
[1, 1, 0],
[1, 1, 1],
[1, 0, 1]
];
Colors, same amount of elements as for positions:
var vertex_colors = [
// front face
[1.0, 0.0, 0.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
// back face
[1.0, 1.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
// bottom face
[0.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
// top face
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.5, 0.5, 1.0],
[1.0, 0.5, 0.5, 1.0],
// left face
[1.0, 0.0, 1.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
// right face
[0.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
];
Now indices:
var triangles = [
// front face
[0, 1, 2],
[0, 2, 3],
// back face
[4, 5, 6],
[4, 6, 7],
// bottom face
[8, 9, 10],
[8, 10, 11],
// top face
[12, 13, 14],
[12, 14, 15],
// left face
[16, 17, 18],
[16, 18, 19],
// right face
[20, 21, 22],
[20, 22, 23]
];
Cube is made of 12 triangles. With solid color faces, we need 4 unique vertices for 2 triangles, so we need 24 different vertex definitions.
This is the most traditional way as gman said. There are also other ways to achieve same effect, but theirs usecases are rare.
PS: sorry my indices might not be correct

How use database in Javascript and JSF?

I'm trying to follow the #BalusC advice here.
(I'm writing here now because it's unrelated with previous question).
So I need to get data from my database and show in chart using JavaScript, this is an example.
I'm just doing this sample so I can understand how to show some data from the server side to the client side.
My bean:
#ManagedBean(name="reportc")
#ViewScoped
public class ReportControl implements Serializable {
private static final long serialVersionUID = 3269125738504434502L;
private String[] dataAsJson = {"1.3", "2.1", "1.3", "2.2", "1.4", "2.7", "1.5", "2.1", "1.6", "2.4", "1.9", "2.1"};
public String getDataAsJson() {
Gson gson = new Gson();
return gson.toJson(dataAsJson);
}
}
To help understand the spline-plot-bands.js file.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
...
<h:head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>
<h:outputScript name="javascript/highchart/spline-plot-bands.js" />
</h:head>
<h:body>
<h:outputScript name="javascript/highchart/highcharts.js" />
<h:outputScript name="javascript/highchart/modules/exporting.js" />
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</h:body>
</html>
As you can see in the spline-plot-bands.js file.
All that matters for me is this part (I guess):
series: [{
name: 'Hestavollane',
data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0]
}, {
name: 'Voll',
data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
}]
How could I send something like this from my server side to this javascript ?
I think I'm close to find out how to use gson, javascript with jsf, but I still don't get it how to finish this.
Could someone help me with this ?

The JS expects a double[], but you're feeding a String[]. Fix it accordingly:
private double[] hestavollane = {
4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0
};
private double[] voll = {
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4
};
public String getDataAsJson() {
Map<String, Object> data = new HashMap<String, Object>();
data.put("hestavollane", hestavollane);
data.put("voll", voll);
return new Gson().toJson(data);
}
And edit your spline-plot-bands.js file to use it instead of the hardcoded values:
series: [{
name: 'Hestavollane',
data: data.hestavollane
}, {
name: 'Voll',
data: data.voll
}]

The key part of the linked article that you need is this:
<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>

Categories

Resources