I want to add new data to an existing graph. Meaning that I want to merge the existing rendered data points with new ones to render the old and the new data points together. I'm trying to use Plotly.newPlot to render new data like this:
const TESTER = document.getDocumentById('tester');
const dataPoints = {
x: [1, 2, 3],
y: [1, 2, 3],
text: ['1 text', '2 text', '3 text '],
size: [1, 2, 3],
color: [1, 2, 3]
};
const layout = {
margin: {
t: 0
},
hovermode: 'closest'
};
const dataToRender = {
x: [dataPoints.x],
y: [dataPoints.y],
text: [dataPoints.text],
mode: 'markers',
marker: {
size: dataPoints.size,
color: dataPoints.color,
sizemode: 'area',
showscale: true,
colorscale: 'Portland',
colorbar: {
xanchor: 'right',
len: 0.5,
title: 'km'
}
}
};
Plotly.newPlot(TESTER, dataToRender, layout);
But I always end up receiving a plotly-latest.min.js:32 Uncaught TypeError: Cannot read property 'style' of undefined. What am I doing wrong?
Thanks in advance
The plotly format is sometimes a bit tricky. You need to change the data structure as follows:
const dataToRender = [{
x: dataPoints.x,
y: dataPoints.y,
text: dataPoints.text,
mode: 'markers',
marker: {
size: dataPoints.size,
color: dataPoints.color,
sizemode: 'area',
showscale: true,
colorscale: 'Portland',
colorbar: {
xanchor: 'right',
len: 0.5,
title: 'km'
}
}
}];
i.e. all data goes in an array which contains the data itself and the metainformation, layout, etc.
Add square brackets around your dataToRender
Add curly brackets around {x ...marker}
Remove the square brackets before dataPoints.x, y and text
Now let's get to the fun of adding data. We first make a variable out of your const dataPoints to store the initial data set (I modified the size a little bit). In the function tester() we randomly add one point and update/redraw the graph.
<script>
var dataPoints = {
x: [1, 2, 3],
y: [1, 2, 3],
text: ['1 text', '2 text', '3 text '],
size: [50, 250, 500],
color: [1, 2, 3]
}
var t = setInterval(tester, 1000);
function tester() {
const TESTER = document.getElementById('tester');
dataPoints.x.push(Math.random() * 3);
dataPoints.y.push(Math.random() * 3);
dataPoints.size.push(Math.random() * 500);
dataPoints.color.push(1 + Math.random() * 2);
const layout = {
margin: {
t: 0
},
hovermode: 'closest'
};
const dataToRender = [{
x: dataPoints.x,
y: dataPoints.y,
text: dataPoints.text,
mode: 'markers',
marker: {
color: dataPoints.color,
size: dataPoints.size,
sizemode: 'area',
showscale: true,
colorscale: 'Portland',
colorbar: {
xanchor: 'right',
len: 0.5,
title: 'km'
}
}
}];
Plotly.newPlot(TESTER, dataToRender, layout);
}
</script>
Here is the working JSfiddle
Related
Q : i wanted to manage images dynamically using pdfkit in nodejs. and also i want to addPage if images not fitted in current page.
Code :
const doc = new PDFDocument({
size: 'letter'
});
function photographs(doc) {
arr = [1, 2, 3, 4, 5, 6, 7]
doc
.fillColor('#1c5695')
.fontSize(10)
.font('Helvetica-Bold')
.text('PHOTOGRAPHS', 10, doc.y, {
width: 300,
align: 'left'
})
arr.forEach((element, i) => {
doc.image('images/pdflogo.png', {
align: 'center',
fit: [100, 100]
})
});
}
so my question is how to manage x and y position of image , so it'll manage space dynamically.
e.g first 6 img set into 1st row then rest will set on 2nd row and so on..
I have seen animated enemies in simple games that will chase you, attack you, or perform a sort of task.
In phaser 3, how do I give a sprite multiple tasks using tweens?
For now, I have only a tween that performs a really simple task
gameState.enemy.move = this.tweens.add({
targets: gameState.enemy,
x: 600,
ease: 'Linear',
duration: 1800,
repeat: -1,
yoyo: true
});
Also, what exactly is a tween? Can a sprite have multiple tweens? Can a tween help perform multiple tasks?
I found this website but did now understand..
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/tween/
A Tween is just a "function", that changes properties (only numeric) values of an object (or multiple objects), from a start value to an end value, over a specific duration. (the object doesn't even need to be a phaser sprite or image or ..., as shown in the example below)
And Yes, you can change multiple values in one tween (check example below).
Here a very simple example, with a basic Javascript object:
var config = {
type: Phaser.AUTO,
width: 400,
height: 200,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: {
create
}
};
var game = new Phaser.Game(config);
var simpleObject = {value: -1, value2: -2}
function create ()
{
console.info('Initial value', JSON.stringify(simpleObject))
this.tweens.add({
targets: simpleObject,
value: {from:0, to: 100},
value2: {from: 10, to: 200},
duration: 3000,
delay: 500,
onUpdate: _=> console.info('On Update', JSON.stringify(simpleObject)),
onComplete: _=> console.info('After Tween', JSON.stringify(simpleObject))
});
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I want to parse an array of objects into xlsx-populate so it can give me the excel file.
const xlsxPopulate = require('xlsx-populate');
const worksheet = await xlsxPopulate.fromBlankAsync();
const sheet1 = worksheet.sheet('Sheet1');
sheet1.cell('A1').value(newArray);
await worksheet.toFileAsync('./myFileName.xlsx');
It works for Arrays or Arrays([[..][..]]) using range or using single cell as well.
From the doc:
xlsx-populate also supports ranges of cells to allow
parsing/manipulation of multiple cells at once.
const r = workbook.sheet(0).range("A1:C3");
// Set all cell values to the same value:
r.value(5);
// Set the values using a 2D array:
r.value([
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]);
// Set the values using a callback function:
r.value((cell, ri, ci, range) => Math.random());
Alternatively, you can set the values in a range with only the
top-left cell in the range:
workbook.sheet(0).cell("A1").value([
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]);
So all you need to do is converting objects to CSV maybe for an example JS object:
Modified(only removed the .joins) From this answer:
const json = [
{
h1:1,
h2:2
},
{
h1:3,
h2:4
}
];
var fields = Object.keys(json[0])
var replacer = function(key, value) { return value === null ? '' : value }
var csv = json.map(function(row){
return fields.map(function(fieldName){
return JSON.stringify(row[fieldName], replacer)
})
})
csv.unshift(fields) // add header column
console.log(csv) //[ [ 'h1', 'h2' ], [ '1', '2' ], [ '3', '4' ] ]
I am using chart.js with Angular 7. I am providing array and rendering the chart.
Initialization.
import * as JSC from 'jscharting';
this.phLiveChart = JSC.chart('phChart', {
debug: false,
type: 'step',
chartArea_boxVisible: false,
legend_visible: false,
defaultTooltip_enabled: false,
xAxis: {
scale: {
range: { min: 0, max: 100, padding: 0.1 }
}
},
defaultSeries: {
opacity: 0.7
},
defaultPoint_label_text: '%yValue',
series: [{
name: 'pH',
points: []
}]
});
When data come from server.
for (let i = 0; i < records.length; i++) {
if (this.device.sensors.ph == true) {
records[i].ph = Number(records[i].ph.toFixed(3));
this.phLiveChart.series(0).points.add([new Date(records[i].recorded_at), records[i].ph]);
}
}
Problem:
Sometimes charts shows values with more precision which I am providing it. In console log it shows correct precission but in chart its showing wrong.
It is easy to control the precision in JSCharting by specifying a format string with option such as:
yAxis_formatString:'n3'
This will make all y axis related values be numbers with 3 decimal places.
Alternatively, you can apply the formatting for the label alone with
defaultPoint_label_text: '{%yValue:n3}'
Hope that helps.
I am using the column charts for my project. I have written a custom function that colors each bar of the chart based upon its y value. This works fine when I initialize the chart. As I hover over the chart, the color of the bar goes back to the default and my custom colors never return.
I have tries disabling on hover but that doesn't seem to work. I don't want the color to change even when hovered over the bar. Any suggestions?
You are looking for this option:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
Fiddle here.
EDITS
Instead of modifying the SVG directly to set your colors, do it within the api:
var max = 200;
var seriesData = $.map([107, 31, 635, 203, 2],function(datum, i){
return {
color: datum > max ? 'red' : '#2f7ed8',
y: datum
};
});
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: seriesData
}]
});
New fiddle.
You are updating color in a wrong way, use point.update() instead: http://jsfiddle.net/CaPG9/8/
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
},function(chart){
var max = 200;
$.each(chart.series[0].data,function(i,data){
if(data.y > max)
data.update({
color:'red'
});
});
});