chart.nnb

{
    "cells": [
        {
            "language": "markdown",
            "source": [
                "# Server Side Chart Image creation with Highchart Server Export\nInstall libs with: `npm i highcharts-export-server`   \nYou need to agree to the Highchart license to get access to the charting code. To\ndo this, after the npm install, `cd node_modules/hightcharts_export_server` and run the build script.  Say `yes` to accepting the license.\n```\ncd node_modules/highcharts-export-server\nnode build.js\n```\nReference: https://www.npmjs.com/package/highcharts-export-server\n\n\n"
            ],
            "outputs": []
        },
        {
            "language": "typescript",
            "source": [
                "// /index.js\n\n// 1. Import filesystem and Highcharts Export Server module\nconst fs = require(\"fs\");\nconst chartExporter = require(\"highcharts-export-server\");\n\n// Initialize the exporter\nchartExporter.initPool();\n// Chart details object specifies chart type and data to plot\n\n// Usually the same object that you use to configure your charts\n// in the frontend. This will be used to specify the chart type\n// and data to plot. I will use a bar chart, the same data\n// specified in one of the official demonstrations in the HC website\nlet chartOptions = {\n    chart: {\n        type: 'bar'\n    },\n    title: {\n        text: 'Historic World Population by Region'\n    },\n    subtitle: {\n        text: 'Source: Our Code World'\n    },\n    xAxis: {\n        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],\n        title: {\n            text: null\n        }\n    },\n    yAxis: {\n        min: 0,\n        title: {\n            text: 'Population (millions)',\n            align: 'high'\n        },\n        labels: {\n            overflow: 'justify'\n        }\n    },\n    tooltip: {\n        valueSuffix: ' millions'\n    },\n    plotOptions: {\n        bar: {\n            dataLabels: {\n                enabled: true\n            }\n        }\n    },\n    legend: {\n        layout: 'vertical',\n        align: 'right',\n        verticalAlign: 'top',\n        x: -40,\n        y: 80,\n        floating: true,\n        borderWidth: 1,\n        backgroundColor: '#FFFFFF',\n        shadow: true\n    },\n    credits: {\n        enabled: false\n    },\n    series: [{\n        name: 'Year 1800',\n        data: [107, 31, 635, 203, 2]\n    }, {\n        name: 'Year 1900',\n        data: [133, 156, 947, 408, 6]\n    }, {\n        name: 'Year 2000',\n        data: [814, 841, 3714, 727, 31]\n    }, {\n        name: 'Year 2016',\n        data: [1216, 1001, 4436, 738, 40]\n    }]\n};\n\n// Export chart using these options\nchartExporter.export({\n    type: \"png\",\n    options: chartOptions,\n    // By default the width of the chart images is of 600\n    // In this case, we want a big image\n    width: 1200\n}, (err, res) => {\n    // Get the image data (base64)\n    let imageb64 = res.data;\n\n    // Filename of the output. In this case, we will write the image\n    // to the same directory of the initialization script.\n    let outputFile = \"./output-chart.png\";\n\n    // Save the image data to a file\n    fs.writeFileSync(outputFile, imageb64, \"base64\", function (err) {\n        if (err) console.log(err);\n    });\n\n    console.log(\"The chart has been succesfully generated!\");\n\n    chartExporter.killPool();\n});"
            ],
            "outputs": [
                {
                    "items": [
                        {
                            "mime": "application/vnd.code.notebook.stdout",
                            "value": [
                                "The chart has been succesfully generated!",
                                ""
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "language": "markdown",
            "source": [
                "<img src=\"output-chart.png\" alt=\"chart generated by highcharts\" />"
            ],
            "outputs": []
        }
    ]
}