Graph in Plotly

Easily export data from your web site to graph in Plotly.

Just follow the steps below.

Questions? feedback@plot.ly

Export data into a Plotly spreadsheet for easy graphing.

See how it works in jsFiddle here

1
Create a button or link on your page with an ID "plotly-data-export". Make sure your page is loading jQuery.
<a href="#" id="plotly-data-export" target="_blank">Graph in Plotly</a>
        
2
Create a global javascript function called getPlotlyGridData(). This function should return the data you want to be available to graph. See the code to the right for the correct syntax. In this example, "Data", "Amount", and "Source" will be column headers in the Plotly spreadsheet.
<script>
function getPlotlyGridData(){ 
    return {"cols":{
        "Date":{"data":[1, 2, 4, 2, 6, 3]},
        "Amount":{"data":[3, 4, 6, 1, 9, 2]},
        "Source":{"data":["data.gov","2013-11-11"]}
        }
    } 
}
</script>
3
Copy and paste the code to the right and insert it below the body tag of your page.
<script>
$('#plotly-data-export').click(function(){
    var hiddenform = $('<div id="hiddenform" '+
        'style="display:none;">'+
        '<form action="https://plot.ly/datagrid" '+
        'method="post" target="_blank">'+
        '<input type="text" '+
        'name="data" /></form></div>')
        .appendTo('body');
    hiddenform.find('input').val( 
        JSON.stringify( { getPlotlyGridData() } )
        .replace(/\\/g,'\\\\').replace(/'/g,"\\'") );
    hiddenform.find('form').submit();
    hiddenform.remove();
}); 
</script>

Export data directly into a Plotly graph.

See how it works in jsFiddle here

1
Create a button or link on your page with an ID "plotly-graph-export". Make sure your page is loading jQuery.
<a href="#" id="plotly-graph-export" target="_blank">Graph in Plotly</a>
        
2
Create a global javascript called getPlotlyGraphData(). This function should return the data you want to graph. See the code to the right for the correct syntax.
<script>
function getPlotlyGraphData(){ 
    return [{"x":[1,2,3],"y":[2,4,3]},{"x":[1,2,3],"y":[9,7,8]}]; 
}
</script>
3
Copy and paste the code to the right and insert it below the body tag of your page.
<script>
$('#plotly-graph-export').click(function(){
    var hiddenform = $('<div id="hiddenform" '+
        'style="display:none;">'+
        '<form action="https://plot.ly/external" '+
        'method="post" target="_blank">'+
        '<input type="text" '+
        'name="data" /></form></div>')
        .appendTo('body');
    hiddenform.find('input').val( 
        JSON.stringify( {"data": getPlotlyGraphData() } )
        .replace(/\\/g,'\\\\').replace(/'/g,"\\'") );
    hiddenform.find('form').submit();
    hiddenform.remove();
}); 
</script>