Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Muhammad Hashir
180
Facing problem with canvas points merge
posted

Currently we have a scenario where we have different data chart like this we have 2 chart with one column chart only with width fixed?

Currently we need to make discrete target line by calculating difference ,How to draw the yellow line by using custom marker technique ,Please it some urgent requirement kindly help out

Code to make dashed line


  public CustomLineMarkerDash(): any {

    let $scope = this;
    let style = { outline: "#8B5BB1", fill: "white", text: "black" };
    const size = 5;
    return {
      measure: function (measureInfo: DataTemplateMeasureInfo) {
        const context = measureInfo.context;
        const height = context.measureText("M").width;
        const width = context.measureText("0.00").width;
        measureInfo.width = width;
        measureInfo.height = height;
      },
      render: function (renderInfo: DataTemplateRenderInfo) {

        let ctx = renderInfo.context;
        let x = renderInfo.xPosition;
        let y = renderInfo.yPosition;


        ctx.style = "cursor: pointer";


        const dataItem = renderInfo.data.item;
        debugger;

        if (dataItem === null) return;
        if ($scope.processedpointsdata.type == KpiTypeEnum.ChangeoverTime) {
          let index = dataItem.index;
          let nxtdata = $scope.processedpointsdata.pointsdata.filter((x: any) => x.index == index + 1);
          if (nxtdata.length > 0) {
            let difference = null;
            if (nxtdata[0].ChangeoverTime_Target && dataItem.ChangeoverTime_Target) {
              difference = nxtdata[0].ChangeoverTime_Target - dataItem.ChangeoverTime_Target;


              ctx.strokeStyle = "red";

              ctx.fillStyle = "red";
             

     


              console.log(difference);

            }
          }
        }
        let difference=0;
        if ($scope.processedpointsdata.type == KpiTypeEnum.ChangeoverTime) {
          let index = dataItem.index;
          let nxtdata = $scope.processedpointsdata.pointsdata.filter((x: any) => x.index == index + 1);
          if (nxtdata.length > 0) {
            if (nxtdata[0].ChangeoverTime_Target && dataItem.ChangeoverTime_Target) {
              difference = nxtdata[0].ChangeoverTime_Target - dataItem.ChangeoverTime_Target;


              ctx.strokeStyle = "red";

              ctx.fillStyle = "red";
             

     


              console.log(difference);

            }
          }
        }

        ctx.strokeStyle = "rgb(161, 167, 179)";

        ctx.fillStyle = "rgb(161, 167, 179)";
        ctx.beginPath();
        ctx.setLineDash([7, 7]);
        ctx.moveTo(-30, y);
        ctx.lineTo(x + 180, y);
        ctx.rotate(0.17);
        ctx.lineTo(x + 180, y-difference);
       
        ctx.stroke();
        ctx.fill();
        ctx.closePath();


       



      }
    }
  }