Home Forums Chart Support Help to dynamically bind the stripline to the diagram!

Help to dynamically bind the stripline to the diagram!

Viewing 4 posts - 1 through 4 (of 4 total)
  • #33834

    Good day! I want to display a dynamic stripline on a line chart, but I don’t know where to insert the code. Please tell me! As in this example https://canvasjs.com/javascript-stockcharts/dynamic-stockchart-stripline/

    chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    theme: “light2”,
    backgroundColor: “#1E1E1E”,
    title: {
    titleFontSize: 3,
    text: “Grafik”
    },
    toolTip: {
    enabled: true,
    animationEnabled: true,
    borderColor: “#29F800”,
    fillOpacity: 0.1,

    borderThickness: 2,
    fontColor: “#F40206”,
    backgroundColor: “#1E1E1E”,
    content: “{y}”
    },
    axisX: {
    includeZero: false,
    titleFontSize: 0,
    labelFontSize: 0,
    gridThickness: 0,
    tickLength: 0,
    lineThickness: 1,
    lineColor: “#29624A”
    },
    axisY: {
    includeZero: false,
    titleFontSize: 0,
    labelFontSize: 0,
    gridThickness: 0,
    tickLength: 0,
    lineThickness: 1,
    lineColor: “#29624A”
    },

    data: [{
    type: “splineArea”,
    toolTipContent: “Price: </b>${y}”,
    fillOpacity: 0.2,
    /*showInLegend: true,
    legendText: “Algorithm xZ & Worm”,*/

    lineColor: “#00FBFF”,
    exportEnabled: true,
    lineThickness: 2,
    markerType:”square”,markerColor: “red”, markerSize: 12,
    opacity: 0.8,
    markerBorderThickness: 1.5,
    markerBorderColor: “#00FBFF”,
    dataPoints: dps

    }]

    });

    }, false);
    I want to achieve such a line with the current value
    https://drive.google.com/file/d/1yK_xYoq_8r2G2kQpr4u0QeG7xqSwvyd7/view?usp=sharing

    • This topic was modified 2 weeks, 2 days ago by OlegLR.
    • This topic was modified 2 weeks ago by Vishwas R.
    #33836

    I want to achieve such a line with the current value
    https://drive.google.com/file/d/1yK_xYoq_8r2G2kQpr4u0QeG7xqSwvyd7/view?usp=sharing

    #33854

    Hi.

    I think it can be done by pre-defining a stlipline and assigning that pre-definition in axisY.

    `let stline=[];
    stline.push({value:YVALUE, [other option]})

    axisY : {
    stripLines:stline,
    :
    }

    #33865

    @oleglr,

    You can create a dynamic stripLine by adding a stripLine and then updating its value and label property to the subsequent y-value of the latest dataPoints which have been added dynamically.

    Please take a look at the code snippet below,

    function updateChart() {
      $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=" + (dataPoints.length + 1) + "&ystart=" + (dataPoints[dataPoints.length - 1].y) + "&length=1&type=json", function(data) {
        $.each(data, function(key, value) {
          dataPoints.push({
            x: parseInt(value[0]),
            y: parseInt(value[1])
          });
          chart.options.axisY.stripLines[0].value = value[1];
          chart.options.axisY.stripLines[0].label = value[1];
        });
        chart.render();
        setTimeout(function(){updateChart()}, 1000);
      });
    } 

    Also, kindly take a look at this JSFiddle for an example to create a dynamic stripLine.

    dynamic striplines on chart


    Adithya Menon
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.