Spaces:
Running
Running
| <html><head><base href="https://websim.ai/c/graph" /><title>CSV to Graph - WebSim Analytics</title><style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f0f4f8; | |
| } | |
| h1, h2 { | |
| color: #2c3e50; | |
| } | |
| .container { | |
| background-color: #ffffff; | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| #csvInput { | |
| width: 100%; | |
| height: 150px; | |
| margin-bottom: 20px; | |
| } | |
| #graphContainer { | |
| width: 100%; | |
| height: 500px; | |
| } | |
| .button { | |
| background-color: #3498db; | |
| color: #ffffff; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| .button:hover { | |
| background-color: #2980b9; | |
| } | |
| </style> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| </head><body> | |
| <div class="container"> | |
| <h1>CSV to Graph - WebSim Analytics</h1> | |
| <p>Transform your CSV data into beautiful, interactive graphs with our WebSim Analytics tool. Simply paste your CSV data below and click "Generate Graph" to visualize your data instantly.</p> | |
| <h2>Input Your CSV Data</h2> | |
| <textarea id="csvInput" placeholder="Paste your CSV data here..."></textarea> | |
| <button id="generateGraph" class="button">Generate Graph</button> | |
| <div id="graphContainer"></div> | |
| <h2>How to Use</h2> | |
| <ol> | |
| <li>Paste your CSV data into the text area above. The first row should contain column headers.</li> | |
| <li>Click the "Generate Graph" button to create your visualization.</li> | |
| <li>Interact with the graph: zoom, pan, and hover over data points for more information.</li> | |
| </ol> | |
| <h2>Features</h2> | |
| <ul> | |
| <li>Automatic detection of data types (numeric, date, categorical)</li> | |
| <li>Smart selection of appropriate chart types based on your data</li> | |
| <li>Interactive graphs with zoom, pan, and hover functionality</li> | |
| <li>Export options for PNG, SVG, and interactive HTML</li> | |
| </ul> | |
| <p>Need help or have questions? Check out our <a href="https://websim.ai/docs/analytics">documentation</a> or <a href="https://websim.ai/support">contact support</a>.</p> | |
| </div> | |
| <script> | |
| document.getElementById('generateGraph').addEventListener('click', function() { | |
| const csvData = document.getElementById('csvInput').value; | |
| const parsedData = parseCSV(csvData); | |
| createGraph(parsedData); | |
| }); | |
| function parseCSV(csv) { | |
| const lines = csv.split('\n'); | |
| const headers = lines[0].split(','); | |
| const data = []; | |
| for (let i = 1; i < lines.length; i++) { | |
| const values = lines[i].split(','); | |
| if (values.length === headers.length) { | |
| const row = {}; | |
| for (let j = 0; j < headers.length; j++) { | |
| row[headers[j]] = values[j]; | |
| } | |
| data.push(row); | |
| } | |
| } | |
| return { headers, data }; | |
| } | |
| function createGraph(parsedData) { | |
| const { headers, data } = parsedData; | |
| // Determine data types | |
| const dataTypes = headers.map(header => { | |
| const values = data.map(row => row[header]); | |
| if (values.every(value => !isNaN(value))) return 'numeric'; | |
| if (values.every(value => !isNaN(Date.parse(value)))) return 'date'; | |
| return 'categorical'; | |
| }); | |
| // Choose appropriate chart type | |
| let chartType, xAxis, yAxis; | |
| if (dataTypes.includes('date')) { | |
| chartType = 'scatter'; | |
| xAxis = headers[dataTypes.indexOf('date')]; | |
| yAxis = headers.find((header, index) => dataTypes[index] === 'numeric'); | |
| } else if (dataTypes.filter(type => type === 'numeric').length >= 2) { | |
| chartType = 'scatter'; | |
| xAxis = headers[dataTypes.indexOf('numeric')]; | |
| yAxis = headers[dataTypes.lastIndexOf('numeric')]; | |
| } else { | |
| chartType = 'bar'; | |
| xAxis = headers[dataTypes.indexOf('categorical')]; | |
| yAxis = headers[dataTypes.indexOf('numeric')]; | |
| } | |
| // Prepare plot data | |
| const plotData = [{ | |
| x: data.map(row => row[xAxis]), | |
| y: data.map(row => row[yAxis]), | |
| type: chartType, | |
| mode: 'lines+markers' | |
| }]; | |
| // Set up layout | |
| const layout = { | |
| title: `${yAxis} vs ${xAxis}`, | |
| xaxis: { title: xAxis }, | |
| yaxis: { title: yAxis } | |
| }; | |
| // Create the plot | |
| Plotly.newPlot('graphContainer', plotData, layout); | |
| } | |
| </script> | |
| </body></html> |