-
Notifications
You must be signed in to change notification settings - Fork 41
Plotly
Don Jayamanne edited this page Aug 22, 2021
·
13 revisions
https://plotly.com/javascript/
- Ability to render plots
- Ability to render plots and get a base64 encoded string of the image
- Ability to render plots and save it to a file.
- You can try plotly from within a node.js environment and get the exact same output you'd get when using Plotly in a browser.
- Currently Plotly requires an internet connection to inject the plotly script into the output renderer.
- To render plots using plotly merely import
plotly
fromnode-kernel
using any of the following import styles:
const { Plotly } = require('node-kernel');
import { Plotly } from 'node-kernel';
- installation of the package
node-kernel
is only recommended if you need code completion for Plotly. - This package is build into the notebook kernel (hence does not need to be installed)
/**
* Renders a plotly plot.
* See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
*/
export function newPlot(
root: plotly.Root,
data: plotly.Data[],
layout?: Partial<plotly.Layout>,
config?: Partial<plotly.Config>
): Promise<void>;
/**
* Returns a base64 encoded string representation of the generated plot.
* @param {plotly.Data[]} data See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
* @param {plotly.Layout} layout See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
* @param {('png' | 'svg' | 'jpeg')} [format] Defaults to 'png' if not specified.
*/
export function toBase64(
data: plotly.Data[],
layout: plotly.Layout,
format?: 'png' | 'svg' | 'jpeg'
): Promise<string>;
/**
* Saves the generated plot into a file.
* Return the path to the file name (if a file path is not provided a temporary image file is created and returned).
* @param {plotly.Data[]} data See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
* @param {plotly.Layout} layout See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
* @param {('png' | 'svg' | 'jpeg')} [format] Defaults to 'png' if not specified.
* @param {string} [file] Destination file path for the image to be downloaded.
* If not specified, the image is downloaded into a temporary file and that path is returned.
* @return {*} {Promise<string>}
*/
export function toFile(
data: plotly.Data[],
layout: plotly.Layout,
format?: 'png' | 'svg' | 'jpeg',
file?: string
): Promise<string>;
const { Plotly } = require('node-kernel');
var data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
Plotly.newPlot('myDiv', data, layout);
const { Plotly } = require('node-kernel');
var data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
const outputBase64 = Plotly.toBase64(data, layout);
console.log(outputBase64);
Note, the image will be displayed, but you can switch the mime type and view the base64
version as follows:
const { Plotly } = require('node-kernel');
var data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
const outputFileName = Plotly.toFile(data, layout);
console.log(outputFileName);
Home