/highcharts-contour

This is a plugin for Highcharts to display contour curves

Primary LanguageJavaScript

Contour curves for Highcharts

This is a plugin for Highcharts to display contour curves (Or smooth heatmaps, if you prefer)

It extends the existing heatmap module (which you must include) to display smooth gradients that interpolate the data points

This extension works by triangulating all the data points and filling each triangle with a linear gradient that matches the values assigned to each vertex.

Triangulation is performed either on a regular grid (Every 'grid_width' vertexes make a row/column) or using Delaunay (In case your data is irregular or you are just too lazy). If you decide to use Delaunay, you will have to include the library for Fast Delaunay Triangulation in JavaScript

Demos

Basic heatmap demo

This is the same demo you can find at http://www.highcharts.com/maps/demo/heatmap, but chart type was changed to 'contour'. Note that it automatically used Delaunay for triangulation, so that you didn't need any extra effort ;)

Countour curve

This demo uses a regular grid to plot a saddle point. The color axis is split is several constant-color ranges, creating contour lines.

3-D demo

This demo demonstrates how to use this plugin to display 3-D contour curves

Note that this relies on changes that are not in the main Highcharts distribution yet.

Random Point locations

This demo plots a radial function, but the locations of the data points are spread randomly. You can create a good chart even when you cannot sample your data in a rectangular grid

Random Data demo

This demo uses random data to show that your points don't need to make sense to create pretty chart :P