Kategorie: ProgramowanieProgramowanie webowe

Rysowanie wykresu w JavaScripcie

Cześć! Cieszę się, że mnie odwiedziłeś/aś. Zanim przejdziesz do artykułu chciałbym zwrocić Ci uwagę na to, że ten artykuł był pisany kilka lat temu (2016-03-15) miej więc proszę na uwadzę że rozwiązania i przemyślenia które tu znajdziesz nie muszą być aktualne. Niemniej jednak zachęcam do przeczytania.

Witam ponownie ;)

Takim oto przywitaniem rozpoczynam ostatni wpis z serii o pisaniu aplikacji zbierającej dane o notowaniach złota, srebra, platyny i palladu.

Skończyliśmy w miejscu gdzie już mamy naszego demona która ładnie chodzi sobie w tle. Umiemy nim zarządzać i gromadzimy w bazie danych informacje o notowaniach.

Czas je jakoś wyrysować ;)

Użyjemy do tego w sumie pierwszej lepszej biblioteki z Google’a – Chart.js. Z tym że w wersji 2.0 beta.

Dane będziemy pobierać z innej domeny. Będzie to realizowane w ten sposób bo mam swój scentralizowany webservice restowy który udostępnia dane ze swojej domeny. Więc zamiast JSONa będzie JSONp.

Więc pierwsze co zrobimy to pobierzemy sobie dane.

Robimy więc najzwyklejszego selecta z tym że do przeglądarki zwracamy go w takiej formie

1
jQuery21301089606809146022_1458067767290({data:[1,2,3]})

Funkcja która opakowuje naszego JSONa to tzw. callback – przy wywołaniach typu crossDomain jej nazwa przesyłana do serwera jest w URLu:

1
$_GET['callback']

Zacznijmy od pobrania danych z serwera:

1
2
3
4
5
6
7
8
$.ajax({
  url:"http://api.pl/sources_prices",
  success:function(data){
  },
  contentType: 'application/json',
  crossDomain: true,
  dataType: 'jsonp'
})

Zwróć uwagę na crossDomain i dataType.

Chcemy mieć 4 wykresy więc wybierzmy z pobranych danych dane dla odpowiednich surowców:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
  url:"http://api.pl/sources_prices",
  success:function(data){
      var labels = Object.keys(data);
      var gold_values = labels.map(function(v) { return data[v].gold; });
      var silver_values = labels.map(function(v) { return data[v].silver; });
      var palladium_values = labels.map(function(v) { return data[v].palladium; });
      var platinum_values = labels.map(function(v) { return data[v].platinum; });
      dates = labels.map(function(v) { return data[v].date_time; });
  },
  contentType: 'application/json',
  crossDomain: true,
  dataType: 'jsonp'
})

gdzie zmienna dates będzie globalna – przyda się nam później.

Napiszmy kawałek kodu który narysuje jeden wykres:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var showChart = function(canvas, labels, values, color, label){
  var ctx = document.getElementById(canvas).getContext("2d");
  window[canvas] = new Chart(ctx,{
      type: 'line',
      data:prepareChartData(labels, values, color, label),
      options:{
          responsive: true,
          showScale: true,
          scales:{
              yAxes:[{
                  ticks:{
                      callback: function(tick) { return tick.toFixed(2); }
                  }
              }]
          }
      }
  });
}

Ten callback zaokrągla wartości użyte na osi Y, natomiast generowanie danych wyrzuciłem do oddzielnej funkcji:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var prepareChartData = function(labels, values, color, label){
  var lineChartData = {
      labels : labels,
      datasets : [
          {
              label: label,
              backgroundColor : color,
              strokeColor : color,
              pointColor : color,
              pointHoverRadius:1,
              pointStrokeColor : "#fff",
              pointHighlightFill : "#fff",
              pointHighlightStroke : "rgba(220,220,220,1)",
              data : values
          }
      ]
  }
  return lineChartData;
}

