Zmiana koloru wykresu w zależności od wartości Opcje

[Lethys]

Witam,

Przerzuciłem się na morris js, aby przedstawić dane z bazy.

Generalnie wszystko działa ale mam problem z dodatkowo opcją, tzn. chcę zmienić kolor konkretnego punktu wykresu gdy action=buy

tak wygląda mój JSON:

[PHP] pobierz, plaintext 
[{"longdate":"2014-08-20 18:20:01","price":"1620","action":"buy"},{"longdate":"2014-08-20 18:40:01","price":"1640","action":""},{"longdate":"2014-08-20 19:00:01","price":"1620","action":""}]
[PHP] pobierz, plaintext 

A tak kod wykresu:

[PHP] pobierz, plaintext 
 $.getJSON('results.json', function(day_data) {
 
    Morris.Line({
      element: 'graph',
      data: day_data,
      xkey: 'longdate',
      ykeys: ['price'], 
      labels: ['Cena'],
	  pointSize: 4,
	  lineColors: function(action) {
		if(action == "buy") return "#0da3be";
		else if(action == "sell") return "#11ca26";
                //else return działa bo pobiera ten kolor
		else return "#7c7c7c";
	},
      hoverCallback: function(index, options, content) { 
         //var displayDate = "<b>"+changeDateFormat(day_data[index]['clock'])+"</b><br>";
		 var date = "<b><font color='black'>Data: "+day_data[index]['longdate']+"</font></b><br>";
         var param1 = "<font color='"+lineColor[0]+"'>Cena - "+day_data[index]['price']+"</font><br>";
         return date+param1;
      },
      xLabelFormat : function (x) {
       return changeDateFormat(x);
      }
 
 
 
 
    });
  });
[PHP] pobierz, plaintext 

Else return działa, czyli jest problem z odczytaniem tego actiona.

Teoretycznie powinno działać ale nie działa (IMG:style_emoticons/default/smile.gif)

Ten post edytował Lethys 21.08.2014, 11:47:33

[Lethys]

Trzeba będzie to prawdopodobnie zrobić za pomoca pętli.

Nadal coś nie działa, przy takim skrypcie nie wyświetla się wykres.

Obecnie tak skrypt wygląda:

[PHP] pobierz, plaintext 
$( document ).ready(function() {
  var lineColor = ['#7c7c7c','#357ebd'];
  var day_data = [];
  function changeDateFormat(mydate)
  {
    var dateDMY = new Date(mydate);
    var monthNames = [ "Sty", "Lut", "Mar", "Kwi", "Maj", "Cze",
    "Lip", "Sie", "Wrz", "Paź", "Lis", "Gru" ]; 
    var date =  dateDMY.getDate();
    var month = monthNames[dateDMY.getMonth()];
    var year = dateDMY.getFullYear();
    var mydate = "";
    var seperator = "-";
    mydate = mydate.concat(date,seperator,month,seperator,year);
    return mydate;
  }
 
function drawLine(action){
 
 if(!action) return;
 
 var color = null;
 if(action == "buy") color ="red";
 else color = "black";
 
 Morris.Line({
      element: 'graph',
      data: day_data,
      action: 'action',
      xkey: 'longdate',
      ykeys: ['price'],
      labels: ['Cena'],
      pointSize: 4,
      lineColors: function() {
        return color;
    },
      hoverCallback: function(index, options, content) { 
         //var displayDate = "<b>"+changeDateFormat(day_data[index]['clock'])+"</b><br>";
         var date = "<b><font color='black'>Data: "+day_data[index]['longdate']+"</font></b><br>";
         var param1 = "<font color='"+lineColor[0]+"'>Cena - "+day_data[index]['price']+"</font><br>";
         return date+param1;
      },
      xLabelFormat : function (x) {
       return changeDateFormat(x);
      }
 
    });
}
 
 
$.getJSON('results.json', function(day_data) {
  var l = day_data || [];
  for(var i = 0; i < l.length; i++){
    drawLine(l[i].action);
  }
});
 
 
 
});
 
[PHP] pobierz, plaintext