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...
Related
I'm currently working on a project using sigma.js where I need to show a large number of nodes and edges (~10000 to ~100000 of each one) stored in a JSON file. But the library is getting laggy when I load the JSON, on each refresh and also when it shows me the graph it doesn't space the nodes. I was wondering if someone knows how to represent this kind of dataset fine.
To be honest i am on the same issue if it can helps, i think the book example of Gephi.org tutorial is still the best.
For the moment i am on including sigmaJS from cloudflare but i don't have any proposition for this.
Something like you replace the library with a link to cloudflare like the one used for phaser.io explained in it git repository or even tweenJS use the same way (it's the way of web devs see #indiedev #indiegamedev on twitter, it helps)
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
http://jsfiddle.net/thefailtheory/L45ue3er/
The threejs random particle visualization performs really well with 20K points.
https://threejs.org/examples/#webgl_points_random
Will be a bit of work to repurpose for network display but the upside is you can leverage GPU for rendering.
I am using d3 to make some graphs but the constraint is the number of data. To be more specific, I have an average number of points of 500,000 on a graph.
It could go from 100,000 to 1,000,000 points on the graph.
Whenever there are 'zoom' possibilities or some other trick (that I would be pleased if someone would explain to me), I wonder if d3 (or any other lib) will really handle a 500,000 points graph.
Morever, I suppose it will depend on the client's computer, which mean they could have the latest i7 proc or a old intel pentium. For this last case, how would the browser react? I suppose it's going so slow that it will just crash?
Well, if people can give some feedback/advice please?
(Currently trying to display the data differently but my brain just imploded.)
I do not have numbers or trials but I can say that I have seen d3 go slow after certain data sizes especially for certain types of graphs. 500.000 seems to be quite huge in terms of data points so if you have no way to reduce that number by aggregation (such as representing 10 day data as 1 day) you might be right about worrying.
As in all performance related questions, the best way to know is to test it, so I can advice you to test it and see if it fits your requirements. If it does not you might want to try some of the non-free libraries such as HighCharts. Another free library which satisfies me with its performance is Chart.js (although it only has 6 charts supported).
I don't think that using d3 for representing a massive amounts of data is the right choice due to performance:
Vector graphics javascript library like d3 are quite heavy(for the
client) to run.
Complex visualization logic can easily hang the browser for multiple
seconds.
Large data manipulation using DOM could be slow.
Try something like Graphviz or Gephi that maybe could be more suitable for your requests.
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.
Could you please recommend an interactive charting library that would have ajax scroll/zoom possibility (or at least events tied to x-axis scale) and, optionally, financial analysis features, like SMA/EMA trends or polynomial approximation (since performing these tasks on server-side is nothing but a waste of resources).
I have to display a large set of data (statistical info being collected every 5 minutes for couple of years) and wouldn't like to re-invent the wheel, but half day of browsing didn't reveal anything promising.
Zing Chart: http://www.zingchart.com/
You might take a look at http://dygraphs.com - Very powerful do display large sets of data. Further very interesting is also: http://d3js.org/
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