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

Help to dynamically bind the stripline to the diagram!

Viewing 6 posts - 1 through 6 (of 6 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 4 months ago by OlegLR.
    • This topic was modified 4 months 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

    #34263

    Good day! Please tell me a way with an example of how you can add a second stripline to the chart so that it also dynamically follows the set value!

    #34278

    @oleglr,

    You can add new stripLines dynamically by using the addTo method. If you like to update the values of the existing stripLines, you can use the set method.

    If you are facing any issues, kindly create JSFiddle reproducing the issue you are facing with sample/dummy data and share it with us so that we can look into your code/chart options being used, understand the scenario better and help you out.


    Adithya Menon
    Team CanvasJS

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

You must be logged in to reply to this topic.