Home forums Using CanvasJS Set image as a marker Reply To: Set image as a marker

#14648

NehaSingh
Member
<!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://canvasjs.com/assets/script/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 5 months ago by  NehaSingh. Reason: remove Extra code for better understanding