Export a dashboard
To export an image of the dashboard, create a template file as an HTML file, containing the layout and supporting static resources (JS, CSS, images, and fonts).
The template must contain the placeholder elements for the charts, preferably using <div>. The chart config array must contain the charts with the renderAt attribute that match the IDs of the elements stated above.
To export a dashboard, you can use the CLI or SDKs of the languages mentioned below, using the command given below:
We’ll name the template file with the placeholder elements as template.html.
The following code goes into the template.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart</title>
</head>
<body>
<div id="pie_chart"></div>
<div id="column_chart"></div>
</body>
</html>
The multiple_charts_config.json contains the configurations of the charts to be exported. The following code goes into the multiple_charts_config.json file:
[
{
"type": "pie2d",
"renderAt": "pie_chart",
"width": "500",
"height": "400",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
}
]
}
],
"dataset": [
{
"seriesname": "Los Angeles Topanga",
"data": [
{
"value": "13400"
},
{
"value": "12800"
},
{
"value": "22800"
}
]
}
]
}
},
{
"type": "mscolumn2d",
"renderAt": "column_chart",
"width": "450",
"height": "420",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Split of Sales by Product Category",
"subCaption": "In top 5 stores last month",
"yAxisname": "Sales (In USD)"
},
"categories": [
{
"category": [
{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
}
]
}
],
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "17000"
},
{
"value": "19500"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "25400"
},
{
"value": "29800"
}
]
}
]
}
}
]
Special attention needs to be given to the renderAt attribute. As you can see, our template contains two elements with the IDs #pie_chart and #column_chart.
In the configuration file, you need to include the same renderAt attribute so that when you finally export the charts, FusionExport will replace those divs with the actual charts.
To create the template, run the following command:
$ fe -c multiple_charts_config.json -T template.html
The --resources option is not mandatory; it is needed only when --remote-export-enabled is set to true. Most resources that are mentioned in the template, using the <link>, <script> or <img> tags, are found intelligently. If any additional fonts or links are present in the CSS or any dynamic links are included in the JavaScript file, you can specify them using the --resources option.
The format of the --resources option is as shown below:
{
"basePath": "src/build",
"include": [
".jpg",
".png"
],
"exclude": [
"filename.jpg"
]
}
// Exporting a dashboard
const path = require('path');
// Require FusionExport
const {
ExportManager,
ExportConfig
} = require('../');
// Instantiate ExportManager
const exportManager = new ExportManager();
// Instantiate ExportConfig and add the required configurations
const exportConfig = new ExportConfig();
exportConfig.set('chartConfig', path.join(dirname, 'resources', 'multiple.json'));
exportConfig.set('templateFilePath', path.join(dirname, 'resources', 'template.html'));
// provide the export config
exportManager.export(exportConfig);
// Called when export is done
exportManager.on('exportDone', (outputFileBag) => {
outputFileBag.forEach((op) => {
console.log(DONE: ${op.realName});
});
ExportManager.saveExportedFiles(outputFileBag);
});
// Called on each export state change
exportManager.on('exportStateChange', (state) => {
console.log([${state.reporter}] ${state.customMsg});
});
// Called on erroe
exportManager.on('error', (err) => {
console.error(err);
});
import com.fusioncharts.fusionexport.client.*; // import sdk
public class ExportChart {
public static void main(String[] args) throws Exception {
String configPath = "fullpath/resources/static2/resources/multiple.json";
String templatePath = "fullpath/resources/static2/resources/template.html";
// Instantiate the ExportConfig class and add the required configurations
ExportConfig config = new ExportConfig();
config.set("chartConfig", configPath);
config.set("templateFilePath", templatePath);
// Instantiate the ExportManager class
ExportManager manager = new ExportManager(config);
// Call the export() method with the export config and the respective callbacks
manager.export(new ExportDoneListener() {
@Override
public void exportDone(ExportDoneData result, ExportException error) {
if (error != null) {
System.out.println(error.getMessage());
} else {
ExportManager.saveExportedFiles("fullPath", result);
}
}
},
new ExportStateChangedListener() {
@Override
public void exportStateChanged(ExportState state) {
System.out.println("STATE: " + state.reporter);
}
});
}
}
using System;
using System.IO;
using System.Linq;
using FusionCharts.FusionExport.Client; // Import sdk
namespace FusionExportTest {
public static class Dashboard {
public static void Run(string host = Constants.DEFAULT_HOST, int port = Constants.DEFAULT_PORT) {
// Instantiate the ExportConfig class and add the required configurations
ExportConfig exportConfig = new ExportConfig();
exportConfig.Set("chartConfig", File.ReadAllText("./resources/dashboard_charts.json"));
exportConfig.Set("templateFilePath", "./resources/template.html");
// Instantiate the ExportManager class
ExportManager em = new ExportManager(host: host, port: port);
// Call the Export() method with the export config and the respective callbacks
em.Export(exportConfig, OnExportDone, OnExportStateChanged);
}
// Called when export is done
static void OnExportDone(ExportEvent ev, ExportException error) {
if (error != null) {
Console.WriteLine("Error: " + error);
} else {
var fileNames = ExportManager.GetExportedFileNames(ev.exportedFiles);
Console.WriteLine("Done: " + String.Join(", ", fileNames)); // export result
}
}
// Called on each export state change
static void OnExportStateChanged(ExportEvent ev) {
Console.WriteLine("State: " + ev.state.customMsg);
}
}
}
<?php
// Exporting a dashboard
require DIR . '/../vendor/autoload.php';
// Use the sdk
use FusionExport\ExportManager;
use FusionExport\ExportConfig;
// Instantiate the ExportConfig class and add the required configurations
$exportConfig = new ExportConfig();
$exportConfig->set('chartConfig', realpath('resources/multiple.json'));
$exportConfig->set('templateFilePath', realpath('resources/template.html'));
// Called on each export state change
$onStateChange = function ($event) {
$state = $event->state;
echo('STATE: [' . $state->reporter . '] ' . $state->customMsg . "\n");
};
// Called when export is done
$onDone = function ($event, $e) {
$export = $event->export;
if ($e) {
echo('ERROR: ' . $e->getMessage());
} else {
foreach ($export as $file) {
echo('DONE: ' . $file->realName. "\n");
}
ExportManager::saveExportedFiles($export);
}
};
// Instantiate the ExportManager class
$exportManager = new ExportManager();
// Call the export() method with the export config and the respective callbacks
$exportManager->export($exportConfig, $onDone, $onStateChange);
#!/usr/bin/env python
from fusionexport import ExportManager, ExportConfig # Import sdk
def read_file(file_path):
try:
with open(file_path, "r") as f:
return f.read()
except Exception as e:
print(e)
# Called when export is done
def on_export_done(event, error):
if error:
print(error)
else:
ExportManager.save_exported_files("exported_images", event["result"])
# Called on each export state change
def on_export_state_changed(event):
print(event["state"])
# Instantiate the ExportConfig class and add the required configurations
export_config = ExportConfig()
export_config["chartConfig"] = read_file("dashboard_charts.json")
export_config["templateFilePath"] = "template.html"
# Provide port and host of FusionExport Service
export_server_host = "127.0.0.1"
export_server_port = 1337
# Instantiate the ExportManager class
em = ExportManager(export_server_host, export_server_port)
# Call the export() method with the export config and the respective callbacks
em.export(export_config, on_export_done, on_export_state_changed)
// Exporting a dashboard
package main
import (
"fmt"
"github.com/fusioncharts/fusionexport-go-client"
)
// Called when export is done
func onDone(outFileBag[] FusionExport.OutFileBag, err error) {
check(err)
FusionExport.SaveExportedFiles(outFileBag)
}
// Called on each export state change
func onStateChange(event FusionExport.ExportEvent) {
fmt.Println("[" + event.Reporter + "] " + event.CustomMsg)
}
func main() {
// Instantiate ExportConfig and add the required configurations
exportConfig: = FusionExport.NewExportConfig()
exportConfig.Set("chartConfig", "example/resources/multiple.json")
exportConfig.Set("templateFilePath", "example/resources/template.html")
// Instantiate ExportManager
exportManager: = FusionExport.NewExportManager()
// Call the Export() method with the export config and the respective callbacks
exportManager.Export(exportConfig, onDone, onStateChange)
}
func check(e error) {
if e != nil {
panic(e)
}
}
Related Resources
Was this article helpful to you ?