Wykres cen na stronę

  • Rejestracja: dni
  • Ostatnio: dni
0

Zna ktoś może jakiś generator lub ma już gotowe szablony pod stworzenie wykresu na stronę www?
Chodzi mi aby stworzyć wykres gdzie będzie np. 10 lini (każda linia to jeden rok np. 2000, 2001, 2002, 2003...) na każdej linii byłyby zaznaczone np. ceny produktu.
Czyli Y to ceny od 0 do np. 1 zł, X to miesiące i na każdym miesiącu byłoby np. z 15 punktów z notowaniami cen.
user image

Analizuję to rozwiązanie, ale nie wiem jak dodać do kodu aby dla miesiąca wstawić więcej niż tylko jedną cenę:
https://developers.google.com/chart/interactive/docs/gallery/linechart#dual-y-charts

Kopiuj
 
Kopiuj
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Miesiąc', '2000', '2001', '2002'],
          ['Sierpień',  20,  40,   50],
          ['Wrzesień',  10,      40, 35],
          ['Październik', 15,       20, 34],
          ['Listopad',  15,      18, 45]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>
shagrin
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Norwegia, Stavanger
  • Rejestracja: dni
  • Ostatnio: dni
0

Szukam coś prostego, ale pozwalającego stworzyć wykres z ilomaś liniami nie jedna.
Tu jest np. fajny przykład:
http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/jquery/spline-chart/

ale nie wiem jak tam zamienić x na miesiące oraz jak dodać więcej linii niż tylko jedna.

  • Rejestracja: dni
  • Ostatnio: dni
0

spóźnione ale wydaję mi się że a samym API tego modułu może być to dostępne a jak nie to po prostu drugi div, odpowiedni css i będzie śmigać - powinno :D

bree
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 40
0

Z pomocą może przyjść Google Charts, prościej się chyba nie da:
https://developers.google.com/chart/interactive/docs/gallery/steppedareachart

D3 też da radę, ale dokumentacja nie jest najlepsza.

Edycja:
Dla porównania, ten sam efekt w zaproponowanym canvasjs masz tutaj:
http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/spline/got-viewers/

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.