Javascript/CSS: create graph animation based on data changing in time - javascript

Don't ask me why but I made up my mind to create an animation of a graph like the one you see in this video with Javascript
https://www.youtube.com/watch?v=FJi5LcWpznw
My data are similar to
2023-01-01 user1,10 user2,12
2023-01-02 user1,11 user2,12 user3,1
2023-01-03 user1,11 user2,14 user3,12 user4,5
and so on .. day by day
Can you help me to convert my madness into all this?
Thanks in advance

You're going to need more data, otherwise your video is going to only have three states in it...
I'd start by creating a static graphic, using your favorite JavaScript charting library (https://www.chartjs.org/?) I'd store all this data in a day-sorted array. After you get that working, then I'd come up with a mapping between days and seconds. For a very limited number of days, I'd probably do something like 1 day = 3 seconds. Then, I'd create an event loop, and every three seconds, pick out the next datapoint from the array, and update the graphics. After that point, you need to record your browser.
You'd better update your question quickly before the stackoverflow admins reject it for one of their many, many, many reasons and edit my response into oblivion.

Related

How to dynamically change a field depending on a unique date formula

I'm working on a work schedule of sorts, a feature that I'm trying to create would be one that can be setup initial and would not need to be touched ever again. However I'm not sure where to even start; I have a weekly schedule with three different fields, a middle field that is unique and requires no attention and a day/night field. My user is able to drag users into these fields and set that they are expected to working during that period. However as my user has different shifts that sometimes overlap I'm looking to color code each of the shifts of which there is a total of five, the shifts go on a pattern of working: 2 nights, than 2 days off, than 3 days working and lastly than 2 days off. What would be the best approach of mapping this as I cannot simply put that Monday nights are color X as the by the time next weeks comes around the shift would be starting on Wednesday, along side this some shifts will be working at the same time so the color coding should not cover the entire day but only a limited number of entries (2). My initial idea was to try using Hashmap or something of the sort but I'm uncertain how I would structure it to achieve what I'm looking for..
Drag and drop experience would be nice but I assume not mandatory, so can try to use standard features. Im not sure which user is using this - the worker doing the shift, or a manager allocating workers to the shifts? If is for a manager - If you created a 'shift' object and had shifts represented as records you'd be able to create list views of those shifts ie. 'next n days','this month' etc. Then you could use bulk action within the list view to assign a user to multiple shift records at a time. Would be reasonably efficient and quick to build. Just a thought... (and I couldnt follow what you meant about color coding sorry.)

API with paginated data, seeking advice

So i'm seeking for a couple of questions to be answered. I am using a api which returns a list of products (15000+) how ever they use pagination so it only returns 20 per page.
I would like to be able to show all of this data on my shop so users can search through it etc... however, issue... it takes A LONG time to loop through it etc etc.
Is there a good method to do this? Shall I just loop through all the data and allow it to be added into an array once loaded? Is there something "special" we can do with the pagination?
I am new to this, and just seeking advice on the above.
Kind Regards,
Josh
There are a few thoughts that strike me straight away so let's cover those first:
From a pure UX perspective, it's very VERY unlikely that any user will ever need or click through 15k+ rows of whatever. So loading them all doesn't serve your user even if you could figure out how to do this in a efficient way.
Instead, look at what serves your users which likely in this case is some sort of filtering or search options. I would look into if your API has any support for things like categories (that should be a set smaller than 1 request maybe) which is much easier to display to get the user to cut down a lot of the data set. Then also look into if they offer some sort of query or search filter, maybe the names of whatever is being displayed. This further lets your users zoom down to a dataset that is manageable (roughly 100 items max). From there, 20 items per page is just 5 pages. Still though, you should only really load 1 page at a time and focus on better ways to offer SORTING, if you can find what the user needs on the first page, you don't need to load those 4 other pages. Hope that gives you some ideas of what to look for inside your API, or what to add if you can add it yourself.
If not, perhaps it would be worth considering loading the data into your own database and set up some background/nightly task that fetches any updates from the API and stores them. Then you build your own API around your own database that has functionality for filtering/searching.
A final option is indeed to simply ask for the first page, and then display that while you wait for the 2nd page to load. But this risks making an awful amount of wasted requests which wastes not only your users bandwidth but also puts pressure on the API for what is likely going to be wasted work. So there are a few other UX ideas around this as well, like infinite scrolling. Load the first 1 or 2 pages then stop, until the users scrolls past the first page and a half, then request page 3 etc. This way you only load pages as the user scrolls but it's a bit more fluid than pagination with numbering. Still, you'd likely want to offer some way to sort this set so that it becomes more likely that they'll find what they need in the first few "pages".

