easy visualization of usage statistics (web app) - javascript

I have some usage queries for my web app's database, the results of which I want to display graphically. Is there an easy-to-use API that exists for this purpose?
I want to show things like average query-time per user (a small user-base), average query time per day, and things like that. I think it would be cool to show these on a two-axis graph.
I am displaying this data on my site, so a jQuery/Javascript/HTML solution for rendering information into graphs would be ideal.

FusionCharts has easy to use graphs - nice xml interface - but not free.
edit:
this is a good link for several options:

The Google Chart API can be handy for this kind of thing. If you want your own hosted solution, High Charts is pretty nice.

There are tons of good javascript/jquery charting controls here:
https://stackoverflow.com/search?q=javascript+charting+library

Related

which javascript chart library should use for interactive chart

I know this question has been asked extensively,so now I confused between options. I want to create application which use populate charts on browser. chart should be interactive and it's conventional chart (pie,bar etc). I liked to go to for D3 but it seems I may fall short on time basis to learn that. so I checked on other libraries like google chart,DC,morris,C3,nvd3,ember chart where DC,C3,nvd3 are create on top of D3. google chart may be restricted due to security reasons. so which library should I prefer? should I go for google one if no security measures are there or any alternative are there?please help me out because as I am digging more,more I am getting confused and I am running out of time to create PoCs for this libraries
I would suggest AmChart. I has lot of examples and good documentation. Additionally you can create interactive maps. And you can create chart easily using a chat creating tool. Which is totally cool.
There are really a lot of chart library it's really hard to pick one. And as a beginner i wanted to just make a working chart app not to go deeper so i picked highcharts, it was very easy to understand for me i hope it works for you too.
https://www.highcharts.com/
this is my demo project if it helps, i wanted a dynamic chart too:
https://github.com/Resoguy/atterbergLimitsApp,
http://madrhino.gq/atterbergLimitsApp/
Try to explore this list: https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks
If your project is non-profit, I'd suggest AnyChart because then you'll be able to use it for free. It has a lot of chart types, ways to work with data, customization options, and ready-to-use samples, as well as comprehensive documentation and API reference.
For one of my project I use chart.js. I think is good is easy and is have also good documentation

how much data can charts js handle

For my application, I am making a get request of thousands of data points.
When I use charts js to display the data, it takes a long time to render, and I experience lag. I also noticed that the x-axis labels for each data point don't appear properly, so they had to be omitted
I like the sleek design and ui of the graphs, but cannot get it to work well for my use case. Is charts js not meant to be used with large data sets? Is there another library like charts js that can handle large data sets? While also being free?
if you want to handle big data you should use Highcharts
it easy can handle some million data without a big delay
Another option to consider is ZingChart. It is free as a branded version, but renders large amounts of data quickly while still maintaining flexibility in customization. If you are looking for a sleek design and UI, ZingChart allows the user to change just about every size, shape, and color to match your taste.
Full disclosure, I am on the ZingChart team. However, we developed a speed test tool that I think you will find helpful in testing your number of data points, regardless of which library you end up selecting. Note that some of these libraries will use up all your browser memory, so proceed with caution in some cases.
I had the same problem, Charts js seems to be unable to handle large data sets. The best alternative I've found is https://github.com/danvk/dygraphs . Also you could try http://canvasjs.com/ although it is comercial.
Have a look at LightningChart JS... It is made with WebGL. It can render
1 million data points in ~80 ms in line chart
10 million data points in ~800 ms
that is for static data. Those I got from my PC (AMD Ryzen, NVidia GTX1060)
But for scrolling streaming data, the performance is yet more impressive. Dozens of millions of points, with some configurations with Firefox browser, over 100 million points.
There is a chart performance tester application
I work with the team making this chart...

Excel pivotcharts to webpage

I have few excel pivot bar charts and trend analysis graphs.
Is there a way to display the excel charts on a webpage, without losing the interaction capabilities?
So, from the excel users can filer,dig deeper etc.
Can i do the same using some other technologies?
Any technology stack is welcome, open source more so.
I am trying out Kibana right now, but doesn't seem to have all the capabilities as excel does.
[Update] I tried out Google charts, but that sends data to Google server, which cannot be allowed.
I don't like to post an answer to my own question, But http://www.highcharts.com/ is my favorite now. Very easy to use charts and quite zingy.
Minor point : it's not free for commercial usage, so we will have to get a license for it.

