`
yushine
  • 浏览: 200712 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Highchart Vs Flot.js – Comparing JavaScript Graphing Engines

 
阅读更多

In previous projects at MailChannels I have used Flot.js for graphing. There were many reasons I chose this originally. The graphs are interactive and can be manipulated within the browser without having to communicate back to the server. You can retrieve additional data from the server which enables you to be able to scan left and right on graph. You can animate transitions, zoom in and out, get the values at precise points on the graph and select an area data. When I found Flot.js I was mainly looking for something that was not ugly. I was using Perl on the server side, and Perl has a history of having ugly graphing solutions. I’ve since found some alternatives on the Perl side, but for me Flot.js was the new hotness at that time. You can read my presentation on Graphs In Perl and Flot.js over at slideshare.

So Flot.js is pretty cool, but what are it’s limitations? The number one limitation is the ability to render a graph anywhere other than within the browser. Since JavaScript is creating the graph it’s hard to automate emailing a static PNG/JPG/GIF image of the graph from the server without firing up a browser and then taking a snapshot.

Enter Highchart.

Example of Highchart graphs

Example of Highchart graphs

I discovered Highchart recently while working with netSIGN . We were looking at graphing options in Ruby On Rails and came across Highchart. It’s much like Flot.js, but it is a commercial venture. Flot.js is free; released under the MIT license and is sponsored by IOLA in Denmark. Developers on a shoe-string are unlikely to look at Highchart, just because of price tag, but for most projects I think the price it reasonable. What do you get for your money?

Documentation
Highchart feels more polished than Flot.js and many of the standard features, simply work out of the box. Flots basic chart is very basic and you have to pass all the options to get something that starts to look nice. Maybe you prefer that though. Finding those options is so much nicer with Highcharts’ Options Reference . It’s easy to drill down and see exactly how the options piece together through the hierarchical menu. I do not want to knock Flot.js, since it does have documentation, but it is written more like a novel than the reference document and referring to it is time consuming.

Rendering Offline
“Wow!”, was all I could think when I saw that Highchart can actually render the graphs on the server as PNG files. Ok, it’s not a perfect solution and still requires a web-browser, but as long the user is viewing the graph, a copy of the graph can be sent to the server for generation as a PNG or other file format.

How does it do it? The JavaScript in the browser generates SVG, which the browser can render visually. Highchart simply passes that generated SVG back, from the browser, to the server. The server then takes the SVG file and passes it to SVG Rasterizer , which is an Apache Project. It’s a Java program that can be called to follows

java -jar batik-rasterizer.jar graph.svg

Limitations
The main limitation with both Flot.js and Highchart is that of generating offline reports. Even though Highchart gets further down the road, it cannot be done without first rendering the graph in the browser. I have not investigated, but I have a feeling that you could do this if you have a server that can run JavaScript code , such as node.js .

Conclusion
Yes, there is a cost, but I think it’s worth going with Highchart. Flot.js has not evolved much in the time I’ve known it and I think Highchart is a more mature product and is quicker to get up and running with. If you are a commercial venture (Highchart is free for non-commercial) and you do not want to spend a penny then Flot.js is still a great solution and I would not dissuade anyone from using it.

 

from: http://www.bigfastblog.com/highchart-vs-flot-js-comparing-javascript-graphing-engines

分享到:
评论

相关推荐

    QML+Chart.js 实现图表显示

    2. **数据传递**:将Qt应用中的数据通过JavaScript接口传递到`Chart.js`,可以使用`QML`的`js`函数或者`WebChannel`来实现双向通信。`WebChannel`允许C++和JavaScript之间安全、高效地交换数据。 3. **绘制图表**:...

    highchart.js

    前端图表 柱状图 饼图 雷达图 可以良好的用于web端图形、图标展示,只需简单设置属性参数

    highchart7.2.0.zip

    这个"highchart7.2.0.zip"压缩包很可能是包含了Highcharts的7.2.0版本的所有资源,包括JavaScript库文件、示例代码、文档等。下面我们将详细探讨Highcharts及其在7.2.0版本中的关键特性、用法和API。 首先,...

    highchart组织架构图.zip

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的互动图表,如柱状图、折线图、饼图以及复杂的数据可视化图表,包括我们这里的组织架构图。在这个"highchart组织架构图.zip"压缩包中,包含...

    jquery 图表插件highchart,jschart,flot

    在jQuery生态系统中,有多个图表插件可供选择,例如Highcharts、jsCharts和Flot。这三个插件都是JavaScript库,专门设计用于创建各种类型的图表,如柱状图、折线图、饼图等。 **Highcharts** Highcharts是一款功能...

    2019vesion-highchart3d.zip

    Highcharts 是一款强大的JavaScript图表库,它允许开发者创建各种类型的互动图表,如柱状图、折线图、饼图等。3D版本的Highcharts(Highcharts 3D)则是这个库的一个扩展,为用户提供了在Web应用中展示立体、三维...

    bootstrap+upload(download)File+mybatis+highchart.js

    在本项目中,"bootstrap+upload(download)File+mybatis+highchart.js"是一个综合性的应用,它结合了前端框架Bootstrap、数据持久化框架MyBatis、数据可视化库Highcharts.js以及文件上传下载功能。下面将详细介绍这些...

    【jquery 图表插件】jqplot,highchart,jschart,flot

    众所周知,通过jquery可以实现很好的图表效果,...其次,这里提供常用的插件如highchart,这里提供有详细的API文档和示例,不用再去官网上搜集啦。 另外,还有jschart和flot,虽然不常用,但是可以作为学习参考使用。

    highChart包(含HighCharts.js,可引用设置折线图、柱状图、饼图等)

    首先,`HighCharts.js`是HighCharts的核心JavaScript文件,通过引入这个文件,可以在网页中使用HighCharts。在HTML文件(如`index.htm`)中,你需要在`<head>`部分引入`HighCharts.js`,通常使用`<script>`标签来...

    highcharts的js文件

    Highcharts是一款强大的JavaScript图表库,用于在Web应用中创建各种数据可视化效果,如柱状图、曲线图、饼图等。这个压缩包包含的是Highcharts的JavaScript文件,这些文件是生成图表所必需的。 首先,Highcharts的...

    highchart.rar

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,包括折线图、柱状图、饼图等。在这个名为"highchart.rar"的压缩包中,我们很显然会找到与Highcharts相关的代码示例,尤其是关于如何...

    HighChart多图导出.rar

    HighChart生成的前端多张svg图表数据,可以转换为一张图片导出。压缩包里是案例代码。HighChart生成的前端多张svg图表数据,可以转换为一张图片导出。压缩包里是案例代码。HighChart生成的前端多张svg图表数据,可以...

    highchart图表加图标.rar_The Weather_highchart_highcharts

    Use the highcharts foreground frame to draw a graph and display icons at each point of the curve. Effect such as weather forecast chart.

    matlab开发-HighChart

    HighChart是一个强大的JavaScript库,用于构建高质量的网页图表,其在数据可视化方面表现卓越,尤其适用于网络应用。 首先,我们需要了解MATLAB的Web浏览器功能。MATLAB内置的Web浏览器组件允许开发者在MATLAB环境...

    adapter-extjs.rar_extjs chart_highchart_javascript

    在IT行业中,ExtJS、Highcharts和JavaScript是创建交互式数据可视化的重要工具。本文将深入探讨这些技术,以及它们在实际应用中的结合。 首先,ExtJS是一个基于JavaScript的开源框架,用于构建富客户端Web应用程序...

    Highchart Demo

    在"Highchart Demo"这个实例中,我们将深入探讨如何利用Highcharts来制作各种类型的图表,以及相关的JavaScript配置和数据接收格式。 首先,Highcharts支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图等...

    HighChart曲线图

    HighChart是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,包括曲线图。在Web开发中,数据可视化是至关重要的,HighChart凭借其丰富的功能和易用性,深受开发者喜爱。以下是对"HighChart曲线图...

    HighChart

    HighChart基于JavaScript,支持各种浏览器,包括IE9及以上的版本。它以其灵活性、丰富的图表类型和良好的性能赢得了开发者们的青睐。在网页应用中,HighChart能够帮助我们有效地展示复杂的数据,提升用户体验。 ...

    highchart

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,如柱状图、折线图、饼图等。它具有丰富的定制选项,能够满足开发者在数据展示方面的各种需求。以下是对Highcharts的一些关键知识...

    HighChart API

    HighChart API 是一款强大的JavaScript图表库,用于在Web页面上创建动态、交互式的图表和图形。这个API提供了丰富的选项和功能,使得开发者可以定制各种类型的图表,如柱状图、折线图、饼图、散点图等。下面将详细...

Global site tag (gtag.js) - Google Analytics