Set image as a marker

Question

Hello, i wanted to know that can we set an image as a marker. i am using splineGraph and i want to

replace the circle marker with an image
. Please reply as soon as possible.

suyash-singh · Answer

@nehasingh,

1. Default Markers are automatically disabled when number of dataPoints are more. You can manually override the automatic disabling/enabling of markers by setting markerSize to a value equal to or greater than zero.

{
  .
  .
  data: [{
    markerSize: 10,
    .
    .
  }]
}

Please have a look at this JSFiddle for complete code.

2. You can show the marker image only for current dataPoint by placing the marker Image on top of the last dataPoint every time the chart is updated. Please have a look at this below code snippet for the same.

var updateChart = function () {
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
  dps.push({ x: xVal,y: yVal });
  xVal++;
  if (dps.length > 10)
  {
    dps.shift();
  }
  chart.render();

// Position image marker over the last/ current dataPoint
  positionMarkerImage(imageMarker, chart.options.data[0].dataPoints.length - 1);
};

function positionMarkerImage(imageMarker, index){ 
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);

imageMarker.css({"position": "absolute", 
                   "display": "block",
                   "top": pixelY - imageMarker.height()/2,
                   "left": pixelX - imageMarker.width()/2
                  });
}

var updateId = setInterval(function () { updateChart();}, updateInterval);

Please refer to this JSFiddle for complete code on the same.

___
Suyash Singh
Team CanvasJS

nehasingh · Answer

Hello,

I am going through few problems.
1. I am showing live data from my database which is being updated every 2 seconds. Now after some time the marker disappears. For first few minutes it is displayed but not after that, is there any range? the line works fine. only i am not able to see the marker.

2. i am using an image as a marker but i want to show the image only for the current position and the rest of the points should be any simple marker type. Is there any way to do that?

Hoping to hear from you soon.

suyash-singh · Answer

@nehasingh

For dynamic data, updating the position of image after adding new dataPoint has to be handled. Please take a look at below code snippet for the same.

var updateChart = function () {
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
  dps.push({ x: xVal,y: yVal });
  xVal++;
  if (dps.length > 10)
  {
    dps.shift();
  }
  chart.render();
  addMarkerImage(chart);
};

function addMarkerImage(chart) {
  var data = chart.options.data[0];
  for(var i = 0; i < data.dataPoints.length; i++) {
    customMarkers.push($("<img>").attr("src", data.markerImageUrl)
                       .css("display", "none")
                       .css("height", 20)
                       .css("width", 20)
                       .appendTo($("#chartContainer>.canvasjs-chart-container"))
                      );   
    positionMarkerImage(customMarkers[i], i);
  }            
}

function positionMarkerImage(customMarker, index){ 
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);

  customMarker.css({"position": "absolute", 
                    "display": "block",
                    "top": pixelY - customMarker.height()/2,
                    "left": pixelX - customMarker.width()/2
                   });
}

var updateId = setInterval(function () { updateChart();}, updateInterval);

Please refer to this JSFiddle for complete code.

Dynamic line chart with image as marker

Regarding your query about the Trial Version, our sales team have already mailed you and they will be assisting you further with your requirements.

—
Suyash Singh
Team CanvasJS

nehasingh · Answer

And I also wanted to ask that I am using this for a college project and it is offline. I just read that trial version is only for 30 days so will I be able to use this after that???
Can I use it offline... or it will stop working after the trial period.

nehasingh · Answer

This is what i have done so far. For static data it is working fine, when i am trying to do it for dynamic data, don't now why the dps.push function is not working. The graph is created but the image doesn't appears. Please suggest what is wrong here. i am almost there.

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

Set image as a marker