Creating graphs in browser with web sockets

I'm trying to find examples or tools that can create a bar graph in a web browser. I'll be sending the data from the server via a web socket and as the data is received I want the 'height' of each bar to change, reflecting the data received.
So the user can see the graph changing as data is received to.
I've seen a number of examples, but I can't see one that will do the above. Something like D3 looks really good but seems to have a steep learning curve and there seem to be quite a few out there it's getting quite confusing.
I'm looking for something simple and quick to do.
Thanks
What you really need to do is find a simple charting library which supports some form of redraw or a way of binding a data model and detecting changes to that model. The common steps are:
Create chart object with initial set of data
Draw initial chart
Get update over WebSocket connection
Update data set
Redraw chart
The complexity tends to come in with the libraries as the general process is pretty simple.
Some examples
A realtime charting example which just displays votes and updates in realtime can be found via .net magazine tutorial on Code a real-time survey with HTML5 WebSockets. It uses Pusher, who I work for.
There's also an example that uses DJ, Python, Pusher and the Twitter streaming API here:
http://bieber.nixonmcinnes.co.uk/
The code can be found here:
https://github.com/nixmc/pusher-d3-demo
Blog post here:
http://www.nixonmcinnes.co.uk/2012/04/20/what-can-we-learn-from-the-real-time-web-and-justin-bieber/
The simplest example
There's also a video of using Pusher with SmoothieCharts here:
http://www.youtube.com/watch?v=VLTsT30TZYw
You might want to look at d3.js for the client-side drawing of the "live" chart. It works really well, and doing things like live bar (or other type) charts is really easy, with syntax similar to JQuery. As for getting the data over the WebSocket, the various websocket packages (full disclosure--I work for Kaazing, that pioneered WebSockets) can pretty much all do this.
Have a look at XSockets.NET, there is an Nuget-Package available for setting up a WebSockets/Realtime service, the JavaScript API is easy to get started with. You can also use the hosted version , where you run JavaScript "only" , More info regarding XSockets.NET will be found on http://xsockets.net
The hosted service on http://live.xsockets.net for "javascript" version, A playground for JavaScript developers found on http://xfiddle.net/
Regarding Graph's, there is an example on jsfiddle, it contains an Wijmo chart (bar), that reacts on user input's in realtime. There is an link to that example in xfiddle.net
For new visitors to this old question, the following is currently one of the simplest and most straightforward examples of websocket use to change a plot in real-time (implemented using google charts paired with either python or perl):
https://github.com/albertobeta/UberSimpleWebsockets

Graphing on Rails 3 + dygraphs

I have a very large data set that I'd like to craft into a scaling, zoomable, panning graph that goes back over the course of a decade of data. It appears that the best solution for the job is dygraphs vs other options.
I'm not opposed to other options if any meet the requirements of very high interactivity, so if'n you got someth'n else, please share...
Notwithstanding, I have not found a solid example of using dygraphs with Rails 3 and would really appreciate seeing an example of how to tie this into a dataset very quickly or a link to an example.
Initially I just need to throw all of the content out into the graph to see how it works out and for some analysis, so nothing super fancy's needed.
**EDIT: Just found Highstock. Seems to be a perfect match. In that light I'd like to modify my request to perhaps some examples of utilizing Highstock in this context.
I can't point to any tutorials or lessons. I actually had this exact same problem a while ago, trying to do the exact same thing. My answer is that you just have to generate the HTML/dygraphs functions to plot your data.
In case you are still trying to figure this out, I have created rails app that will interactively let the user choose and plot data from any basic database schema, any database. I'm a total RoR noob, but it works pretty well and is made to be generic and dynamic, as well as add checkboxes and linear regressions to each plot. Its not finished, or fully documented yet but you may find it helpful.
I think you can access it this way:
git clone https://bitbucket.org/zachd1_618/rails-stocks.git
or just get in contact with me if you are for some reason really interested.
I've tested it on multiple databases and different schemas, and it easily handles 50k+ points across multiple graphs.
I see that Highstock is nice too, but you shouldn't have any problems in adapting Dygraphs to what you describe. I have not used it with Rails, but have good experiences with it on Django. The approach would be quite similar: Either you serve the dataset in a separate request, or you generate the dataset within the template layer. The latter is probably the slowest.

Categories