diff --git a/testApi/src/main/java/com/example/testapi/controller/ApiController.java b/testApi/src/main/java/com/example/testapi/controller/ApiController.java
index f30a411294720dd0cdb10ea5f4e6e70e65b75168..403533c93f25419aeddd8b33efed1ba34df0ea97 100644
--- a/testApi/src/main/java/com/example/testapi/controller/ApiController.java
+++ b/testApi/src/main/java/com/example/testapi/controller/ApiController.java
@@ -1,12 +1,17 @@
 package com.example.testapi.controller;
 
+import com.example.testapi.model.Candle;
 import com.example.testapi.model.DateRange;
+import com.example.testapi.model.Price;
 import com.example.testapi.service.ApiService;
 import com.example.testapi.service.SimulateurService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.Collections;
+import java.util.List;
 import java.util.Map;
 
 @RestController
@@ -26,10 +31,15 @@ public class ApiController {
     }
 
     @GetMapping("/btcusdt")
-    public String getGraphPage() throws InterruptedException, com.fasterxml.jackson.core.JsonProcessingException {
-        System.out.println("btc to usdt graphique !");
+    public ResponseEntity<?> getCandlesData() throws InterruptedException, com.fasterxml.jackson.core.JsonProcessingException {
+        System.out.println("GET /btcusdt");
 //        System.out.println(apiService.getCandlesJson());
-        return apiService.getCandlesJson(dateRange.getTimestampStartDate(), dateRange.getTimestampEndDate());
+        List<Candle> candles = apiService.getCandles(dateRange.getTimestampStartDate(), dateRange.getTimestampEndDate());
+        if (candles == null) {
+            return ResponseEntity.status(HttpStatus.SERVICE_UNAVAILABLE).body("Impossible de récupérer les données de l'API Binance.");
+        }
+        return ResponseEntity.ok(candles);
+//        return candles;
     }
 
     @PostMapping("/sendDates")
@@ -43,10 +53,16 @@ public class ApiController {
     public void testSomeFonctionnalities() {
         this.simulateur.startSimulation();
         long[] x_tab = {};
-        float[] y = new float[4];
+        double[] y = new double[4];
         this.simulateur.approximatePrice(x_tab, y, 3);
     }
 
+    @GetMapping("/prices")
+    public List<Price> getPrices() {
+        System.out.println("GET /prices");
+        return this.simulateur.getPricesForPeriod(this.dateRange);
+    }
+
     @GetMapping("/stopSimu")
     public void stopSimulation() {
         this.simulateur.stopSimulation();
@@ -54,13 +70,9 @@ public class ApiController {
 
     @GetMapping("/test")
     public void test() {
-        long[] x_tab = {1, -1, 2, 2};
-        float[] y = {3, 2, -1, -1};
-        this.simulateur.approximatePrice(x_tab, y, 3);
+        long[] x_tab = {1, -1, 2};
+        double[] y = {3, 2, -1};
+        this.simulateur.approximatePrice(x_tab, y, 2);
     }
-
-
-
-
 }
 
diff --git a/testApi/src/main/java/com/example/testapi/controller/PageApiController.java b/testApi/src/main/java/com/example/testapi/controller/PageApiController.java
index 06674827c4a2965f49797128829bf522545ca5f3..ecf96136be23aee3d7e5905db7f79b8fade5b212 100644
--- a/testApi/src/main/java/com/example/testapi/controller/PageApiController.java
+++ b/testApi/src/main/java/com/example/testapi/controller/PageApiController.java
@@ -14,7 +14,7 @@ public class PageApiController {
 
     }
 
-    @GetMapping("/home")
+    @GetMapping("/")
     public String getHomePage() {
         System.out.println("home page requested !");
         return "index.html";
diff --git a/testApi/src/main/java/com/example/testapi/model/Candle.java b/testApi/src/main/java/com/example/testapi/model/Candle.java
index 799b7108b2befbe42b55f5814c827d883841de8d..58aba428e8767014aff7ee475a9d2d8c37a93b91 100644
--- a/testApi/src/main/java/com/example/testapi/model/Candle.java
+++ b/testApi/src/main/java/com/example/testapi/model/Candle.java
@@ -7,6 +7,7 @@ public class Candle {
     private final double high;
     private final double low;
     private final double close;
+
 //    private final long closeTime;
 //    private double volume;
 //    private double assetVolume;
@@ -15,12 +16,13 @@ public class Candle {
 //    private double buyQuoteAssetVolume;
 
 
-    public Candle(long openTime, double openPrice, double highPrice, double lowPrice, double closePrice) {
+    public Candle(long openTime, double openPrice, double highPrice, double lowPrice, double closePrice, long closeTime) {
         this.time = openTime/1000;
         this.open = openPrice;
         this.high = highPrice;
         this.low = lowPrice;
         this.close = closePrice;
+//        this.closeTime = closeTime;
     }
 
     public long getTime() {
@@ -42,4 +44,8 @@ public class Candle {
     public double getClose() {
         return close;
     }
+
+//    public long getCloseTime() {
+//        return closeTime;
+//    }
 }
diff --git a/testApi/src/main/java/com/example/testapi/model/Interval.java b/testApi/src/main/java/com/example/testapi/model/Interval.java
index eb73c65d1f0a8bb6d5d7a11ddecbc65d036460c7..0200a8daf0e46319f1942eaada4141ba9f51ad0d 100644
--- a/testApi/src/main/java/com/example/testapi/model/Interval.java
+++ b/testApi/src/main/java/com/example/testapi/model/Interval.java
@@ -3,6 +3,7 @@ package com.example.testapi.model;
 
 
 public class Interval {
+    // delta du temps de la bougie par rapport au timestamp de la bougie courante (ex : t+1000, t+2000, ...)
     private int deltaTime;
     private Candle currentCandle;
 
@@ -19,7 +20,7 @@ public class Interval {
         return deltaTime;
     }
 
-    public void updateDeltaTime() {
+    public void nextSecond() {
         this.deltaTime += 1000;
     }
 
diff --git a/testApi/src/main/java/com/example/testapi/model/Price.java b/testApi/src/main/java/com/example/testapi/model/Price.java
new file mode 100644
index 0000000000000000000000000000000000000000..c89205d7ddf6b6e175b0cb925c669ac368aedc92
--- /dev/null
+++ b/testApi/src/main/java/com/example/testapi/model/Price.java
@@ -0,0 +1,19 @@
+package com.example.testapi.model;
+
+public class Price {
+    private final long time;
+    private final double value;
+
+    public Price(long time, double value) {
+        this.time = time;
+        this.value = value;
+    }
+
+    public long getTime() {
+        return time;
+    }
+
+    public double getValue() {
+        return value;
+    }
+}
diff --git a/testApi/src/main/java/com/example/testapi/service/ApiService.java b/testApi/src/main/java/com/example/testapi/service/ApiService.java
index a9e54d1acb1f9543207369c40a1d24eab2ad999a..ddb2ea7ec5d15787c07d5675567349f04e406929 100644
--- a/testApi/src/main/java/com/example/testapi/service/ApiService.java
+++ b/testApi/src/main/java/com/example/testapi/service/ApiService.java
@@ -11,7 +11,7 @@ import org.springframework.web.util.UriComponentsBuilder;
 
 import java.util.ArrayList;
 import java.util.List;
-
+import java.util.Optional;
 
 @Service
 public class ApiService {
@@ -20,9 +20,11 @@ public class ApiService {
     }
 
     @Autowired
-    private RestTemplate restTemplate;
+    private final RestTemplate restTemplate;
+
+//    private List<Candle> candles;
 
-    private List<Candle> candles;
+    private final SimulateurService simulateurService;
 
     private String candlesJson;
 
@@ -30,68 +32,97 @@ public class ApiService {
 
     private static final long TIME_10_JOURS = 10 * 24 * 60 * 60 * 1000;
 
+
+    @Autowired
+    public ApiService(SimulateurService simulateurService, RestTemplate restTemplate) {
+        this.simulateurService = simulateurService;
+        this.restTemplate = restTemplate;
+    }
+
     public List<Candle> getCandles() {
-        return candles;
+        return this.simulateurService.getCandles();
     }
 
-    public void getCandles(long startTime, long endTime) throws InterruptedException, com.fasterxml.jackson.core.JsonProcessingException {
+    private Optional<List<List<Object>>> getCandlesFromAPI(long startTime, long endTime) throws InterruptedException, com.fasterxml.jackson.core.JsonProcessingException {
         if (endTime < startTime) {
             System.out.println("La date de fin ne peut pas être avant la date de début");
-            return;
+            return Optional.empty();
         }
-        List<Candle> candles = new ArrayList<Candle>();
-        int nbreq = 0;
-        while (startTime < endTime)
-        {
+        try {
+            List<List<Object>> jsonCandles = null;
+            while (startTime < endTime)
+            {
 //            System.out.println("Nb req API binance : " + nbreq);
 //            nbreq++;
-            long currEndTime = Math.min(startTime + TIME_10_JOURS + 1, endTime);
-            String url = UriComponentsBuilder.fromHttpUrl(baseUrl)
-                    .queryParam("symbol", "BTCUSDT")
-                    .queryParam("interval", "15m")
-                    .queryParam("startTime", startTime)
-                    .queryParam("endTime", currEndTime)
-                    .queryParam("limit", 1000)
-                    .toUriString();
-            String response = restTemplate.getForObject(url, String.class);
-
-            ObjectMapper objectMapper = new ObjectMapper();
-            List<List<Object>> jsonCandles = objectMapper.readValue(response, new TypeReference<List<List<Object>>>() {});
-
-
-            for (List<Object> jsonCandle : jsonCandles) {
-                candles.add(new Candle(
-                        Long.parseLong(jsonCandle.get(0).toString()),
-                        Double.parseDouble(jsonCandle.get(1).toString()),
-                        Double.parseDouble(jsonCandle.get(2).toString()),
-                        Double.parseDouble(jsonCandle.get(3).toString()),
-                        Double.parseDouble(jsonCandle.get(4).toString())
-                ));
-            }
+                long currEndTime = Math.min(startTime + TIME_10_JOURS + 1, endTime);
+                String url = UriComponentsBuilder.fromHttpUrl(baseUrl)
+                        .queryParam("symbol", "BTCUSDT")
+                        .queryParam("interval", "15m")
+                        .queryParam("startTime", startTime)
+                        .queryParam("endTime", currEndTime)
+                        .queryParam("limit", 1000)
+                        .toUriString();
+                String response = restTemplate.getForObject(url, String.class);
+
+                ObjectMapper objectMapper = new ObjectMapper();
+                jsonCandles = objectMapper.readValue(response, new TypeReference<List<List<Object>>>() {});
+
 //            System.out.println("Response n°" + i + ": " + response);
 //            Thread.sleep(10);
-            // avancer de 1000 * 15 minutes * 60 pour convertir en secondes et * 1000 pour millisecondes
+                // avancer de 1000 * 15 minutes * 60 pour convertir en secondes et * 1000 pour millisecondes
 //            System.out.println(startTime + " " + currEndTime);
-            startTime += TIME_10_JOURS + 1;
+                startTime += TIME_10_JOURS + 1;
+            }
+            if (jsonCandles != null) {
+                return Optional.of(jsonCandles);
+            }
+        } catch (Exception e) {
+            System.err.println("Erreur récupération des candles : " + e.getMessage());
+            return Optional.empty();
         }
+//        this.simulateurService.setCandles(candles);
+        return Optional.empty();
+    }
 
-        this.candles = candles;
+    private List<Candle> deserializeCandles(List<List<Object>> jsonCandles) {
+        List<Candle> candles = new ArrayList<>();
+        for (List<Object> jsonCandle : jsonCandles) {
+            candles.add(new Candle(
+                    Long.parseLong(jsonCandle.get(0).toString()),
+                    Double.parseDouble(jsonCandle.get(1).toString()),
+                    Double.parseDouble(jsonCandle.get(2).toString()),
+                    Double.parseDouble(jsonCandle.get(3).toString()),
+                    Double.parseDouble(jsonCandle.get(4).toString()),
+                    Long.parseLong(jsonCandle.get(6).toString())
+            ));
+        }
+        return candles;
     }
 
-    public String getCandlesJson(long startDate, long endDate) throws InterruptedException, com.fasterxml.jackson.core.JsonProcessingException {
+    public List<Candle> getCandles(long startDate, long endDate) throws InterruptedException, com.fasterxml.jackson.core.JsonProcessingException {
         ObjectMapper objectMapper = new ObjectMapper();
-//        if (this.candles == null || this.candles.isEmpty()) {
-//            this.getCandles(startDate, endDate);
-//        }
+        if (this.simulateurService.getCandles() == null || this.simulateurService.getCandles().isEmpty()) {
+            System.out.println("init list candles");
+            Optional<List<List<Object>>> optJsonCandles = this.getCandlesFromAPI(startDate, endDate);
+            List<List<Object>> jsonCandles = optJsonCandles.orElse(null);
+            if (jsonCandles != null) {
+                this.simulateurService.setCandles(deserializeCandles(jsonCandles));
+            }
+            else {
+                return null;
+            }
+        }
 //        if (this.candlesJson == null) {
-//            this.candlesJson = objectMapper.writeValueAsString(this.candles);
+//            this.candlesJson = objectMapper.writeValueAsString(this.simulateurService.getCandles());
+//            System.out.println(this.candlesJson);
 //        }
-        this.getCandles(startDate, endDate);
-        this.candlesJson = objectMapper.writeValueAsString(this.candles);
-        return this.candlesJson;
+//        this.initCandles(startDate, endDate);
+//        this.candlesJson = objectMapper.writeValueAsString(this.simulateurService.getCandles());
+        return this.simulateurService.getCandles();
 
     }
 
-
-
+//    public String candlesToJson(long startDate, long endDate) throws InterruptedException, com.fasterxml.jackson.core.JsonProcessingException {
+//
+//    }
 }
diff --git a/testApi/src/main/java/com/example/testapi/service/SimulateurService.java b/testApi/src/main/java/com/example/testapi/service/SimulateurService.java
index 31d958aadfd9be1cad606d8b4add0dda87ed8d7f..96f180ceebba62229613c69d10b7336d513bda5c 100644
--- a/testApi/src/main/java/com/example/testapi/service/SimulateurService.java
+++ b/testApi/src/main/java/com/example/testapi/service/SimulateurService.java
@@ -1,34 +1,53 @@
 package com.example.testapi.service;
 
 import com.example.testapi.model.Candle;
+import com.example.testapi.model.DateRange;
 import com.example.testapi.model.Interval;
+import com.example.testapi.model.Price;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 
+import java.util.ArrayList;
 import java.util.List;
+import java.util.Random;
 import java.util.function.Function;
 import java.util.function.LongConsumer;
 
 @Service
 public class SimulateurService {
-    private final ApiService apiService;
     private Ticker ticker;
     private int periodApproximationSec;
-    private Interval interval;
+//    private Interval interval;
     private List<Candle> candles;
     private int indexCurrCandle;
+    private List<Price> prices;
+    private Random rnd;
 
-    public SimulateurService(@Value("${simulateur.ApproximationPeriod}") int periodApproximationSec, ApiService apiService) {
+    public List<Candle> getCandles() {
+        return candles;
+    }
+
+    public void setCandles(List<Candle> candles) {
+        this.candles = candles;
+    }
+
+    public SimulateurService(@Value("${simulateur.ApproximationPeriod}") int periodApproximationSec) {
         this.periodApproximationSec = periodApproximationSec;
-        Runnable task = () -> System.out.println("Print après " + this.periodApproximationSec + " sec");
-        this.ticker = new Ticker(task);
-        this.apiService = apiService;
-        this.candles = apiService.getCandles();
+//        Runnable task = () -> System.out.println("Print après " + this.periodApproximationSec + " sec");
+//        this.ticker = new Ticker(this::taskEachSec);
+//        this.apiService = apiService;
         this.indexCurrCandle = 0;
-        this.interval = new Interval(this.candles.get(this.indexCurrCandle));
+        this.prices = new ArrayList<>();
+        this.rnd = new Random();
+    }
+
+    public List<Price> getPrices() {
+        return prices;
     }
 
     public void startSimulation() {
+//        this.candles = apiService.getCandles();
+//        this.interval = new Interval(this.candles.get(this.indexCurrCandle));
         this.ticker.start(this.periodApproximationSec);
     }
 
@@ -36,8 +55,15 @@ public class SimulateurService {
         this.ticker.stop();
     }
 
-    public double approximatePrice(long[] x_tab, float[] y, long x) {
-        double res = 0.0;
+    /**
+     * Permet de faire une approximation
+     * @param x_tab
+     * @param y
+     * @param x dans notre cas représente le "temps"
+     * @return la valeur de l'approximation du prix
+     */
+    public Price approximatePrice(long[] x_tab, double[] y, long x) {
+        double value = 0.0;
         int n = x_tab.length;
         for (int i = 0; i < n; i++) {
             double tmp = y[i];
@@ -46,19 +72,78 @@ public class SimulateurService {
                     tmp *= (double) (x - x_tab[j]) / (x_tab[i] - x_tab[j]);
                 }
             }
-            res += tmp;
+            value += tmp;
         }
-        System.out.println("res approx : " + res);
-        return res;
+        System.out.println("x : " + x);
+        System.out.println("res approx : " + value);
+        return new Price(x, value);
     }
 
-    public void taskEachSec() {
-        long x = interval.getCurrentCandle().getTime() + this.interval.getDeltaTime();
-        long[] x_tab = {};
-        float[] y = {};
-        this.approximatePrice(x_tab, y, x);
+    /**
+     *
+     * currentTimestamp la seconde actuelle
+     * timestamps générer 4 timestamps random dans l'intervalle de 15 min pour OHLC
+     * priceOHLC valeur de OHLC
+     * @param interval
+     */
+    public void taskEachSec(Interval interval) {
+//        long x = interval.getCurrentCandle().getTime() + this.interval.getDeltaTime();
+//        long[] x_tab = {};
+//        float[] y = {};
+//        this.prices.add(this.approximatePrice(x_tab, y, x));
+//        interval.updateDeltaTime();
+//        System.out.println("delta time : " + x);
+        Candle currentCandle = interval.getCurrentCandle();
+        long currentTimestamp = currentCandle.getTime() + interval.getDeltaTime();
+        long[] timestamps = generateRandomTimstamps(4, currentCandle.getTime(), currentCandle.getTime() + 15 * 60 * 1000 - 1);
+        double[] priceOHLC = randomPositionsOHLC(currentCandle);
+        this.prices.add(this.approximatePrice(timestamps, priceOHLC, currentTimestamp));
+        interval.nextSecond();
+        System.out.println("delta time : " + currentTimestamp);
+    }
 
-        interval.updateDeltaTime();
+    public double[] randomPositionsOHLC(Candle currentCandle) {
+        double[] priceOHLC = new double[4];
+        priceOHLC[0] = currentCandle.getOpen();
+        if (this.rnd.nextBoolean()) {
+            priceOHLC[1] = currentCandle.getHigh();
+            priceOHLC[2] = currentCandle.getLow();
+        }
+        else {
+            priceOHLC[1] = currentCandle.getLow();
+            priceOHLC[2] = currentCandle.getHigh();
+        }
+        priceOHLC[3] = currentCandle.getClose();
+        return priceOHLC;
     }
 
+    public long[] generateRandomTimstamps(int nbTimestampToGenerate, long startTimestamp, long endTimestamp) {
+        long[] timestamps = new long[nbTimestampToGenerate];
+        for (int i = 0; i < nbTimestampToGenerate; i++) {
+            timestamps[i] = generateRandomTimstamp(startTimestamp, endTimestamp);
+        }
+        return timestamps;
+    }
+
+    public long generateRandomTimstamp(long startTimestamp, long endTimestamp) {
+        return this.rnd.nextLong(endTimestamp - startTimestamp + 1) + startTimestamp;
+    }
+
+    public List<Price> getPricesForPeriod(DateRange period) {
+        final int nbTimestamp15Min = 15 * 60;
+        long endTime = period.getTimestampEndDate();
+        int indexCurrentCandle = 0;
+        Candle currentCandle = candles.get(indexCurrentCandle);
+        Interval interval = new Interval(currentCandle);
+        while (interval.getCurrentCandle().getTime() < endTime) {
+            // Boucle qui simule 15 min
+            for (int i = 0; i < nbTimestamp15Min; i++) {
+                taskEachSec(interval);
+            }
+            indexCurrentCandle++;
+            currentCandle = candles.get(indexCurrentCandle);
+            interval = new Interval(currentCandle);
+        }
+        return this.prices;
+    }
 }
diff --git a/testApi/src/main/resources/static/affichageDataGraph.html b/testApi/src/main/resources/static/affichageDataGraph.html
index 5f028bc5dc2f4e4a9c92689b07e6130775cf8c65..a05dd7b2cd3e94351a5a27961907fe05256dccc4 100644
--- a/testApi/src/main/resources/static/affichageDataGraph.html
+++ b/testApi/src/main/resources/static/affichageDataGraph.html
@@ -10,8 +10,9 @@
     <h1>Test</h1>
     <div id="container"></div>
 </body>
-<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.development.js"></script>
+<!-- <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.development.js"></script> -->
 <!-- <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script> -->
-<script src="/js/graph.js"></script>
-<script src="/js/api.js"></script>
+<!-- <script src="/node_modules/lightweight-charts/dist/lightweight-charts.standalone.development.js"></script> -->
+<script type="module" src="/js/graph.js"></script>
+<script type="module" src="/js/api.js"></script>
 </html>
\ No newline at end of file
diff --git a/testApi/src/main/resources/static/index.html b/testApi/src/main/resources/static/index.html
index df8c1f42ab7db43da22af788e971717eccc4b23d..167c10224c2dc348b51f276a20baa82aaa50b85f 100644
--- a/testApi/src/main/resources/static/index.html
+++ b/testApi/src/main/resources/static/index.html
@@ -16,6 +16,6 @@
         <input type="button" value="Afficher le graphique" id="formBtn">
     </form>
 </body>
-<script src="./js/index.script.js"></script>
-<script src="./js/api.js"></script>
+<script type="module" src="./js/index.script.js"></script>
+<script type="module" src="./js/api.js"></script>
 </html>
\ No newline at end of file
diff --git a/testApi/src/main/resources/static/js/api.js b/testApi/src/main/resources/static/js/api.js
index cb968902dec2f94cedb51e576b008bf51f867b21..cacc9351197d6569c235a461d42b7ca62d0a3f3f 100644
--- a/testApi/src/main/resources/static/js/api.js
+++ b/testApi/src/main/resources/static/js/api.js
@@ -1,8 +1,9 @@
+import { displayChart, displayPriceChart } from "./graph.js";
 
 const BASE_URL = "http://localhost:8080/";
 const API_URL = BASE_URL + "api";
 
-function callApi(route, method = "GET", data = null)
+export function callApi(route, method = "GET", data = null)
 {
     let options = { 
         method: method,
@@ -15,7 +16,7 @@ function callApi(route, method = "GET", data = null)
         options.body = JSON.stringify(data);
     }
     console.log("fetching data ...");
-    fetch(API_URL + route, options)
+    return fetch(API_URL + route, options)
       .then(result => result.json())
       .then(data => {
         switch (route) {
@@ -24,9 +25,16 @@ function callApi(route, method = "GET", data = null)
                 // data.forEach((item, index) => {
                 //     console.log(`Élément ${index}:`, item);
                 // });
+
                 console.log("ok");
                 displayChart(data);
                 break;
+            case "/prices":
+    
+                console.log("ok prices");
+                displayPriceChart(data);
+                break;
+
             case "/sendDates":
                 console.log("Data sent successfully");
                 window.location.href = BASE_URL + "candlesGraph";
diff --git a/testApi/src/main/resources/static/js/graph.js b/testApi/src/main/resources/static/js/graph.js
index c0b6b5c2289c51efd96cc5fea8d3386886094812..fc32aae62f84825044106056dc06e4dabaf57d28 100644
--- a/testApi/src/main/resources/static/js/graph.js
+++ b/testApi/src/main/resources/static/js/graph.js
@@ -1,16 +1,24 @@
 // import { createChart } from './node_modules/lightweight-charts/dist/lightweight-charts.esm.production.js';
+// import { createChart } from 'lightweight-charts';
+import { CandlestickSeries, createChart, AreaSeries } from '../node_modules/lightweight-charts/dist/lightweight-charts.development.mjs';
+import { callApi } from './api.js';
+// import { createChart } from './node_modules/lightweight-charts/dist/lightweight-charts.production.mjs';
 
-window.onload = function() {
-    callApi("/btcusdt");
-};
 
-function displayChart(data)
-{
-    const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
-    const chart = LightweightCharts.createChart(document.getElementById('container'), chartOptions);
+window.onload = async function() {
+    await callApi("/btcusdt");
+    // await callApi("/prices");
+};
 
-    const candlestickSeries = chart.addCandlestickSeries({
-        upColor: '#26a69a', downColor: '#ef5350', borderVisible: false,
+export function displayChart(data) {
+    const chartOptions = { 
+        // width: 800,
+        // height: 400,
+        layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
+    const chart = createChart(document.getElementById('container'), chartOptions);
+    console.log("Chart object:", chart);
+    const candlestickSeries = chart.addSeries(CandlestickSeries, {
+        upColor: '#26a69a', downColor: '#ef5350', borderVisible: true,
         wickUpColor: '#26a69a', wickDownColor: '#ef5350',
     });
     console.log(data);
@@ -19,3 +27,26 @@ function displayChart(data)
     chart.timeScale().fitContent();
 }
 
+export function displayPriceChart() {
+    const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
+    console.log(data);
+    const chart = createChart(document.getElementById('container'), chartOptions);
+    const areaSeries = chart.addSeries(AreaSeries, {
+        upColor: '#26a69a', downColor: '#ef5350', borderVisible: false,
+        wickUpColor: '#26a69a', wickDownColor: '#ef5350',
+    });
+    areaSeries.setData([
+        { time: '2024-12-22', value: 94000 },
+        { time: '2024-12-23', value: 95000 },
+        { time: '2024-12-24', value: 96000 },
+        { time: '2024-12-25', value: 97000 },
+        { time: '2024-12-26', value: 98000 },
+        { time: '2024-12-27', value: 99000 },
+        { time: '2024-12-28', value: 100000 },
+        { time: '2024-12-29', value: 102000 },
+        { time: '2024-12-30', value: 101000 },
+        { time: '2024-12-31', value: 110000 },
+    ]);
+    chart.timeScale().fitContent();
+}
+
diff --git a/testApi/src/main/resources/static/js/index.script.js b/testApi/src/main/resources/static/js/index.script.js
index d51164b66d53a435d9448fb9c5a1fd016e0e6ac8..8a3a72fbd8d19e5097029573f09a6cc7d600e314 100644
--- a/testApi/src/main/resources/static/js/index.script.js
+++ b/testApi/src/main/resources/static/js/index.script.js
@@ -1,3 +1,5 @@
+import { callApi } from "./api.js";
+
 window.onload = function() {
     const dateMax = new Date().toISOString().split("T")[0];
     console.log("date max : " + dateMax);
diff --git a/testApi/src/main/resources/static/package-lock.json b/testApi/src/main/resources/static/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..bc8709455eb465b862ae183e92cba44633dd1d28
--- /dev/null
+++ b/testApi/src/main/resources/static/package-lock.json
@@ -0,0 +1,25 @@
+{
+  "name": "static",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "lightweight-charts": "^5.0.3"
+      }
+    },
+    "node_modules/fancy-canvas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
+      "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ=="
+    },
+    "node_modules/lightweight-charts": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.0.3.tgz",
+      "integrity": "sha512-/ve4wbdwAJqaexZ07HZ1bb36ZeI03ZEcqd2ttAXAcbX7/csbPqueBZmF2/jF0dPsWNvelUP9qzDR//o9625OqQ==",
+      "dependencies": {
+        "fancy-canvas": "2.1.0"
+      }
+    }
+  }
+}
diff --git a/testApi/src/main/resources/static/package.json b/testApi/src/main/resources/static/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..d072f72147f2b2edad111002742cb1e3edef9b66
--- /dev/null
+++ b/testApi/src/main/resources/static/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "lightweight-charts": "^5.0.3"
+  }
+}