Building dynamic HighCharts and image Highcharts with (mostly) one codebase?

Question

We're already creating dynamic HighCharts for our webpages--these have a few javascript dependencies and a chart-generation script. We'd like to start creating PDFs of these charts using the new HighCharts/Node/PhantomJS suite HighCharts has rigged up (see press release). Our image-gen node server would run on a separate box/vm. How can we do this without having to maintain two separate codebases for the same chart? I'm not too familiar with Node yet, so I'm not sure how requesting the scripts with a web request would work. I'm guessing a lot of HighCharts users that want to start generating some of their charts as images server-side will run into a similar issue with managing two related codesets...

In essence, we already have have this:

Webserver -> JSON (data) + foo.js + bar.js + foo.html -> webpage with dynamic charts.

We'd like to build:

Web-server -> JSON (data) + separate Node Server + foo.js + bar.js -> images available via web request

Obviously some redundancy. How can we manage the dependencies?

Answer 1

We decided to pass the entire highcharts config object (e.g. Highcharts.chart(configObj)) to the node server as a URL-encoded string. We had to put a few rendering functions over on the node server, but it wasn't too bad. We also stuck some of the rendering functions in the string config object. Not the most beautiful result, but it worked.

Answer 2

While node is awesome, I felt that approach was needlessly complex, with having to many moving parts that could break. So I did the super simple solution of creating files dynamically. The only problem i faced was deleting the temporary file after adding it to the pdf. It would break the PDF from rendering. And setting the directory to /tmp, crashed phantomjs. The best idea i came up with currently is putting the tempory generated files, in a temp directory, then deleting everything in that directory every night, with a cronjob.

I post this out of code simplicity. It should be in a function, to maintain code re-usability.

<?php    
    $TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
    $TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';

    $Data = "
        {
            chart: {
                zoomType: 'xy',
                width: 700,
                height: 520
            },
            credits: {
                  enabled: false
            },
            colors: [
                     '#2f7ed8', 
                     '#910000', 
                     '#8bbc21', 
                     '#1aadce', 
                     '#492970',
                     '#f28f43', 
                     '#77a1e5', 
                     '#c42525', 
                     '#a6c96a'
                  ],
            title: {
                text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
                style: {
                    fontSize: '16px',
                }
            },
            xAxis: [{
                categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
            }],
            yAxis: [{ 
                labels: {
                    format: '{value}',
                    style: {
                        fontSize: '14px',
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Y axis',
                    style: {
                        fontSize: '16px',
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Sec Yaxis',
                    style: {
                        fontSize: '16px',
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value}',
                    style: {
                        fontSize: '14px',
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'horizontal',
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            series: [{
                name: 'first',
                type: 'spline',
                yAxis: 1,
                data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
            },
            {
                name: 'second',
                type: 'spline',
                yAxis: 1,
                data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]

            },{
                name: 'third',
                type: 'column',
                data: [10, 11, 9, 7, 5, 2, 7]
            },{
                name: 'fourth',
                type: 'column',
                data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
            }]
        }";

    try {
        $myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
        fwrite($myfile, $Data);
        fclose($myfile);                                
    } catch (Exception $e) {
        echo 'Error: '.$e.' <br />';
    }  

    $URL_Command = "phantomjs  /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
    exec($URL_Command);    

    echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';

?>

I hope this helps. I couldn't find a good solution that didn't involve Node.JS or Java to do this. I wanted a pure PHP solution.