Dodajmy teraz 4 wywołania funkcji showChart do kodu głównego:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
  url:"http://api.pl/sources_prices",
  success:function(data){
      var labels = Object.keys(data);
      var gold_values = labels.map(function(v) { return data[v].gold; });
      var silver_values = labels.map(function(v) { return data[v].silver; });
      var palladium_values = labels.map(function(v) { return data[v].palladium; });
      var platinum_values = labels.map(function(v) { return data[v].platinum; });
      dates = labels.map(function(v) { return data[v].date_time; });
      showChart("canvas_gold", labels, gold_values, "rgba(255,215,20,0.4)", "Zloto");
      showChart("canvas_silver", labels, silver_values, "rgba(192, 192, 192,0.4)", "Srebro");
      showChart("canvas_pallad", labels, palladium_values, "rgba(0,0,255,0.4)", "Pallad");
      showChart("canvas_platinum", labels, platinum_values, "rgba(150, 75, 0,0.4)","Platyna");
  },
  contentType: 'application/json',
  crossDomain: true,
  dataType: 'jsonp'
})

I jeszcze nadpiszemy tooltip nad punktami żeby pokazywał nam datę – skorzystamy własnie z tej zmiennej dates:

1
2
3
Chart.defaults.global.tooltips.callbacks.title = function(tooltipItems, data){
  return dates[tooltipItems[0].xLabel - firstID];
};

Do tego jeszcze prosty HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<meta charset=utf-8>
<title>Financial</title>

<script type="text/javascript" src="Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<style type="text/css">
.chart{
  width:100%;
  height:100%;
}
canvas{
  width:100%;
  height: 100%;
}
</style>
</head>
<body>

  <div class="chart">
      <canvas id="canvas_gold"></canvas>
  </div>

  <div class="chart">
      <canvas id="canvas_silver"></canvas>
  </div>

  <div class="chart">
      <canvas id="canvas_pallad"></canvas>
  </div>

  <div class="chart">
      <canvas id="canvas_platinum"></canvas>
  </div>

</body>
<script type="text/javascript" src="main.js"></script>
</html>

Gdzie naszym plikiem jest plik main.js.

Rezultat:

No i to już koniec :) Mam nadzieje że było ciekawie.

Dzięki za wizytę,
Mateusz Mazurek
Tagi: chartchartjscrossdomainjavascriptjqueryjsonp
9 lat ago
Mateusz M.

Pokaż komentarze

Zostaw komentarz

Podobne wpisy

Ostatnie wpisy

Podsumowanie: maj, czerwiec, lipiec i sierpień 2024

Oj daaawnoo mnie tu nie było. Ale wakacje to był czas dużej liczby intensywnych wyjazdów i tak naprawdę, dopiero jakoś… Read More

2 miesiące ago

Podsumowanie: kwiecień 2024

Cześć! Zapraszam na krótkie podsumowanie kwietnia. Wyjazd do Niemiec A dokładniej pod granicę z Francją. Chrześnica miała pierwszą komunię. Po… Read More

6 miesięcy ago

Podsumowanie: luty i marzec 2024

Ostatnio tygodnie były tak bardzo wypełnione, że nie udało mi się napisać nawet krótkiego podsumowanie. Więc dziś zbiorczo podsumuję luty… Read More

7 miesięcy ago

Podsumowanie: styczeń 2024

Zapraszam na krótkie podsumowanie miesiąca. Książki W styczniu przeczytałem "Homo Deus: Historia jutra". Książka łudząco podoba do wcześniejszej książki tego… Read More

9 miesięcy ago

Podsumowanie roku 2023

Cześć! Zapraszam na podsumowanie roku 2023. Książki Zacznijmy od książek. W tym roku cel 35 książek nie został osiągnięty. Niemniej… Read More

10 miesięcy ago

Podsumowanie: grudzień 2023

Zapraszam na krótkie podsumowanie miesiąca. Książki W grudniu skończyłem czytać Mein Kampf. Nudna książka. Ciekawsze fragmenty można by było streścić… Read More

11 miesięcy ago