Demo: Export as an image

This demo shows how to export a Dygraph object as a PNG image.

The current implementation creates a new canvas object from the plot and adds to it the axes and the legend. The resulting canvas is serialized to an image using the toDataURL() method.

Usage

Include the script dygraph-extra.js and use the function Dygraph.Export.asPNG(dygraph, img) to render the dygraph in the img element.

// g is a Dygraph object
var g = new Dygraph(...);

//demoimg is a the id of the <img> element where the dygraph will be exported.
var img = document.getElementById('demoimg')

// Create the image!
Dygraph.Export.asPNG(dygraph, img);

// The dygraph should be rendered in the <img> object and you should be able
// to save it using your browser (e.g.: Right click, Save Image As)

Example

PNG Image

(Hint: Update the image after changing zoom)

Options

The font faces, sizes and colors can be specified passing an object as the third argument for the function Dygraph.Export.asPNG.

The following example shows how to do this and includes the available options and their default values:

// These are the default options
var options = {
    //Texts displayed below the chart's x-axis and to the left of the y-axis 
    titleFont: "bold 18px serif",
    titleFontColor: "black",

    //Texts displayed below the chart's x-axis and to the left of the y-axis 
    axisLabelFont: "bold 14px serif",
    axisLabelFontColor: "black",

    // Texts for the axis ticks
    labelFont: "normal 12px serif",
    labelFontColor: "black",

    // Text for the chart legend
    legendFont: "bold 12px serif",
    legendFontColor: "black",

    legendHeight: 20    // Height of the legend area
}; 

Dygraph.Export.asPNG(dygraph, img, options);

Multiple y-axes

By Josep Llodrà Grimalt

The same data with both one and two y-axes. Two y-axes:

Dygraphs PNG images

License

This program is distributed under the MIT license.

Sample code based on a Dygraph demo.

Authors

Last updated: 2012-09-25.