Pubnub EON chart rendering multiple data in the chart - pubnub

I am following the follwoing example to publish my data using pubnub and eon charts. When I publish just one data stream i.e 'checkpointsize' the chart renders fine but the minute I enter data2 i.e 'checkpointlength' it gives me error
Uncaught Error: Source data is missing a component at (1,1)!
I can see the data in pubnub console, means that I am getting a data stream but the it cannot be rendered into the chart.
var pubnub = PUBNUB({
subscribe_key : 'YOUR_SUBSCRIBE_KEY_HERE'
});
eon.chart({
pubnub : pubnub,
history : false,
channel : 'orbit_channel',
flow : true,
generate : {
bindto : '#chart',
data : {
x : 'x',
labels : true
},
axis : {
x : {
type : 'timeseries',
tick : {
format : '%H:%M:%S'
},
zoom: {
enabled: true
}
}
}
},
transform : function(m) {
return { columns : [
['x', new Date().getTime()],
['Checkpoint Size', m.checkpointsize],
['Checkpoint length', m.checkpointlength]
] };
}
});
here is the pubnub console

Combine Two Data Streams into One Chart with PubNub Eon
Looks like you are trying to plot two vectors on the same graph. This is possible for you to do by transmitting the values together at the same time in the same published message object. I think you are publishing twice in your example. Your publish message needs to contain both data points. Here is an example
pubnub.publish({
"checkpointsize" : 75.0,
"checkpointlength" : 5000.0
})

Related

Design DynamoDB for Large data using array. Over 400k

I'm worked with node.js and for record event-time and event-data, I want to use AWS DynamoDB Table.
single data and one-key-data schema sample like under.
var want_to_update_data = [ // contain json more or same than 1
{ "event-time" : "2021-01-02 10:11:12", "event-data" : 19 },
...
];
var saved_data = { // DynamoDB Saved Data Sample with Key "ABCD"
"Key" : "ABCD",
"events" : [
...
{ "event-time" : "2020-12-28 09:30:17", "event-data" : 35 },
{ "event-time" : "2021-01-01 19:11:12", "event-data" : 16 },
{ "event-time" : "2021-01-02 10:11:12", "event-data" : 19 },
...
]
}
Upper data is only for sample. json contains more key-values.
For update single json, my server code likes under.
app.get('/insert', req, res) {
var update_key = req.body.update_key; // "ABCD"
var want_to_update_data = req.body.update_data; // [ {} ]
var updateExpression = 'SET events = list_append(events, :dl)'; // dl means data-list
var expressionAttributeValues = {':dl' : want_to_update_data }; // dl means data-list
AWS.config.update({
region: "region",
endpoint: "endpoint",
accessKeyId: "access_key",
secretAccessKey: "secret_key",
});
var params = {
TableName: "TableName",
Key: update_key,
UpdateExpression: updateExpression,
ExpressionAttributeValues: expressionAttributeValues,
ReturnValues: "UPDATED_NEW"
});
var dynamodbClient = new AWS.DynamoDB.DocumentClient();
dynamodbClient.update(params, function(err, data) {
if(err) { /* handle error */ }
else { /* handle after update complete */ }
});
});
Simply, It works, but AWS DynamoDB can't change over 4kb at once.
So, if array data is bigger than 4k, list_append not worked with ValidationException: Item size to update has exceeded the maximum allowed size error message.
I want to remain all events and want to sort event-time keys.
How can I change my DynamoDB schema?
Under code is just my guess.
Is it possible?
{
"Key" : "ABCD",
/*
"events" : [
...
{ "event-time" : "2020-12-28 09:30:17", "event-data" : 35 },
{ "event-time" : "2021-01-01 19:11:12", "event-data" : 16 },
{ "event-time" : "2021-01-02 10:11:12", "event-data" : 19 },
...
]
*/
"events" : { // is it possible events['some-date'] could be sort-key?
...
"2020-12-28 09:30:17" : 35,
"2021-01-01 19:11:12" : 16,
"2021-01-02 10:11:12" : 19,
...
}
}
/*
var updateExpression = 'SET events = list_append(events, :dl)'; // dl means data-list
var expressionAttributeValues = {':dl' : want_to_update_data }; // dl means data-list
*/
// under 2 line is just for sample. json key is not fixed
var event_time = '2021-01-02 10:11:12';
var single_json = want_to_update_data[event_time];
// if number-start key is not allow(event_time), prefix append could be like "D_2021~~"
var updateExpression = `SET events.${event_time} = :dl`;
var expressionAttributeValues = {':dl' : single_json }; // single json
Thank you for read my question.
I want to create new table for save my events json datas.
(not S3. using DynamoDB)
DynamoDB has an item size limit of 400kb, including the attribute names.
According to the docs
Number of Values in List, Map, or Set
There is no limit on the number of values in a List, a Map, or a Set, as long as the item containing the values fits within the 400 KB item size limit.
It sounds like your list of 4k events, plus whatever else you're saving in the item, exceeds this 400kb limit. You can check out this nifty calculator to get an idea of the size of your item.
Instead of storing events in a list item, you might want to store them in an item collection.
For example, instead of this:
You could store event data like this
If you need to fetch events by time, you might consider making the event_time your sort key.
You cannot store infinitely large amounts of data in a DynamoDB on single Key.
Just like what you wrote, periodically back up to S3.
In my case, I use redis-cache for check each array size and with node-schedule, back-up large datas to S3.

