CODEWITHSUNDEEP
javascriptjqueryserveramcharts
Neinrappeur Zaki
Neinrappeur Zaki

Reputation: 397

Amcharts make Guide line value dynamic with SSE

im trying to add a line to amcharts like this image :

enter image description here

enter image description here its avaliable in amcharts but only on hover ,i want to add it so it will be always there without hover , i tried to Use Am charts Guides as following :

                "guides": [{
                        "valueField":"high",                      
                          "value": this part need to be dynamic,
                          "lineAlpha": 1,
                          "lineThickness": 1,
                          "lineColor": "#fff",
                          "label": 'high'
                            }],

this way the line is working but it needs a value to be drawn ,the value i want it to be dynamic and changes with SERVER SENT EVENTS ,

Upvotes: 1

Views: 678

Answers (1)

xorspark
xorspark

Reputation: 16012

You can add the guide after you get your server event and/or change it depending on how your app is structured. Any additions or changes to the chart properties or data require that you call the chart instance's validateData() method.

For adding a new guide (assuming regular serial chart with the guides inserted at the top level of the config):

chartInstance.guides.push({
  "value": /*your value here*/,
  "lineAlpha": 1,
  "lineThickness": 1,
  "lineColor": "#fff",
  "label": 'high'
});
chartInstance.validateData();

For updating a guide (assuming you're updating the first guide in the array):

//assuming you're updating the first guide in the array:
chartInstance.guides[0].value = /*new value*/
chartInstance.validateData();

Note that guides don't have a valueField. You can see a full list of properties here.

Here's a demo that adds a guide and then randomly changes the guide position every three seconds to demonstrate:

function generateChartData() {
  var firstDate = new Date();
  var chartData = [];
  firstDate.setHours(0, 0, 0, 0);
  firstDate.setDate(firstDate.getDate() - 30);

  for (var i = 0; i < 30; i++) {
    var newDate = new Date(firstDate);

    newDate.setDate(newDate.getDate() + i);

    var open = Math.round(Math.random() * 30 + 100);
    var close = open + Math.round(Math.random() * 15 - Math.random() * 10);

    var low;
    if (open < close) {
      low = open - Math.round(Math.random() * 5);
    } else {
      low = close - Math.round(Math.random() * 5);
    }

    var high;
    if (open < close) {
      high = close + Math.round(Math.random() * 5);
    } else {
      high = open + Math.round(Math.random() * 5);
    }

    var value = Math.round(Math.random() * 30 + 100);

    chartData[i] = {
      date: newDate,
      open: open,
      close: close,
      high: high,
      low: low,
      value: value
    };
  }
  return chartData;
}

var chart = AmCharts.makeChart("chartdiv", {
  type: "serial",
  theme: "black",
  dataProvider: generateChartData(),
  valueAxes: [
    {
      position: "right"
    }
  ],
  graphs: [
    {
      type: "candlestick",
      valueField: "value",
      openField: "open",
      highField: "high",
      lowField: "low",
      closeField: "close",
      lineColor: "#7f8da9",
      fillColors: "#7f8da9",
      negativeLineColor: "#db4c3c",
      negativeFillColors: "#db4c3c",
      fillAlphas: 1
    }
  ],
  categoryField: "date",
  categoryAxis: {
    parseDates: true,
    equalSpacing: true
  }
});

//simulating events using a 3 second interval
setInterval(function() {
  if (chart.guides.length) {
    chart.guides[0].value = Math.floor(Math.random() * 30 + 100);
  } else {
    chart.guides.push({
      value: Math.floor(Math.random() * 30 + 100),
      lineAlpha: 1,
      lineThickness: 1,
      lineColor: "#fff",
      inside: true,
      label: "high"
    });
  }
  chart.validateData();
}, 3000);
#chartdiv {
  width: 100%;
  height: 300px;
  background: #0d0d0d;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/black.js"></script>

<div id="chartdiv"></div>

Upvotes: 0

Related Questions