Data Visualization
Générer des graphiques de flux fluides pour visualiser le flux de données de séries temporelles, parfait pour montrer les changements de composition au fil du temps avec des formes organiques et fluides
Appelez cet outil depuis votre code en trois langages.
curl -X POST 'https://api.elysiatools.com/fr/api/tools/stream-graph' \
-H 'Content-Type: application/json' \
-d '{"chartData":"Multi-series time-series JSON:\n{"labels": ["Jan", "Feb", "Mar", "Apr", "May"],\n "series": [\n {"name": "Desktop", "data": [120, 135, 125, 140, 155]},\n {"name": "Mobile", "data": [80, 95, 110, 125, 140]},\n {"name": "Tablet", "data": [40, 45, 50, 48, 52]}\n ]\n}","chartTitle":"Entrez le titre du graphique...","colorScheme":"default","streamColors":"#3b82f6,#10b981,#f59e0b","streamOpacity":"0.7","curveSmoothness":"0.5","backgroundColor":"#ffffff","gridColor":"#e8e9ea","chartHeight":"500","maxValue":0,"minValue":"0","xAxisLabel":"Time","yAxisLabel":"Value","showGrid":true,"showValues":false,"showDataLabels":true,"normalizeData":false,"showLegend":true}'Envoyez une requête POST avec vos entrées en JSON. Les paramètres de type fichier nécessitent un upload préalable.
POST https://api.elysiatools.com/fr/api/tools/stream-graph| Nom | Type | Requis | Description |
|---|---|---|---|
| chartData | textarea | Oui | Données de séries temporelles pour le graphique de flux. Chaque série représente une couche fluide au fil du temps. |
| chartTitle | text | Non | Titre qui sera affiché au-dessus du graphique |
| colorScheme | select | Non | — |
| streamColors | text | Non | Couleurs personnalisées pour les flux (couleurs hex séparées par des virgules). Remplace le schéma de couleurs si fourni. |
| streamOpacity | number | Non | Opacité des couches de flux (0.1 à 1.0) |
| curveSmoothness | number | Non | Fluidité des courbes de flux (0.1 à 1.0, plus élevé = plus fluide) |
| backgroundColor | color | Non | Couleur de fond pour le conteneur du graphique |
| gridColor | color | Non | Couleur pour les lignes de grille |
| chartHeight | number | Non | Hauteur du graphique en pixels |
| maxValue | number | Non | Valeur maximale pour l'axe Y (laissez vide pour échelle automatique) |
| minValue | number | Non | Valeur minimale pour l'axe Y |
| xAxisLabel | text | Non | Étiquette pour l'axe X (typiquement temps) |
| yAxisLabel | text | Non | Étiquette pour l'axe Y |
| showGrid | checkbox | Non | Afficher les lignes de grille pour une meilleure lisibilité |
| showValues | checkbox | Non | Afficher les valeurs dans les couches de flux |
| showDataLabels | checkbox | Non | Afficher les étiquettes de données aux points clés |
| normalizeData | checkbox | Non | Convertir les valeurs en pourcentages montrant la contribution relative au fil du temps |
| showLegend | checkbox | Non | Afficher une légende sous le graphique |
Résultat HTML
{
"result": "<div>Processed HTML content</div>",
"error": "Error message (optional)",
"message": "Notification message (optional)",
"metadata": {
"key": "value"
}
}Ajoutez cet outil à votre serveur Model Context Protocol pour que les agents IA puissent le lister et l'appeler.
Ajoutez ce bloc à la configuration de votre client MCP :
{
"mcpServers": {
"elysiatools-stream-graph": {
"name": "stream-graph",
"description": "Générer des graphiques de flux fluides pour visualiser le flux de données de séries temporelles, parfait pour montrer les changements de composition au fil du temps avec des formes organiques et fluides",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=stream-graph",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}Après connexion au point d'accès SSE, listez les outils exposés :
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}Appelez l'outil par son id ; les arguments sont construits à partir de ses paramètres :
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "stream-graph",
"arguments": {
"chartData": "Multi-series time-series JSON:\n{"labels": ["Jan", "Feb", "Mar", "Apr", "May"],\n "series": [\n {"name": "Desktop", "data": [120, 135, 125, 140, 155]},\n {"name": "Mobile", "data": [80, 95, 110, 125, 140]},\n {"name": "Tablet", "data": [40, 45, 50, 48, 52]}\n ]\n}",
"chartTitle": "Entrez le titre du graphique...",
"colorScheme": "default",
"streamColors": "#3b82f6,#10b981,#f59e0b",
"streamOpacity": "0.7",
"curveSmoothness": "0.5",
"backgroundColor": "#ffffff",
"gridColor": "#e8e9ea",
"chartHeight": "500",
"maxValue": 0,
"minValue": "0",
"xAxisLabel": "Time",
"yAxisLabel": "Value",
"showGrid": true,
"showValues": false,
"showDataLabels": true,
"normalizeData": false,
"showLegend": true
}
}
}Des questions ou un problème ? Contactez [email protected]