I dont want to use plotly.js src attribute in my html file (like below)
I want to include the complete source code for a simple plotly.js line chart as a local JavaScript file. Since plotly.js is open source I should be able to do that. I have written a simple plotly.js plot function and I have downloaded the unminified plotly.js source code from here
https://cdn.plot.ly/plotly-latest.js
and copied over the functions: newPlot, exports.plot, plotOne in a new JavaScript file call plot.js as seen below. However, I get an error message: ReferenceError: Lib is not defined
There are so many lines of code in the original plotly.js JavaScript file that probably forgot to copy over a function or two but I am having a hard time finding a function called Lib.
Are all plot functions really included in that repository? or are some plot functions proprietary and not included?
function plot(z) {
document.getElementById(outId).innerHTML = "";
var yy = z;
var xx = [];
for (var i = 0; i <= yy.length; i++) {
xx[i] = JSON.stringify(i);
}
var data = [{
x: xx,
y: yy,
type: 'scatter',
line: { color: 'green', width: 2 }
}];
var layout =
{
width: 950,
height: 300,
paper_bgcolor: 'lightblue',
plot_bgcolor: 'lightblue',
margin: { l: 60, b: 60, r: 20, t: 20 },
xaxis: { title: 'x-axis', titlefont: { family: 'Courier New, monospace', size: 18, color: 'black' } },
yaxis: { title: 'y-axis', titlefont: { family: 'Courier New, monospace', size: 18, color: 'black' } },
xaxis: { tickfont: { size: 12, color: 'black' }, showgrid: true, gridcolor: 'black', linecolor: 'black' },
yaxis: { tickfont: { size: 12, color: 'black' }, showgrid: true, gridcolor: 'black', linecolor: 'black' }
};
toggleOrCheckIfFunctionCall(true);
newPlot(outId, data, layout, { displayModeBar: false, staticPlot: true });
}
function newPlot(gd, data, layout, config) {
gd = Lib.getGraphDiv(gd);
// remove gl contexts
Plots.cleanPlot([], {}, gd._fullData || [], gd._fullLayout || {});
Plots.purge(gd);
return exports.plot(gd, data, layout, config);
}
exports.plot = function (gd, traces, transitionOpts, makeOnCompleteCallback) {
var fullLayout = gd._fullLayout;
var subplots = fullLayout._subplots.cartesian;
var calcdata = gd.calcdata;
var i;
if (!Array.isArray(traces)) {
// If traces is not provided, then it's a complete replot and missing
// traces are removed
traces = [];
for (i = 0; i < calcdata.length; i++) traces.push(i);
}
for (i = 0; i < subplots.length; i++) {
var subplot = subplots[i];
var subplotInfo = fullLayout._plots[subplot];
// Get all calcdata for this subplot:
var cdSubplot = [];
var pcd;
for (var j = 0; j < calcdata.length; j++) {
var cd = calcdata[j];
var trace = cd[0].trace;
// Skip trace if whitelist provided and it's not whitelisted:
// if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
if (trace.xaxis + trace.yaxis === subplot) {
// XXX: Should trace carpet dependencies. Only replot all carpet plots if the carpet
// axis has actually changed:
//
// If this trace is specifically requested, add it to the list:
if (traces.indexOf(trace.index) !== -1 || trace.carpet) {
// Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
// traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
// is outdated. So this retroactively adds the previous trace if the
// traces are interdependent.
if (
pcd &&
pcd[0].trace.xaxis + pcd[0].trace.yaxis === subplot &&
['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
cdSubplot.indexOf(pcd) === -1
) {
cdSubplot.push(pcd);
}
cdSubplot.push(cd);
}
// Track the previous trace on this subplot for the retroactive-add step
// above:
pcd = cd;
}
}
plotOne(gd, subplotInfo, cdSubplot, transitionOpts, makeOnCompleteCallback);
}
};
function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback) {
var traceLayerClasses = constants.traceLayerClasses;
var fullLayout = gd._fullLayout;
var modules = fullLayout._modules;
var _module, cdModuleAndOthers, cdModule;
var layerData = [];
var zoomScaleQueryParts = [];
for (var i = 0; i < modules.length; i++) {
_module = modules[i];
var name = _module.name;
var categories = Registry.modules[name].categories;
if (categories.svg) {
var className = (_module.layerName || name + 'layer');
var plotMethod = _module.plot;
// plot all visible traces of this type on this subplot at once
cdModuleAndOthers = getModuleCalcData(cdSubplot, plotMethod);
cdModule = cdModuleAndOthers[0];
// don't need to search the found traces again - in fact we need to NOT
// so that if two modules share the same plotter we don't double-plot
cdSubplot = cdModuleAndOthers[1];
if (cdModule.length) {
layerData.push({
i: traceLayerClasses.indexOf(className),
className: className,
plotMethod: plotMethod,
cdModule: cdModule
});
}
if (categories.zoomScale) {
zoomScaleQueryParts.push('.' + className);
}
}
}
layerData.sort(function (a, b) { return a.i - b.i; });
var layers = plotinfo.plot.selectAll('g.mlayer')
.data(layerData, function (d) { return d.className; });
layers.enter().append('g')
.attr('class', function (d) { return d.className; })
.classed('mlayer', true)
.classed('rangeplot', plotinfo.isRangePlot);
layers.exit().remove();
layers.order();
layers.each(function (d) {
var sel = d3.select(this);
var className = d.className;
d.plotMethod(
gd, plotinfo, d.cdModule, sel,
transitionOpts, makeOnCompleteCallback
);
// layers that allow `cliponaxis: false`
if (constants.clipOnAxisFalseQuery.indexOf('.' + className) === -1) {
Drawing.setClipUrl(sel, plotinfo.layerClipId, gd);
}
});
// call Scattergl.plot separately
if (fullLayout._has('scattergl')) {
_module = Registry.getModule('scattergl');
cdModule = getModuleCalcData(cdSubplot, _module)[0];
_module.plot(gd, plotinfo, cdModule);
}
// stash "hot" selections for faster interaction on drag and scroll
if (!gd._context.staticPlot) {
if (plotinfo._hasClipOnAxisFalse) {
plotinfo.clipOnAxisFalseTraces = plotinfo.plot
.selectAll(constants.clipOnAxisFalseQuery.join(','))
.selectAll('.trace');
}
if (zoomScaleQueryParts.length) {
var traces = plotinfo.plot
.selectAll(zoomScaleQueryParts.join(','))
.selectAll('.trace');
plotinfo.zoomScalePts = traces.selectAll('path.point');
plotinfo.zoomScaleTxt = traces.selectAll('.textpoint');
}
}
}