I was wondering how can i create Mashable like velocity graph.
I don't want it to be real actually, I just want to show random positive velocity graph.
How can i create such velocity graph image using PHP or JavaScript ?
I want it to look something like this: http://i.imgur.com/Y7R6JvZ.png
This is achievable using canvas & javascript.
I won't waste time listing relative resources here, simply google "Draw Canvas Graph" or similar.
You will need to store share data, which can be retrieved via social site API's. Facebook, Twitter, Pinterest, Linked In are all easy GET calls, and again a quick google will give you tutorials for that.
In principle though, you have to:
Record share counts over time (PHP + MySQL)
Load a page including this data
Write Javascript to draw a graph based on this data
Related
I'm looking to implement a video editing feature like that of featured here https://clideo.com/video-editor.
I'm planning to use Vue 3 with a Laravel backend, but is there an ideal framework to use for a web application like this, or should I just try to reverse engineer/hack my way to a working implementation?
Sorry if this is the wrong place to ask, I just haven't been able to find an answer.
Thanks
Video editor consist of two important parts
1)A Timeline that represents sequence.
2)A Output window to show output of timeline.
-Clideo uses div and html elements positioning to generate timeline but a better alternative is to use Canvas and draw a timeline on it just like in veed.io
-For video output again you have to use canvas and webGL to draw each and every frame one by one.
you wont be able to edit video on backend and send edited multimedia for each change user makes you need to find a way to do in on client using webcodec.
For the choice of framework if you are having canvas and webGL do all the rendering of timeline and output then it dosent matters you will spend more time with drawing functions.
Almost every video editor has a timeline. But only in some of it (https://wave.video/tools/video-marketing/promo-video-maker) is divided into several ranges. An additional advantage will be the grid on the line. You can also easily manage layers and frames.
I'm using Leaflet library in my ReactJS app and I wonder if there is a simple way to recognize if object clicked by user is a building.
Idea that came up to my mind is to check map colour under clicked position.
Does it make sense?
I appreciate your help.
Colleagues in comments advised to give some use-case:
App I'm working on is meant to mark antique buildings with elevation in bad shape so city architecture management had simpler job of searching for them.
Every user of this App can mark such building. To prevent hooligans from corrupting data with senseless points on map I wanted to validate as a first step if clicked point is a building.
I hope it will clarify problem a little bit.
I wonder if there is a simple way to recognize if object clicked by user is a building.
No.
You basically want to run arbitrary point-in-polygon queries against OSM's building dataset, and I will presume that you don't want to host that dataset yourself.
The simplest way to do this is to perform queries to an Overpass API server, passing a is_in query and filtering by the building tag key. The OSM website's query feature functionality uses such a technique.
With this technique you won't have to worry about hosting the data, just about creating the right Overpass API query. Please bear in mind that the Overpass API servers are run by volunteers and their resources are limited.
The second simplest way would be to download a OSM extract of you area of interest, and run the point-in-polygon queries yourself, by whatever means you like (PostGIS' ST_Intersect, turf.js, etc etc).
If you will be using Leaflet, another approach would be to use vector tiles, and set it up in such a way that the buildings thematic layer is interactive. This will require you to be aware of the limitations of the vector tile servers.
Idea that came up to my mind is to check map colour under clicked position.
That is unreliable. Think about labels on top of buildings, or the colour of the edge of the building area, or buildings that don't render with the standard colour (e.g. places of worship, monuments).
So basically I'm using the Highcharts JavaScript library to render a very simple line graph to my HTML5 page. The chart represents the volume of tweets I've crawled from Twitter.
So my question is for anyone who has a fair idea of what Highcharts is capable of. I know you're able to highlight a section of the chart and have it zoom in. Is it possible to have the chart recognize the start and end time I've highlighted and give it back to me.
I wanna be able to query my database and pull out all the tweets between the two times and render them to the page. Anyone any idea if that's feasible?
Yes it is possible, you can achieve it by catching afterSetExtremes function.
http://jsfiddle.net/JzEnV/
events:{
afterSetExtremes:function(){
alert(this.min);
alert(this.max);
}
}
If you would like to get dates, then you can use dateFormat()
http://api.highcharts.com/highcharts#Highcharts.dateFormat()
I really like the zooming process in Prezi.com flashs app.
I didn't find any documentation on how to implement the prezi app.
Maybe some of you knows how to design or implement the final zoom by trajectory in application.
Finally I want to use that in a website to create a more interactive content prezentation of the company website to the user.
Thanks.
zooming process is a number of parallel motion tweens for x, y and (imho) a custom parameter scale of the presentation, which itself seems to be a kind of resource holder that hides or shows content according to x, y and scale values
I want to create a map dynamically and display it on the website. You can call it to be more of a graph than a map. Here I take the source and destination from the database. There can be many sources to a destination or many destinations for a source or both. Also there can be many other locations directed to/from source/destination. Source and Destination will always be there. But other locations are optional. So for example the route could be
L1 --> L2 --> Source --> Destination --> L3 --> L4.
where L1-L4 are locations (optional)
I want to depict this diagrammatically on a website. The user should be able to click on a each location/path (depicted as the arrow line above) and a popup should be opened. In the popup some data editing can take place. Also along the path(arrow line) some data has to be displayed. Basically all HTML,JS functionality should be available for this diagram.
Can someone please suggest me which language I can use for this?
I checked out some of the map APIs. But they expect some kind preloaded image to be present. That is not possible in my case.
The site I'm working on similar to any air fare info site, where we select multi city and get different rates for different airlines. I want to show this graphically with nodes representing locations and lines representing paths and should show rates along paths and stuff like that.
Any pointers will be appreciated.
Thanks
Some of your options are: SVG, HTML Canvas, or HTML+CSS. Given your desire to track events per object, I would rule out HTML Canvas: binding events to objects in a retained drawing system is much easier than manually processing events based on mouse position.
I would recommend using either SVG (if you can limit yourself to browsers that support it) or a drawing API like Raphaël to abstract support over SVG and VML for IE. You will have far more flexibility of drawing and hit detection than using HTML divs plus backgrounds.
Although I haven't used it, Google found the Joint library (that uses Raphaël) for a higher abstraction than the drawing level. Perhaps this meets your needs.
If I understand you correctly, it sounds like the google maps api would work for you:
You can find more info here. here
Additionally, you may find this info useful.