• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Array mit Json Objekt in Diagramm darstellen mit AngularJS

K

kiwi2016

New member
Hallo,

ich bin noch Anfänger und versuche gerade eine kleine App mit AngularJS zu programmieren, die Daten aus einer Postgresql-Tabelle in einem Diagramm (Angular-chart) darstellt. Dazu greifen ich die Daten mit $http ab. Das klappt auch gut, wenn ich mir z.B. Listen der Einträge usw. darstellen lasse. Jetzt möchte ich aber den Inhalt einer Spalte als Werte für das Diagramm nutzen. Montan habe ich es wie folgt versucht:

Code: 
$scope.schnittData = {};
$http.get('http://localhost:3000/api/v1/zuschnitt')
.success(function(data) {
		
				
$scope.schnittData = data;
console.log(data);
})
.error(function(error) {
console.log('Error: ' + error);
});

$scope.data = [[30, 20, 60, 50, 20, 40]];

Wie man sieht gebe ich noch die Daten für das Diagramm manuell ein, weil es wenn ich scope.data=$scope.schnittData setze leer bleibt. Kann mir da vielleicht jemand helfen oder einen Anstoß geben? :)
 
die daten würde ich mir über einen Service besorgen, der ein promise (https://docs.angularjs.org/api/ng/service/$q) zurückliefert
kiwi2016 schrieb:
weil es wenn ich scope.data=$scope.schnittData setze leer bleibt.
Zum Vergrößern anklicken....
wo machst du das denn?

- - - Aktualisiert - - -

mal auf die schnelle:
Code: 
    ...
    resolve: {
      sensors: ['mpu6050', function(mpu6050)
      {
        return mpu6050.readAll();
      }],
      csrf: ['csrf', function(csrf)
      {
        return csrf.get();
      }]
    },
    controller: ['$scope', '$state', 'sensors', 'mpu6050', 'csrf', function ($scope, $state, sensors, mpu6050, csrf)
    {
      $scope.sensors = sensors;
      ...
    }
mpu6050 ist der service
Code: 
angular.module('mpu6050.service', [
])
.factory('mpu6050', ['$http', '$rootScope', '$q', function ($http, $rootScope, $q)
{
  var values;
  var mpu6050;
  var lastValues;
  var socket = null;
  var path = '/mpu6050';

  var factory = {};
  factory.readAll = function ()
  {
    return mpu6050 = $http.get(path).then(function (resp)
    {
      return resp.data;
    });
  };
  ...
  return factory;
}]);

- - - Aktualisiert - - -

wenn du das nicht gleich beim view-erzeugen, sondern auf user-aktion auslösen willst müsstest du im controler einen eventhandler in etwa so
Code: 
$scope.readList = function ()
{
  mpu6050.readAll().then(function(data)
  {
    $scope.sensors = data;
  });
};
erzeugen
 
Puuh, das sieht ja erstmal schwierig aus. :/

Also, das scope.data=$scope.schnittData schreibe ich dahin wo ich jetzt manuell die Daten hingeschrieben hatte. Hätte gedacht man könnte sie vielleicht einfach konvertieren mit json.parse oder etwas ähnlichem...

Rein aus Interesse und weil ich neu in dem Gebiet bin: Wieso würdest du das mit einem Service und nicht so wie ich das geschrieben habe machen?
 
kiwi2016 schrieb:
Also, das scope.data=$scope.schnittData schreibe ich dahin wo ich jetzt manuell die Daten hingeschrieben hatte. Hätte gedacht man könnte sie vielleicht einfach konvertieren mit json.parse oder etwas ähnlichem...
Zum Vergrößern anklicken....
ein request ist aber asynchron, an der stelle sind noch überhaupt keine daten da und $scope.schnittData ist undefined. erst im callback werden die daten verfügbar. wenn du dort, wo du $scope.schnittData = data; stehen hast, einfach $scope.data = data; schreibst und dort wo jetzt $scope.data = data; steht dieses durch $scope.data = []; ersetzt, sollte alles gehen.

kiwi2016 schrieb:
Rein aus Interesse und weil ich neu in dem Gebiet bin: Wieso würdest du das mit einem Service und nicht so wie ich das geschrieben habe machen?
Zum Vergrößern anklicken....
weil das besorgen der daten nicht aufgabe des documentes ist, sondern ein service - rein von der objektierung
 
Hallo,

ich musste leider Pc-bedingt eine kleine Pause einlegen, trotzdem erstmal danke für deine Antwort! Ich habe das gabze jetzt mal so ausprobiert, wie du es beschrieben hast. Trotzdem bleibt das Diagramm leer!

JS:
HTML: 
$scope.data = [];
$http.get('http://localhost:3000/api/v1/schnitt')
			.success(function(data) {
		
				
			$scope.data = data;
				console.log(data);
			})
			.error(function(error) {
				console.log('Error: ' + error);
			 });

HTML:

<div class="card">
        <div class="item item-divider">
            <h1>Diagramm</h1>
        </div>
        <div class="item item-text-wrap">
            <canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" <!--series="series"--> options="{showTooltips: false}"></canvas>        
</div>
</div>

Obwohl ich Daten z.B. mit {{data}} ganz normal auf dem Html-Script nutzen kann und er sie mir auch anzeigt. Liegt es vielleicht am Diagramm?
 
Zuletzt bearbeitet von einem Moderator:
wie sehen denn deine daten aus? dort wird ein mehrdimensionales array erwartet, wenn du nur eine datenreihe hast, musst du die trotzdem noch in ein array packen.
 
Ich weiß jetzt nicht so genau was du meinst. Also meine Daten sind eine Spalte aus einer Tabelle.

Code: 
dauer
------
300
900
200
usw.

ich hol für die API hab ich die Funktion genommen umsie zu bekommen:
Code: 
router.get('/api/v1/schnitt', function(req, res) {

    var results = [];
    pg.connect(connectionString, function(err, client, done) {
        // Handle connection errors
        if(err) {
          done();
          console.log(err);
          return res.status(500).json({ success: false, data: err});
        }

        var query = client.query("SELECT dauer FROM schnitt;");
		
        query.on('row', function(row) {
            results.push(row);
        });
		
        query.on('end', function() {
            done();
            return res.json(results);
        });

    });

und hol sie damm mit die oben genannte funktion in die App. mometan werden sie ja so zurückgegeben:
Code: 
{
    "dauer": 300
  },
  {
    "dauer": 900
  },
  {
    "dauer": 200
  }

Und die Werte kann ich nicht einfach als Array speichern?
 
Zuletzt bearbeitet von einem Moderator:
du brauchst ein array [] mit datenreihen als array [19, 20, 21, ..] zusammen dann
[ [19, 20, 21, ..] ]
 
Ok, ich hab mal ein bisschen rumprobiert.
Wenn ich das erstmal mit selbst vorgebener Variable umwandele klappt es bei einem Wert:

Code: 
var jsondata = ' {    "nummer": 160238,    "taetigkeit": "Laufen",    "dauer": 300,    "id": "1"  }';
	
	var objekt = JSON.parse(jsondata);
	var funktion = objekt.taetigkeit;
        var dauer = objekt.dauer;
	
    $scope.labels = [funktion, "2", "3", "4", "5", "6"];
    $scope.series = ['Series A'];
    $scope.datadiagramm = [[dauer, 20, 30, 46, 30, 25]];

So nimmt der erste Balken des Diagramms schon mal die Dauer und den Namen.

Jetzt habe ich einfach versucht das mit meiner ersten Zeile aus der Db zu machen. Momentan gibt sie das aus:

Code: 
[  {    "nummer": 160238,    "taetigkeit": "Laufen",    "dauer": 300,    "id": "1"  } ]

Und ich hab es so versucht:

Code: 
$scope.data =[];
$http.get('http://localhost:3000/api/v1/zuschnitt')
			.success(function(data) {
		
				
			$scope.data = data;
				console.log(data);
			
			
			})
			.error(function(error) {
				console.log('Error: ' + error);
			 });

var objekt = JSON.parse(data);
	var funktion = objekt.taetigkeit;
        var dauer = objekt.dauer;		

    $scope.labels = [funktion, "2", "3", "4", "5", "6"];
    $scope.series = ['Series A'];
    $scope.datadiagramm = [[dauer, 20, 30, 46, 30, 25]];

Haut aber wieder nicht hin. :( Woran liegt es jetzt?
 
kiwi2016 schrieb:
Jetzt habe ich einfach versucht das mit meiner ersten Zeile aus der Db zu machen. Momentan gibt sie das aus:
Zum Vergrößern anklicken....
[ { "nummer": 160238, "taetigkeit": "Laufen", "dauer": 300, "id": "1" } ]
ist ganz was anderes als
{ "nummer": 160238, "taetigkeit": "Laufen", "dauer": 300, "id": "1" }
das 1. ist ein array, das 2. ein objekt

kiwi2016 schrieb:
Haut aber wieder nicht hin. :( Woran liegt es jetzt?
Zum Vergrößern anklicken....
var objekt = JSON.parse(data);
woher kommt denn data? und was steht in data? wenn das die daten aus dem request seien sollen, hatten wir das schon in #4
 
tsseh schrieb:
[ { "nummer": 160238, "taetigkeit": "Laufen", "dauer": 300, "id": "1" } ]
ist ganz was anderes als
{ "nummer": 160238, "taetigkeit": "Laufen", "dauer": 300, "id": "1" }
das 1. ist ein array, das 2. ein objekt
Zum Vergrößern anklicken....

Aha, danke!! Hat mir geholfen gleich nochmal anders ranzugehen! :) Hab es jetzt so hinbekommen!

Code: 
$http.get('http://localhost:3000/api/v1/schnitt')
			.success(function(daten) {
			
				
			$scope.data = daten;
				console.log($scope.data);
			var tmp = [];
			var tmpWerte = [];
			for (var i = 0; i<$scope.data.length; i++) {
				tmp.push($scope.data[i].nummer);
				tmpWerte.push($scope.data[i].dauer);
				
				$scope.series = ['Fertigung', 'Rüsten'];
			}
			$scope.labels= tmp;
			$scope.werte= [tmpWerte];
			
			})
			;
 
Hallo,

ich hab jetzt viel mit meiner App rumexperimentiert, mit den Diagrammen usw. Jetzt hab ich das Problem, dass wenn ich die App mit dem Handy testen auf "http://localhost..." will, mir die Daten nicht angezeigt werden, obwohl ich sie auf dem Rechner sehe.

Kann es daran liegen, dass die Daten momentan das Dokument und nicht ein Service besorgt? So wie du es mal geschrieben hast. Oder kann es auch die Firewall sein?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben