CODEWITHSUNDEEP
javascriptphpjquerycsvhighcharts
José María Barrientos
José María Barrientos

Reputation: 157

How I can customize the file name when exporting using the plug-in CSV in Highcharts?

the plugin I'm using is this: http://www.highcharts.com/plugin-registry/single/7/Export-CSV

part of my code that I have on the label "head" is this:

<script type="text/javascript">//<![CDATA[ 
var titulodelgrafico = "Soy el titulo del gráfico";    /* TODOS: reemplazar por el nombre de la pregunta  */
var titulodelarchivo = "Soy el titulo del archivo";    /* TODOS: reemplazar por el nombre del archivo     */
var nombredelaSerie =  "Soy el nombre de la serie";    /* TODOS:  reemplazar por el nombre de la serie    */
var titulodelejeY =    "Soy el titulo del eje Y";      /* BARRAS: reemplazar por el titulo del eje Y      */
var formatodeltooltip ="{series.name}: <b>{point.percentage:.1f}%</b>"; /* PASTEL Y SEMICIRCULO: reemplazar por la forma de llamar los tipos de datos */
$(function () {
/* ______________________ GRÁFICA DE PASTEL ______________________ */
    $('.pastel').highcharts({
        title: {text: titulodelgrafico}, tooltip: { pointFormat: formatodeltooltip },exporting: { filename: titulodelarchivo },legend: {width: 300, itemWidth: 150 },
        xAxis: {
        categories: ['Firefox', 'IE', 'Chrome', 'Safari', 'Opera', 'Others']
        },
        series: [{
            type: 'pie',
            name: nombredelaSerie,
            data: [
                ['Firefox',   45.0],
                ['IE',        26.8],
                {
                    name: 'Chrome',   
                    y: 12.8,
                    sliced: true,
                    selected: true  /* Este aparecera seleccionado por defecto */
                },
                ['Safari',     8.5],
                ['Opera',      6.2],
                ['Others',     0.7]
            ]
        }]
        });
});

and I need the CSV file is saved with a custom name to export.
{filename: titulodelarchivo} /* just let me customize the "filename" with the following formats: PDF, PNG, JPEG and SVG. But not with the CSV. */

I've seen the following code: highcharts.com / studies / csv-export / csv.php

but I want to do in javascript, is it possible?

Upvotes: 2

Views: 1903

Answers (2)

Pushpalata
Pushpalata

Reputation: 7

I have resolved this issue by updating the export-csv.js file

Source : https://github.com/highslide-software/export-csv/blob/master/export-csv.js

Previous Code line 152

`name = (chart.title ? chart.title.textStr.replace(/ /g, '-').toLowerCase() : 'chart');`

Updated 

`title = (chart.title ? chart.title.textStr.replace(/ /g, '-').toLowerCase() : 'chart');
 // for dynamic name 
 name = chart.options.exporting.filename ? chart.options.exporting.filename : title`

You can change the exporting filename

`exporting: {
    enabled: true,
    filename: "test"
}`

and get the desired name

Upvotes: 1

Nico
Nico

Reputation: 12683

From what I can tell on the javascript plugin the URL is coded into the file. Therefore the PHP file that emits the CSV file for download controls the details of the CSV file. To get around this you could easily modify the plugin and change the URL then host your own CSV generation tool that emits the file name you wish in any format. Todo this you must get the source for the javascript plugin, and the source for the PHP file.

Javascript Source: https://github.com/highslide-software/export-csv/blob/master/export-csv.js

From this page you can change the URL from the following line. (Line 48 on GIT)

Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
                csv: this.getCSV()
            });

As you see the URL is coded in there to csv.php. Now reading through that file the PHP source code is also available. And its quite simple.

PHP Source: https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php

Now in this file you will see the file name is statically set to chart.csv on line 10.

header('Content-disposition: attachment;filename=chart.csv');

You can simply change the filename=chart.csv to anything you wish.

Now doing this means you must be hosting a PHP server (you can rewrite this in other languages) and you must use your copy of the javascript file.

Hope this helps.

Upvotes: 1

Related Questions