Creating an employee schedule

I need help in how to think about creating a work schedule. Each employee needs x amount of shifts, x amount of weekends, and can't work back to back. There are other rules I would build in, like employee requests, holidays etc
I am thinking of approaching it such that I would create every possible schedule and weigh them based on a set of rules.
However, with 14 shifts and 34 employees, the number of possible schedules for a give 2 month block would be astronomical.
Should I use a specific library for this?
is this something Javascript can handle?
Other Thoughts?
Thanks
Request is waaaay too big, fill in a few variables (ie. amount of shifts/amount of weekends) otherwise you're going to waste so much time going through possibilities (1,391,975,640) that it would be futile. Additionally, you could save time by adding a maximum and minimum shift time, and a maximum and minimum weekend time. Once you fill in those variables, you can use Google Sheets or Excel to create a quick employee schedule. Additionally, adding a quick formula to account for requested time off can be added to a new field.

Highcharts- How to create streaming bar charts

I'm new to Highcharts and I need to create one for reporting purposes. So creating one is simple but seems like the one they asked is not very simple at all. It should be something like a streaming graph where if something comes in it will start plotting until it is done.
So the scenario is like this.
It needs to be a column chart/columnrange type.
The x-axis will be the time. And should be moving from right to left. In 1 second or 2 seconds interval. Doesn't really matter.
So if the data comes in, let's say a call comes in. The time it comes it should start ploting/Drawing the bar until the call is done.
And it should be able to see the stock. Pretty much like the one in here http://www.highcharts.com/stock/demo/ where you can select a range and zoom in to that range.
I hope I'm making my scenario clear enough. Any reply is appreciated.
Best
Because you haven't provided any code to go with, the response here is going to be more of a guidance for you to do further research:
Select chart type to be a column
N/A
Since you're using jquery, if the data is coming in a json format - check out $.getJSON otherwise check out $.ajax or similar functions for you to get the data dynamically. You will then need to go through Series.addPoint()
Was already asked on Stackoverflow
I think this example is pretty much what you wan to achieve. Only change series type to 'column', see: http://www.highcharts.com/studies/live-server.htm

Charting sporadic events over time on Highcharts (Dynamic Precision?)

How would you chart something like pageviews over time using Highcharts?
Given that page views take place at sporadic irregular intervals, how could you chart this as accurately and legibly as possible?
One way is to group pageviews into time intervals (like days), and then sum up all pageviews on any given day.
The obvious issue here is that if you are only looking at data for a few days, the intervals are too large, and the data fits basically into a few buckets (not really showing any trends).
Another solution I thought of is to have a minimum interval (say, 7 steps) and when less than 7 days of data are requested, (say 3) I could divide that time period into 7 intervals.
However this seems like too much fuss, especially on the backend, for the purpose of simply showing data.
Given that the underlying data does not change, only the manner in which it's rendered, I figured there must be a general solution to this problem.
It depends on what you are trying to discover in the data. If you want to compare it with another data set then use the same scheme it does ("pageviews per day" or whatever). If you want to spot trends over time you need to decide on your horizon and use an appropriate time period (so, for example, if you are trying to justify the purchase of a larger server then perhaps quarterly data comparing this year to last would be good). Designing visualizations for datasets is a huge topic.
So, in other words, I think you pretty much answered your own question.
It looks like the answer is forced Data Grouping
http://api.highcharts.com/highstock/#plotOptions.series.dataGrouping
forced: Boolean
When data grouping is forced, it runs no matter how small the
intervals are. This can be handy for example when the sum should be
calculated for values appearing at random times within each hour.
Defaults to false.
I'll try this and see if it works well
This could work for highstock, but it's not part of highcharts...

Categories

Resources