jacksongoode
commented
2 weeks ago Try some of this code...
function getTime() {
const time = window
.grafanaRuntime
.getDashboardTimeRange();
const fromStr = new Date(time.from).toLocaleDateString("en-GB");
const toStr = new Date(time.to).toLocaleDateString("en-GB");
return [fromStr, toStr];
}
function downloadCSV(data, name, time) {
// Create Blob from CSV data and download
const csv = convertToCSV(data);
const blob = new Blob([csv], {type: "text/csv;charset=utf-8;"});
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
const [fromStr, toStr] = time;
const filename = stuff.csv`;
a.download = filename;
a.click();
// Revoke the Object URL
URL.revokeObjectURL(a.href);
}
const time = getTime();
const data = window
.grafanaRuntime
.getPanelData();
const fields = data[selectedId]
.series[0]
.fields;
downloadCSV(fields, selectedName, time);
alexl04
Hi,
I was wondering if it is possible to add a download button to a plotly panel in Grafana. I was able to add the button , but it doesn't allow me to actually download the data.
Am I doing something wrong or is there an other way to add a download button?
Example script (provided by GPT): // Access the fields let time = [ 1696003200000, // 2023-09-30 00:00:00 1696006800000, // 2023-09-30 01:00:00 1696010400000, // 2023-09-30 02:00:00 1696014000000, // 2023-09-30 03:00:00 1696017600000, // 2023-09-30 04:00:00 1696021200000 // 2023-09-30 05:00:00 ];
// Hardcoded test data (some random values) let test = [5.1, 6.3, 4.8, 7.2, 8.0, 6.7];
// Prepare CSV data function generateCSV() { let csvRows = ["Time,test"]; for (let i = 0; i < time.length; i++) { const row = [ new Date(time[i]).toISOString(), // Format timestamp as ISO string pitch[i]?.toFixed(2) ]; csvRows.push(row.join(",")); } return csvRows.join("\n"); }
// Download CSV function function downloadCSV() { const csvData = generateCSV(); const blob = new Blob([csvData], { type: "text/csv" }); const url = URL.createObjectURL(blob);
}
// Set up the trace let tracetest = { x: time.map(t => new Date(t)), // Convert time to Date objects for proper formatting y: test, mode: 'lines', name:
test};// Define updatemenus with a pseudo-download button that triggers the downloadCSV function var updatemenus = [{ type: 'buttons', buttons: [ { label: 'Download Data as CSV', method: 'relayout', // Dummy method args: [{}, {downloadCSV: true}] // Pass a custom argument } ], direction: 'right', pad: {'r': 10, 't': 10}, showactive: false, x: 0.15, xanchor: 'left', y: 1.2, yanchor: 'top' }];
// Define layout let layout = { title: 'test Data Over Time', xaxis: { autorange: true }, yaxis: { title: 'test', autorange: true }, updatemenus: updatemenus };
// Add a listener to call downloadCSV if the button is clicked document.addEventListener('plotly_relayout', (event) => { if (event.detail && event.detail.downloadCSV) { downloadCSV(); } });
// Return the data and layout for the plot return { data: [tracetest], layout };