I’m creating this page to house information about creating good scientific-quality plots/graphs using JavaScript. I’ve used several different Javascript so-called charting libraries and have been disappointed at how little the programmers attend to scientific needs. Perhaps I’m lazy and just haven’t found the right one yet? If so, please let me know.

## Requirements

- Can display a chart title
- Can label axes (along the axes, a short distance away)
- (Optional) Can label axes (at the end of the axes)
- Can add a legend
- Can do any of the above with a mix of text and mathematics (preferably LaTeX), even if it’s just by adding in MathJax
- Can add arrows on the axes if you want them
- Can display gridlines
- Capable of scatter plots with error bars
- Capable of graphing mathematical functions
- (Optional) Capable of fitting mathematical functions

## Use Cases

I’d like students to be able to use something like GlowScript to make graphs, but I haven’t been able to label axes using its version of Flot. TODO: Experiment with GlowScript to see if I can call Flot directly. Why not the wonderful LinReg? I’m not in control of the software on my students’ computers, sadly. I’d like to wrap the required JavaScript code in something simple enough that 9th grade students could do it, calling something like the following for a single graph.

plot({

title: "Happiness of a person receiving wardrobe compliments during a 15 minute interval",

xaxis: "Frequency of compliments ($\text{hour}^{-1}$)",

yaxis: "Percent of time spent smiling (%)",

data: [[0,10,1],[0,0,5],[4,30,3],[4,50,6],[20,23,5],[20,70,12],], // in the form [x,y,yerror]

});

## Data

I have the following data measuring the period of a pendulum for various lengths.

Length | Period | Uncertainty in Period |
---|---|---|

cm | s | s |

± 0.5 | ± 0.030 | |

121.0 | 2.206 | 0.003 |

103.6 | 2.028 | 0.015 |

85.4 | 1.851 | 0.002 |

67.5 | 1.643 | 0.008 |

51.8 | 1.438 | 0.002 |

34.3 | 1.165 | 0.008 |

23.2 | 0.972 | 0.004 |

19.6 | 0.874 | 0.009 |

10.0 | 0.612 | 0.008 |

4.9 | 0.404 | 0.004 |

In various JSON formats:

"data": [ { "name": "table", "values": [ {"L":121.0, "δL":0.5, "T":2.206, "δTrand":0.003, "δTsys":0.030}, {"L":103.6, "δL":0.5, "T":2.028, "δTrand":0.015, "δTsys":0.030}, {"L":85.4, "δL":0.5, "T":1.851, "δTrand":0.002, "δTsys":0.030}, {"L":67.5, "δL":0.5, "T":1.643, "δTrand":0.008, "δTsys":0.030}, {"L":51.8, "δL":0.5, "T":1.438, "δTrand":0.002, "δTsys":0.030}, {"L":34.3, "δL":0.5, "T":1.165, "δTrand":0.008, "δTsys":0.030}, {"L":23.2, "δL":0.5, "T":0.972, "δTrand":0.004, "δTsys":0.030}, {"L":19.6, "δL":0.5, "T":0.874, "δTrand":0.009, "δTsys":0.030}, {"L":10.0, "δL":0.5, "T":0.612, "δTrand":0.008, "δTsys":0.030}, {"L":4.9, "δL":0.5, "T":0.404, "δTrand":0.004, "δTsys":0.030} ] } ],

## Contenders

### Vega

Try it out at http://trifacta.github.io/vega/editor/ .

### D3.js

- dygraphs (intended for time-series data, though I like that it’s very interactive.)
- GlowScript with Flot (Concerns: difficulty of labeling axes?)
- Google Charts Scatter Chart (I do hate the mouseover point format. Blechy!)

I’ll also link to my Computer-Aided Mathemathics and Science Livebinder, which has a JavaScript Graphing tab, until I get more links in here.

I guess I’ll have to wade through http://javascript.open-libraries.com/utilities/chart/20-best-javascript-charting-and-plotting-libraries/ to find some functional (and not just prettty) Javascript graphing libraries.

## Environments

I’d also love suggestions on online environments that students could use to execute their Javascript graphs.

JSfiddle might be a place for students to try making these graphs.

Hello

You are right I have the same problem

chart libraries don’t satisfy scientific needs

I am using chart.js for an application and I had to do a lot of work to make it as suitable as possible

It doesn’t provide the right scales to be able to get values from the chart other than plotted values.

And many other things

I will try to develop a scientific chart library in the future =D

I just found out about plotly.js, which recently went open source.