FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Set image as a marker › Reply To: Set image as a marker

March 22, 2017 at 11:13 pm #14648

NehaSingh 
<!DOCTYPE HTML>
<html>

    <head>
        <style>
            img{
                pointer-events: none;
            }
        </style>
        <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>  
        <script type="text/javascript" src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                var dps = [{x: 0, y: 0, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}];
                /*[{x: 1, y: 10, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 2, y: 13, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 3, y: 18, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 4, y: 20, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 5, y: 17, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 6, y: 10, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 7, y: 13, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 8, y: 18, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 9, y: 20, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                 {x: 10, y: 47, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}]; */  //dataPoints. 
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "theme2", //theme1
                    backgroundColor: "transparent",
                    title: {
                        text: "Live Data"
                    },
                    axisX: {
                        title: "Velocity"
                    },
                    axisY: {
                        title: "Distance"
                    },
                    data: [
                        {
                            type: "spline",
                            markerType: "none",
                            dataPoints: dps
                        }
                    ]
                });

                chart.render();

                var xVal = dps.length + 1;
                var yVal = 15;
                var updateInterval = 1000;

                var updateChart = function () {

                    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
                    dps.push({x: xVal,y: yVal, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"});
                   

                    xVal++;
                    if (dps.length > 10)
                    {
                        dps.shift();
                    }

                    chart.render();

                    // update chart after specified time. 

                };

                setInterval(function () {
                    updateChart();
                }, updateInterval);

                var customMarkers = [];

                addMarkerImages(chart);

                function addMarkerImages(chart) {
                    for (var i = 0; i < chart.data[0].dataPoints.length; i++) {

                        customMarkers.push($("<img>").attr("src", chart.data[0].dataPoints[i].markerImageUrl)
                                .css("display", "none")
                                .css("height", 40)
                                .css("width", 50)
                                .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
                    });
                }

                $(window).resize(function () {
                    for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
                        positionMarkerImage(customMarkers[i], i);
                    }
                });
            };
        </script>	
    </head>
    <body>
        <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
</html>

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.

  • This reply was modified 7 years, 1 month ago by NehaSingh. Reason: remove Extra code for better understanding