{"id":317,"date":"2025-02-28T19:01:24","date_gmt":"2025-02-28T18:01:24","guid":{"rendered":"https:\/\/tendance-finance.fr\/?page_id=317"},"modified":"2025-03-01T23:07:32","modified_gmt":"2025-03-01T22:07:32","slug":"graphiques-echart","status":"publish","type":"page","link":"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/","title":{"rendered":"Graphique des Indices Boursiers"},"content":{"rendered":"\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts\/dist\/echarts.min.js\"><\/script>\n \n<br>\n    <!-- S\u00e9lection de l'Indice -->\n    <label>\n        <input type=\"radio\" name=\"index\" value=\"SP500\" checked onchange=\"updateChart()\"> SP500\n    <\/label>\n    <label>\n        <input type=\"radio\" name=\"index\" value=\"NASDAQ100\" onchange=\"updateChart()\"> NASDAQ100\n    <\/label>\n    <br>\n\n    <!-- S\u00e9lection avec ou sans dividendes -->\n    <label>\n        <input type=\"radio\" name=\"dividends\" value=\"\" checked onchange=\"updateChart()\"> Prix brut\n    <\/label>\n    <label>\n        <input type=\"radio\" name=\"dividends\" value=\"TR\" onchange=\"updateChart()\"> Total Return (TR)\n    <\/label>\n    <br>\n\n    <!-- S\u00e9lection de la dur\u00e9e -->\n    <label>\n        <input type=\"radio\" name=\"years\" value=\"5\" checked onchange=\"updateChart()\"> 5 ans\n    <\/label>\n    <label>\n        <input type=\"radio\" name=\"years\" value=\"10\" onchange=\"updateChart()\"> 10 ans\n    <\/label>\n    <label>\n        <input type=\"radio\" name=\"years\" value=\"20\" onchange=\"updateChart()\"> 20 ans\n    <\/label>\n    <br>\n\n    <!-- S\u00e9lection de la devise -->\n    <label>\n        <input type=\"radio\" name=\"currency\" value=\"USD\" checked onchange=\"updateChart()\"> USD\n    <\/label>\n    <label>\n        <input type=\"radio\" name=\"currency\" value=\"EUR\" onchange=\"updateChart()\"> EUR\n    <\/label>\n    <br>\n    <br>\n\n\n    <div style=\"display: flex; justify-content: center; margin-top: 20px; width: 100%;\">\n        <div id=\"chart\" style=\"width: 100%; max-width: 800px; height: auto; aspect-ratio: 16 \/ 10;\"><\/div>\n    <\/div>\n   \n\n    <script>\n        var myChart = echarts.init(document.getElementById('chart'));\n\n        function calculateCAGR(values, years) {\n            if (values.length < 2) return null; \/\/ Pas assez de donn\u00e9es\n\n            let V_i = values[0]; \/\/ Premi\u00e8re valeur\n            let V_f = values[values.length - 1]; \/\/ Derni\u00e8re valeur\n\n            let CAGR = ((V_f \/ V_i) ** (1 \/ years) - 1) * 100; \/\/ En pourcentage\n            return CAGR.toFixed(2); \/\/ Arrondi \u00e0 2 d\u00e9cimales\n        }\n\n        function calculateMaxDrawdown(values) {\n            if (values.length < 2) return null; \/\/ Pas assez de donn\u00e9es\n\n            let peak = values[0];\n            let drawdown = 0;\n\n            for (let i = 1; i < values.length; i++) {\n                if (values[i] > peak) {\n                    peak = values[i];\n                }\n                let currentDrawdown = -((peak - values[i]) \/ peak) * 100;\n                if (currentDrawdown < drawdown) {\n                    drawdown = currentDrawdown;\n                }\n            }\n            return drawdown.toFixed(2); \/\/ Arrondi \u00e0 2 d\u00e9cimales\n        }\n\n        function calculateValeurFinale(values){\n            let V_i = values[0]; \/\/ Premi\u00e8re valeur\n            let V_f = values[values.length - 1]; \/\/ Derni\u00e8re valeur\n            let ValeurFinale = 10000 * V_f \/ V_i\n            return ValeurFinale.toFixed(0);\n        }\n\n        function formatWithThousandSeparator(number) {\n            return number.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \".\");\n        }\n\n\n        function updateChart() {\n            var index = document.querySelector('input[name=\"index\"]:checked').value;\n            var dividends = document.querySelector('input[name=\"dividends\"]:checked').value;\n            var years = parseInt(document.querySelector('input[name=\"years\"]:checked').value);\n            var currency = document.querySelector('input[name=\"currency\"]:checked').value;\n\n            var jsonFile = index + \"_\" + currency + \"_\" + (dividends === \"\" ? \"D\" : \"A\") + \"_\" + years + \"Y.json\";\n\n            fetch(\"https:\/\/tendance-finance.fr\/json\/\" + jsonFile)\n                .then(response => response.json())\n                .then(data => {\n                    let cagrValue = calculateCAGR(data.close, years);\n                    document.getElementById(\"cagr\").innerText = (cagrValue ? cagrValue + \" %\" : \"NA\");\n\n                    let maxDrawdownValue = calculateMaxDrawdown(data.close);\n                    document.getElementById(\"recul-max\").innerText = (maxDrawdownValue ? maxDrawdownValue + \" %\" : \"NA\");\n                    \/\/document.getElementById(\"max-drawdown\").innerText = \"Recul Maximum : \" + (maxDrawdownValue ? maxDrawdownValue + \" %\" : \"Donn\u00e9es insuffisantes\");\n\n                    document.getElementById(\"indice\").innerText = index + (dividends === \"\" ? \"\" : \"-TR\")\n                    document.getElementById(\"years\").innerText = years + \" ans\";\n                    document.getElementById(\"initial\").innerText = \"10.000\" + (currency === \"EUR\" ? \" \u20ac\" : \" $\");\n                    \/\/document.getElementById(\"investissement-initial\").innerText = \"Investissement initial 10.000 \" + (currency === \"EUR\" ? \" \u20ac\" : \" $\");\n\n                    let valeurfinale = calculateValeurFinale(data.close);\n                    document.getElementById(\"final\").innerText = (valeurfinale ? formatWithThousandSeparator(valeurfinale) + (currency === \"EUR\" ? \" \u20ac\" : \" $\"): \"NA\");\n                    \/\/document.getElementById(\"valeur-finale\").innerText = \"Valeur finale \" + (valeurfinale ? formatWithThousandSeparator(valeurfinale) + (currency === \"EUR\" ? \" \u20ac\" : \" $\"): \"NA\");\n\n                    let performance = (data.close[data.close.length - 1] \/ data.close[0]).toFixed(2)\n                    document.getElementById(\"performance\").innerText = \"x \" + (performance ? performance : \"NA\");\n\n                    var options = {\n                        title: { text: `\u00c9volution de ${index} (${years} ans) en ${currency}` },\n                        tooltip: { trigger: 'axis' },\n                        xAxis: { type: 'category', data: data.index },\n                        yAxis: { type: 'value' },\n                        series: [{ name: index, type: 'line', data: data.close }]\n                    };\n                    myChart.setOption(options);\n                })\n                .catch(error => console.error(\"Erreur lors du chargement des donn\u00e9es :\", error));\n        }\n\n        \/\/ Charger le graphique par d\u00e9faut\n        updateChart();\n    <\/script>\n\n\n\n\n\n<div class=\"cell-container\">\n    <div class=\"cell\">Indice<br>\n        <p id=\"indice\" style=\"margin: 0; font-size: 30px;\">SP500<\/p>\n    <\/div>\n\n    <div class=\"cell\">Dur\u00e9e<br>\n        <p id=\"years\" style=\"margin: 0; font-size: 30px;\">&#8211; ans<\/p>\n    <\/div>\n\n    <div class=\"cell\">Initial<br>\n        <p id=\"initial\" style=\"margin: 0; font-size: 30px;\">10.000 $<\/p>\n    <\/div>\n\n    <div class=\"cell\">Final<br>\n        <p id=\"final\" style=\"margin: 0; font-size: 30px;\">&#8211; $<\/p>\n    <\/div>\n<\/div>\n<br>\n\n\n<style>\n.cell-container {\n    display: flex;\n    flex-wrap: wrap;  \/* Permet aux \u00e9l\u00e9ments de passer \u00e0 la ligne si l'espace est insuffisant *\/\n    justify-content: center; \/* Centre les cellules *\/\n    gap: 10px;\n    max-width: 800px;\n    margin: auto;\n}\n\n.cell {\n    flex: 1;\n    min-width: 150px; \/* Taille minimale d'une cellule avant de passer en colonne *\/\n    background-color: #ADD8E6;\n    text-align: center;\n    padding: 20px;\n    font-size: 20px;\n    font-weight: bold;\n    border-radius: 3px;\n    transition: background-color 0.1s;\n}\n\n.cell:hover {\n    background-color: #5FAACF;\n}\n<\/style>\n\n\n\n\n\n<p>Voici un peu de texte<\/p>\n\n\n\n<div class=\"cell-container\">\n    <div class=\"cell\">Performance<br>\n        <p id=\"performance\" style=\"margin: 0; font-size: 30px;\">x &#8211;<\/p>\n    <\/div>\n\n    <div class=\"cell\">Rdt annuel<br>\n        <p id=\"cagr\" style=\"margin: 0; font-size: 30px;\">&#8211; %<\/p>\n    <\/div>\n\n    <div class=\"cell\">Recul maximum<br>\n        <p id=\"recul-max\" style=\"margin: 0; font-size: 30px;\">&#8211; %<\/p>\n    <\/div>\n<\/div>\n\n\n\n<p>Un deuxi\u00e8me texte.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SP500 NASDAQ100 Prix brut Total Return (TR) 5 ans 10 ans 20 ans USD EUR Indice SP500 Dur\u00e9e &#8211; ans<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-317","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Graphique des Indices Boursiers - Tendance Finance<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Graphique des Indices Boursiers - Tendance Finance\" \/>\n<meta property=\"og:description\" content=\"SP500 NASDAQ100 Prix brut Total Return (TR) 5 ans 10 ans 20 ans USD EUR Indice SP500 Dur\u00e9e &#8211; ans\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/\" \/>\n<meta property=\"og:site_name\" content=\"Tendance Finance\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-01T22:07:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/index.php\\\/graphiques-echart\\\/\",\"url\":\"https:\\\/\\\/tendance-finance.fr\\\/index.php\\\/graphiques-echart\\\/\",\"name\":\"Graphique des Indices Boursiers - Tendance Finance\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/#website\"},\"datePublished\":\"2025-02-28T18:01:24+00:00\",\"dateModified\":\"2025-03-01T22:07:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/index.php\\\/graphiques-echart\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tendance-finance.fr\\\/index.php\\\/graphiques-echart\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/index.php\\\/graphiques-echart\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/tendance-finance.fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graphique des Indices Boursiers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/#website\",\"url\":\"https:\\\/\\\/tendance-finance.fr\\\/\",\"name\":\"Tendance Finance\",\"description\":\"Etude d&#039;investissements financiers\",\"publisher\":{\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tendance-finance.fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/#organization\",\"name\":\"Tendance Finance\",\"url\":\"https:\\\/\\\/tendance-finance.fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/vanfleteren.fr\\\/finance\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/cropped-9554f423-8f40-4be2-be21-bd90b253e944-1.webp\",\"contentUrl\":\"https:\\\/\\\/vanfleteren.fr\\\/finance\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/cropped-9554f423-8f40-4be2-be21-bd90b253e944-1.webp\",\"width\":512,\"height\":512,\"caption\":\"Tendance Finance\"},\"image\":{\"@id\":\"https:\\\/\\\/tendance-finance.fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Graphique des Indices Boursiers - Tendance Finance","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/","og_locale":"fr_FR","og_type":"article","og_title":"Graphique des Indices Boursiers - Tendance Finance","og_description":"SP500 NASDAQ100 Prix brut Total Return (TR) 5 ans 10 ans 20 ans USD EUR Indice SP500 Dur\u00e9e &#8211; ans","og_url":"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/","og_site_name":"Tendance Finance","article_modified_time":"2025-03-01T22:07:32+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/","url":"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/","name":"Graphique des Indices Boursiers - Tendance Finance","isPartOf":{"@id":"https:\/\/tendance-finance.fr\/#website"},"datePublished":"2025-02-28T18:01:24+00:00","dateModified":"2025-03-01T22:07:32+00:00","breadcrumb":{"@id":"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tendance-finance.fr\/index.php\/graphiques-echart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/tendance-finance.fr\/"},{"@type":"ListItem","position":2,"name":"Graphique des Indices Boursiers"}]},{"@type":"WebSite","@id":"https:\/\/tendance-finance.fr\/#website","url":"https:\/\/tendance-finance.fr\/","name":"Tendance Finance","description":"Etude d&#039;investissements financiers","publisher":{"@id":"https:\/\/tendance-finance.fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tendance-finance.fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/tendance-finance.fr\/#organization","name":"Tendance Finance","url":"https:\/\/tendance-finance.fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/tendance-finance.fr\/#\/schema\/logo\/image\/","url":"https:\/\/vanfleteren.fr\/finance\/blog\/wp-content\/uploads\/2025\/01\/cropped-9554f423-8f40-4be2-be21-bd90b253e944-1.webp","contentUrl":"https:\/\/vanfleteren.fr\/finance\/blog\/wp-content\/uploads\/2025\/01\/cropped-9554f423-8f40-4be2-be21-bd90b253e944-1.webp","width":512,"height":512,"caption":"Tendance Finance"},"image":{"@id":"https:\/\/tendance-finance.fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/pages\/317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/comments?post=317"}],"version-history":[{"count":37,"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/pages\/317\/revisions"}],"predecessor-version":[{"id":372,"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/pages\/317\/revisions\/372"}],"wp:attachment":[{"href":"https:\/\/tendance-finance.fr\/index.php\/wp-json\/wp\/v2\/media?parent=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}