Jump to content
  • Spotfire - Export Data (Client & WebPlayer) Python|Javascript


    While you can right-click on a visual and export (webplayer) some are in need of the ability to export with a click of a button/script. 

    After a long time of testing different methods, I have found a method that works well in both the Desktop Client and Webplayer. 

    The Use Case I was trying to solve was: Users wanted a download/export button that they could download details from a visual. (The setup is a bar chart visual that can be marked and then a View button can be clicked to view the table details and then given the option to download. )

    Using a data function to capture marked rows from a bar chart : 

     input
     output<-Sys.time()
     

    The document property being updated from the R script will trigger a Python Script to update a text area and an HTML version of a table visual. 

    # Converts a tablePlot to an html table and adds export functionality. Works in webplayer and any browser that supports flash 
    # to POC, Add a data table and two text areas. Then define the two script parameters:
    # visTA : target text area (a blank text area different from where this script will running as it will replace its contents)
    # visDT : Data Table visualization
    
    
    from Spotfire.Dxp.Application.Visuals import TablePlot, HtmlTextArea
    ta = visTA.As[HtmlTextArea]()
    
    from System.IO import Path, StreamWriter
    from System.Text import StringBuilder
    
    #Temp file for storing the cross table data
    tempFolder = Path.GetTempPath()
    tempFilename = Path.GetTempFileName()
    
    #Export TablePlot data to the temp file
    tp = visDT.As[TablePlot]()
    writer = StreamWriter(tempFilename)
    tp.ExportText(writer)
    
    #Build the table
    sb = StringBuilder()
    
    #Open the temp file for reading
    f = open(tempFilename)
    
    #add some scripting magic from CDN
    html = '<h1 align=center> Page Title</h1><div style="display:none;width:800px" id="dialog2">  <button id="btnForm">Export</button><pre id="myForm"  ><div style="display:block">'
    
    
    
    
    #build the html table
    html += " <TABLE id='myTable' class='Test'>\n"
    html += "<THEAD>"
    html += " <TR><TH>"
    html += " </TH><TH>".join(f.readline().split("\t")).strip()
    html += " </TH></TR>"
    html += "</THEAD>\n"
    html += "<TBODY>\n"
    
    for line in f:
       html += "<TR><TD>"
       html += "</TD><TD>".join(line.split("\t")).strip()
       html += "</TD></TR>\n"
    f.close()
    html += "</TBODY>\n"
    html += "</TABLE>\n</pre></div></div><div align=center> <button id='myAlertButton2' style='border:3px outset #4d148c;background:#ff6600'  >Double Click Here To View Details</button></div>"
    
    
    ta.HtmlContent = html
     

    A javascript is added to the Text Area for Exporting the HTML table 

    //tell buttons what to do when clicked
    $("#myAlertButton2").click(showDialog2)
    
    function showDialog2(){ 
       //change the title attribute since we can't in html editor
    		
    	  //$("#dialog2").prop({title:'Dialog Example'}).dialog(); 	  
    	  //$("#dialog2").prop({innerHTML:document.getElementById("myForm").innerHTML}).dialog();
    	  //console.log(document.getElementById("dialog2").innerHTML)
    	  
    	  $("#dialog2").dialog(	  {
            title:'Dialog Example',		
            close: function(event, ui)
            {
                $(this).dialog("destroy");
                
            }
        });
    	
    	$("#dialog2").dialog( "option", "width", 900 );
    	
    	  
    }
    
    
    
    
    
    
    var html = document.querySelector("table").outerHTML;
    var filename = "table.csv"
    
    
    
    
    
    $("#btnForm").button().on('click',function(){	
     //dlg.dialog( "open" );
     export_table_to_csv1(html, filename);
    });
    
    
    
    
    function download_csv(csv, filename) {
        var csvFile;
        var downloadLink;
    
        // CSV FILE
        csvFile = new Blob([csv], {type: "text/csv"});
    
        // Download link
        downloadLink = document.createElement("a");
    
        // File name
        downloadLink.download = filename;
    
        // We have to create a link to the file
        downloadLink.href = window.URL.createObjectURL(csvFile);
    
        // Make sure that the link is not displayed
        downloadLink.style.display = "none";
    
        // Add the link to your DOM
        document.body.appendChild(downloadLink);
    
        // Lanzamos
        downloadLink.click();
    }
    
    function export_table_to_csv1(html, filename) {
    	var csv = [];
    	var rows = document.querySelectorAll("table tr");
    	
        for (var i = 0; i < rows.length; i++) {
    		var row = [], cols = rows[i].querySelectorAll("td, th");
    		
            for (var j = 0; j < cols.length; j++) 
                row.push(cols[j].innerText);
            
    		csv.push(row.join(","));		
    	}
    
        // Download CSV
        download_csv(csv.join("\n"), filename);
    }


    This can be modified to fit the user's needs.  

    See also: writing-files-and-databases-spotfire 

    download_csv_button.dxp

     

     


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...