Home › Forums › Feature Requests & Feedback › custom marker type › Reply To: custom marker type
this is my code import { Component, OnInit } from ‘@angular/core’`; import * as CanvasJS from ‘src/assets/canvasjs.min’; // import Konva from ‘konva/lib/Core’; import { Observable } from ‘rxjs’; import { HttpResponse, HttpClient } from ‘@angular/common/http’; //import * as $ from ‘jquery’; declare var $: any; @Component({ selector: ‘app-practice’, templateUrl: ‘./practice.component.html’, styleUrls: [‘./practice.component.css’] })
export class PracticeComponent implements OnInit { WIDTH = 3000; HEIGHT = 3000; NUMBER = 200; // controlchart: any; constructor(private http: HttpClient) { } ngOnInit() { var chart= new CanvasJS.Chart(“chartContainer”, { animationEnabled: true, exportEnabled: true, zoomEnabled: true, responsive: true, maintainAspectRatio: false, //backgroundColor: “#F5DEB3”, theme: “light2”, title:{ text: “Simple Line Chart” }, toolTip:{ content:”x:{x}, <br/> y: {y} ” }, axisY: { title: “Sales”, tickColor: “navy”, labelFontSize: 10, gridColor: “navy”, tickLength: 0, }, axisY2: { title: “Hours”, //interval: 10, tickLength: 0 }, axisX: { labelFontSize: 10,
}, data: [{ type: “line”, fontFamily: “tahoma”, markerType: “none”, click: selectOnClick,
dataPoints: [ {x: 2, y: 13, markerImageUrl: “/assets/images/0.png”}, {x: 3, y: 18, markerImageUrl: “/assets/images/100_I.svg”}, {x: 4, y: 20, markerImageUrl: “/assets/images/100_I.svg”}, {x: 5, y: 17, markerImageUrl: “/assets/images/101.png”}, {x: 6, y: 10, markerImageUrl: “/assets/images/101.svg”}, {x: 7, y: 13, markerImageUrl: “/assets/images/101_C.svg”}, {x: 8, y: 18, markerImageUrl: “/assets/images/101_D.svg”}, {x: 9, y: 20, markerImageUrl: “/assets/images/102_A.svg”}, {x: 10, y: 47, markerImageUrl: “/assets/images/102_C.svg”}, { x: 10, y: 71, markerImageUrl: “/assets/images/102_D.svg”}, { x: 20, y: 55, markerImageUrl: “/assets/images/102_F.svg” }, { x: 30, y: 50, markerImageUrl: “/assets/images/102_I.svg” }, { x: 40, y: 70, markerImageUrl: “/assets/images/102_N.svg” }, { x: 50, y: 71, markerImageUrl: “/assets/images/102_RD.svg” }, { x: 60, y: 55, markerImageUrl:”/assets/images/102_RU.svg” }, { x: 70, y: 50, markerImageUrl: “/assets/images/102_TD.svg” }, ] }, ] }); chart.render(); function selectOnClick(e) { alert( e.dataSeries.type + “, dataPoint { x:” + e.dataPoint.x + “, y: “+ e.dataPoint.y + ” }” ); }
var customMarkers= []; addMarkerImages(chart); function addMarkerImages(chart){ for(var i = 0; i < chart.data[0].dataPoints.length; i++){ customMarkers.push($(““).attr(“src”, chart.data[0].dataPoints[i].markerImageUrl) .css(“display”, “none”) .css(“height”, 15) .css(“width”, 15) .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);
} });
}