how to initialize states of array with unknown length in reactJS?

I faced a weird problem, I found the answer, however I want to know the reason behind the scene.
I have a react component which sends request toward server and after getting the result back, set it to the states of the component.
class Featured extends React.Component{
constructor(props){
super(props);
this.state = {
data : ['', ''],
error: null,
}
}
componentDidMount(){
axios.get('/api/featured')
.then(res=>{
let dataClone = [2];
console.log('before');
res.data.map((dt,i)=>{
dataClone[i] = dt;
});
this.setState({
data : dataClone
})
})
.catch(err=>{this.setState({error: err}); errorHandling(err)});
}
render(){
if(!this.state.error){
return(
<div>data: {this.state.data[1].title}</div>
)
}
else {
return (<div className='text-center text-warning'>There is some error loading the featured</div>)
}
}
}
here's the data which sent back :
{
title : 'how to be a good programmer?',
subtitle: 'I was wondering how can i be a good programer after 10 years experience',
author : 'hamid mortazavi',
date : new Date().toLocaleDateString(),
},
{
title : 'Why are you alone?',
subtitle: 'this is going to be a long story from here, but bear with me...',
author : 'shahin ghasemi',
date : new Date().toLocaleDateString(),
}
This works correctly, however if I change the way I've done initialization for data state, it does not work.
for example this three ways does not work:
this.state = {
//1:
data : new Array(2),
//2:
data : [],
//3:
data : [2]
}
none of these works, and when I want to show this.state.data[1].title for example, it does not work, and throw me Uncaught TypeError: Cannot read property 'title' of undefined. What surprises me is there is no problem displaying this.state.data[0].title and it seems the problem is the index.
As I said now I found the solution but it takes me 1 hour to solve that.
I just want to know the reason and why ?
This is not a problem of React but a problem of array items being undefined.
In your first example where you don't see the error, you actually defined the value of the 2 items in the state array by doing this
data : ['', ''],
This way, the value of data[0] and data[1] always exist and unless set by data response from server, will always have at least a value of an empty string.
In your second example, your data object is just a blank array of either no items ([]), 1 item ([2]), or 2 items (new Array(2)). Even with new Array(2), your data object items doesn't have a value defined. Try running this in your console:
x = new Array(2)
x[0] // will return undefined
x[1] // will return undefined
In the case that is not working you are setting the initial state.data to an empty array ( or in the last case to an array with one number 2 in it). When you call this.state.data[1].title you are trying to access a property on undefined, which give` you a null point error.
In the case that is working for you, you are trying access the property title on an empty string, which will be undefined, but it doesn't error because the thing you're trying to find the title of (the empty string) is not undefined.

paginating using angularfire2

suppose I have a data structure in firebase real time database like
{ "donors" :
"uid1" : { "name" : "x", "bloodGroup" : "A+", "location" : "some Place"},
"uid2" : { "name" : "y", "bloodGroup" : "A-", "location" : "some place"},
...
...
}
now if I have millions of donor records like this. how could I filter them based on bloodGroup location and fetching say 100 records from server at a time using angularfire2.
I have found this page which was really helpful to me when using queries to query my firebase data:
https://howtofirebase.com/collection-queries-with-firebase-b95a0193745d
A very simple example would be along the lines of:
this.donorsData = af.database.list('/donors', {
query: {
orderByChild: 'bloodGroup',
equalTo: 'A+',
}
});
Not entirely sure how to fetch 100 records, then another 100, I am using datatables in my app, which fetches all my data and using the datatables for pagination.

playlistItems.insert failing in Node.js googleapi youtube

I am uploading a video to Youtube and then attempting to add it to a playlist. The playlist insert is failing in a weird way.
Here is my code:
var options = {
'part' : 'snippet',
'snippet' : {
'playlistId' : playlistId,
'resourceId' : {
'kind' : 'youtube#video',
'videoId' : videoId
}
},
status : {
privacyStatus : 'unlisted'
}
};
console.log('options : ' + JSON.stringify(options));
youtube.playlistItems.insert(options, function(listErr, listResponse){
console.log(JSON.stringify(listErr));
console.log(JSON.stringify(listResponse));
});
I always get the exact same response:
{"errors":[{"domain":"youtube.playlistItem","reason":"playlistIdRequired","message":"Playlist id not specified."}],"code":400,"message":"Playlist id not specified."}
Anyone have any idea what I'm doing wrong? Any help will be much appreciated. I'm using googleapi Node.js sdk.
I was having a similar issue and inspected the source code and realised that the body of an API call should be under options.resource property. So your options object should look like the following:
var options = {
"part" : "snippet",
"resource" : {
"snippet" : {
"playlistId" : playlistId,
"resourceId" : {
"kind" : "youtube#video",
"videoId" : videoId
}
}
}
}
Also note that I've changed the object to use double-quotation marks, as options.resource is expected to be valid JSON. I've also removed the status property as it is not listed as a parameter on the API reference page - https://developers.google.com/youtube/v3/docs/playlistItems/insert

Backbone fetch parent model with nested collection

My aplication has this structure:
Project (model)
-> tracks (collection)
-> track (model)
-> clips (collection)
clip (model)
I need to fetch only parent project model. It will cause change of all data structure. I get JSON
{ "_id" : "123",
"name" : "name",
"tracks" : [ { "clips" : [ { "audioName" : "audio name",
"audioPath" : "audio/path.wav",
"duration" : 123,
"id" : "track0-1"
} ],
"mute" : false,
"name" : "track0",
"selected" : false,
"volume" : 100
},
{ "clips" : [ ],
"mute" : false,
"name" : "track1",
"selected" : false,
"volume" : 100
}
]
}
I have parse method:
parse: function (data) {
this.get('tracks').reset(data.tracks);
delete data.tracks;
return data;
}
I am not able to parse clips. In model track, attribute clips has behavior like javascript array instead of backbone model.
How can I parse clips?
parse is only used to parse responses from the server. So you won't be able to use it to create your clips collection.
So you may want to change the way you do that (maybe have a look at Backbone-relational, I think it deals with this kind of stuff). Here's a possible solution (to be put in your model):
initialize: function() {
this.listenTo(this, 'change:clips', this.onChangeClips);
// the rest of your stuff
},
onChangeClips: function() {
var clips = this.get('clips');
if(Object.prototype.toString.call(clips) === '[object Array]')
this.set('clips', new Clips(clips), {silent: true});
}
Source to test if array: Check if object is array?
Note: this will remove any reference to an existing collection (which you seem to have), so you may want to keep a reference to your collection in your model (like in a _clips attribute) to reset it with the new clips array.

Resources