Fastest javascript charting library for really hug

问题:

I need to develop an ASP.NET web application ( not MVC ) which shows charts which are generated using massive data sources (like 1 billion record for a chart).

Charts should have at least these 2 features:

• zoom + pan through zoomed chart
• mouseover displays summary data of points

Needed chart types:

• line chart
• bar/column chart
• pie chart
• area chart (not that necessary)
• bubble chart ( not that necessary )
• and combinations of chart types:
  • column chart + line chart
  • area chart + line chart ( not that necessary )
  • bubble chart + pie chart ( not that necessary )

Supported Browsers:

• Modern versions of Chrome, Firefox, Opera, Safari(not that necessary)
• IE 7+

Possible solutions I have in mind:

• Server-side chart image generation: This solution is good for performance but does not provide enough chart features.
• Javascript-based charts: This solution has so many libraries but most of them does not provide enough performance ( as far as I know from my research ). Things I found:
  • canvasjs
  • dygraphs
  • google charts
  • highcharts
  • amcharts
  • jqchart
  • d3js
• Generate the image on server, manipulate it using javascript: This solution probably will do it but I could not find any library which works like this. I do not know how much time it will cost if we decide to develop this.

The highest priority is the performance of chart-generation and internet-browser. User experience is the key here.

Which direction should I choose?

回答1:

JavaScript-based charts will accommodate your features requirements.

While D3 will make your required chart types and do zoom, pan, and hover effects, it would require significant building time on your part to create all the possible user interactions. For that reason, a “store-bought” option would probably be more cost effective.

But even with a robust option like D3 when rendering such a large dataset, you are certainly going to come across a few issues.

If your goal is to serve an interactive web chart, your first consideration should be where your data is sampled. And you will have to sample: monitors cannot display 1 billion individual data points. Also, transferring 1 billion data points from the server to the client will require a substantial load time for the data transfer.

So where does that leave you? One JavaScript charting library I did not see on your list is ZingChart, which will meet all these requirements. We have worked with similar sized datasets and can certainly make recommendations about sampling. One is simply geared towards performance and the other accuracy.

• Sampling with exact:false would be the fastest option.
• Smart sampling will evaluate the difference in space between nodes. If consecutive nodes are more than x pixels apart the node is shown. This ensures outliers and anomalies in your data are not removed.

To address issues for rendering in the browser, ZingChart offers SVG, HTML5 Canvas, and VML options. There are benefits to both SVG and Canvas, but with datasets of this size Canvas provides several benefits (especially if you need render bar charts with large datasets). The library was built out of frustration working with other products with large data sets, and it is capable of rendering hundreds of thousands of nodes (without sampling) on the client.

ZingChart also provides the interactive functionality to allow end users to navigate your data and make visual queries. The API is incredibly powerful and allows you to control every part of a visualization programmatically or in response to user events.

You might be particularly interested in the Node.js library. This is a server-side image generation library which works from a very similar codebase as ZingChart’s Canvas client-side library. It includes image map functionality with our server-side build which provides a certain amount of interactivity. Plus, there is the benefit of providing identical charts on the server and on the client. This allows for some interesting UX opportunities when working with such large datasets.

I’m on the ZingChart team, so please feel free to reach out if you have any questions about how our answer relates to the possible solutions you are weighing right now.

回答2:

I analyzed all the answers but did not find what I needed, and decided to use dygraphs.

Dygraphs provides enough performance and ui-specific features for free. Does not support pie-charts but other chart types are supported ( or possible to be supported using plotter-plugin ).

回答3:

• Three.js is a lightweight javascript library to create 3D visualisations (using WebGL, SVG, Canvas or another renderer).
• Famo.us is a javascript rendering engine to create web-apps with 3D user interfaces that promises to run smooth (60FPS) on mobile devices.

Famo.us claims to solve the HTML5 performance issue by avoiding DOM-layout and repaints, which are very expensive computations. Instead, Famo.us keeps a flat DOM and uses CSS3 transforms for all layout and positioning.

回答4:

My suggestion would be jqchart or d3js. The charting libraries which you have mentioned are popular only. Before choosing a library, kindly check with following criteria

• Browser Support (IE8+)
• Mobile device support
• Image conversion
• Clear documentation of product (Most important)
• Support availability for library
• library supports customization in styles or functionalities

Choose based on your needs.

I have attempted my trying with highcharts, jqchart, jqplot, amchart, d3js previously.