[Solved] Can a SED graph be created with morris.js? [closed]

Question

That graph is a SED or spectral energy distribution graph or plot from NASA/IPAC Extragalactic Database. More information is here
.

It has error bars displayed on the plot, but not point labels.

Not all SED plots look like this one, so lets describe the features this one has

Graph Title
Scatterplot
X axis label
Y axis label
X axis top scale
X axis bottom scale
X axis log scale
Y axis log scale
Error bars on points
Custom glyphs for different points on scatterplot
Point labels along x axis
Y axis label with String and Date

It could be recreated with morri.sjs, but it would take some effort to add all the missing functionality.

Here is my basic attempt to use the existing functionality (not adding any functionality) of morris.js to plot some data from the above link.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title> Chart Example</title>
</head>
<body>
  <p align="center">MRK 1014</p>
  <div id="line-example"></div>
</body>
</html>

JavaScript

Morris.Line({
  element: 'line-example',
  data: [
    { y: Math.log(1.45E+18), a: Math.log(6.41E-08) },
    { y:  Math.log(1.45E+18), a: Math.log(1.03E-07)   },
    { y:  Math.log(1.45E+18), a: Math.log(1.31E-07) },
    { y:  Math.log(1.45E+18), a: Math.log(6.28E-08)  },
    { y:  Math.log(1.45E+18), a: Math.log(8.55E-07)  },
    { y:  Math.log(1.45E+18), a: Math.log(8.55E-07)  },
    { y:  Math.log(1.45E+18), a: Math.log(5.59E-08) },
    { y:  Math.log(1.45E+18), a: Math.log(6.55E-08)  }
  ],
  xkey: 'y',
  ykeys: ['a', ],
  labels: ['Series A'],
  linewidth: 0,
  pointSize: 2,
  ymin : Math.log(1E-08),
  ymax : Math.log(1E3),

});

As you can see it looks nothing like the picture you posted.

Going through the list feature by feature,

Graph Title doesn’t have to be a piece of morris.js functionality, it can be a regular html heading or paragraph element.

X axis label and Y axis label also aren’t supported by morris.js , buy you can do them with HTML paragraph elements and CSS3 writing-mode property or transform function as documented here for the Y label. Y axis label with the date and string can be done same way.

You can manually place the conversions on the top scale or you could add support for a top scale and conversion support.

For log scale support, you would need to modify morris.grid.coffee and morris.line.coffe.

Same with custom glyph and error bar support and the categorical labels along the x axis.

Based on the amount of work, and the morris.js is a project for Pretty time-series line graphs, and your graph is neither a line graph, nor a time series line graph. I think you be better suited to use d3.js or Google Charts or some other JavaScript graphing library.

d3.js scatterplot examples include here and here. Also checkout Iris SED Analysis Tool which draws SEDs and has NED direct import support.

These options already have graph title support, scatterplot support, x and y axis label support and log scale support and custom glyph for points, and the other things can be added easier than by writing extensions to morris.js.

Accepted Answer