Wykres na stronie, jak wstawić dane z pliku

0

Witam
próbuję stworzyć sobie taką prostą stronę na której będzie wykres z temperaturami.
Znalazłem bibliotekę, którą chciałbym użyć NVD3.js
Jest w niej przykład wykorzystania jej i wszystko działa ok. Tylko niestety dopiero zaczynam przygodę z js i nie wiem za bardzo jak wprowadzić do tego wykresu swoich danych np. z pliku, czy z MySql-a. Byłby ktoś tak miły i pomógłby mi to zrobić? Z tego co już znalazłem to mają one być w formacie json. Tylko nie wiem jak on ma wyglądać i w jaki sposób go dołączyć do strony
To jest przykłądowy kod:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>
    <script src="lib/stream_layers.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, #chart, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

<div id="chart" class='with-3d-shadow with-transitions'>
    <svg></svg>
</div>

<script>

    nv.addGraph(function() {
        var chart = nv.models.lineWithFocusChart();

        chart.brushExtent([50,70]);

        chart.xAxis.tickFormat(d3.format(',f'));
        chart.focusHeight(50 + 20);
        chart.focusMargin({ "bottom": 20 + 20 });
        chart.x2Axis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1");
        chart.yAxis.tickFormat(d3.format(',.2f'));
        chart.y2Axis.tickFormat(d3.format(',.2f'));
        chart.useInteractiveGuideline(true);

        d3.select('#chart svg')
            .datum(testData())
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });

    function testData() {
        return stream_layers(3,128,.1).map(function(data, i) {
            return {
                key: 'Stream' + i,
                area: i === 1,
                values: data
            };
        });
    }

</script>
</body>
</html>
0

Jak rozumiem nie masz jeszcze konkretnych danych, więc wszystko do ustalenia. JSON na pewno będzie najłatwiejszy, więc:
a) przechowuj jsony w pliku
b) przechowuj dane w bazie, która używa JSONa (np. mongoDB)
c) przechowuj dane jakkolwiek chcesz i konwertuj je na json.
d) pobieraj dane z jakiegoś API i w miarę potrzeby konwertuj.

Do dostępu wystaw sobie skrypt, który będzie ci zwracał te dane. Może nawet być to taki kawałek kodu w bashu (za pomocą CGI):

#!bin/sh

file=$(echo "$QUERY_STRING" | awk 'BEGIN{ FS="="; RS="&" } { par[ $1] = $2 } END{ print par["date"] "/" par["time"] ".dat"; }')

if [[ -e "$file" ]]; then
    echo "HTTP/1.1 200 OK"
    echo
    cat "$file"
else
    echo "HTTP/1.1 404 Not Found"
fi

przy założeniu że masz pliki z jsonami w formacie "data/czas.dat". Absolutna podstawa, nawet walidacji, żadnej nie ma, ale masz już prototyp. :) AWK testowałem, CGI już nie, ale powinno być ok.

EDIT. W zasadzie miałoby sens napisać całość w AWK, ale tak już mi się w bashu napisało, w sumie bez sensu. Może poza tym, że bash jest bardziej zrozumiały, chyba mało kto zna w dzisiejszych czasach AWK.

0

d3js ma do tego dedykowaną funkcję. Ogólnie kroki są takie:

  1. Tworzysz plik twoj_plik_json.json gdzieś w katalogu publicznym (najłatwiej obok pliku index.html)
  2. Wrzucasz do niego dane:
[
 {"name":"Andy Hunt",
  "title":"Big Boss",
  "age": 68,
  "bonus": true
 },
 {"name":"Charles Mack",
  "title":"Jr Dev",
  "age":24,
  "bonus": false
 }
]
  1. Modyfikujesz swój kod:
d3.json("twoj_plik_json.json", function(data) {
  // tutaj cała logika tworzenia wykresu
});
0

Dzięki za podpowiedzi. Po małych problemach udało mi się to zrobić przy pomocy funkcji d3.json().

1 użytkowników online, w tym zalogowanych: 0, gości: 1