An example of a graph with the designation of colored segments

[OlegLR]

An example of a graph with the designation of colored segments
Algorithm for dropping numbers of the displayed sinusoid curve

Thank you very much for the tip! Once again I am convinced that your team is the best!
After reviewing your example, I want to add some charting logic to suit my needs.
It is required to build a graph according to the conditions:
1. There is input data (random data) – numbers from 0 to 9 – (nominal values)
2. These numbers differ in color (depicted as a segment on a linear dynamic chart, red – down, blue – up)
3. The logic of building and rendering the color of the graph line (When even and odd blue numbers go in a row, then, for example, 0 – 2 – 3 – 4 -…- 9 (increase) – then the segment is blue on the graph. When even numbers go and odd red numbers go in a row, then the segment on the line graph is red.If there are red and blue, then we compare the denomination of the numbers, for example, if 5 (odd blue) – 6 (even blue) – 1 (odd blue) – 6 (even blue) – 2 (even red), then in the above figure it is represented by colored segments “color pressure at face value” and according to the characteristics of the digit (even or odd).In other words, a sinusoidal curve is displayed on the Cartesian plane, which is built according to algorithm (even numbers in the blue zone (above zero) will be higher than odd ones, and even ones in the red zone will be lower than odd ones), which is shown in the figure.
I would be grateful if you could help me write a function for this logic.

[Indranil]

@oleglr,

You can set markerBorderColor & lineColor based on your condition (Comparing current y-value with the previous y-value and checking if it’s even or odd) to achieve this. Please find the code-snippet below –

var updateChart = function () {      	

  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));

  if(dps.length && yVal < dps[dps.length - 1].y)
  {
    //Setting markerBorderColor and lineColor for each specific dataPoint 
    color = (yVal % 2 === 0 ? "red" : "blue");
    dps.push({x: xVal, y: yVal, markerBorderColor: color});
    dps[dps.length - 2].lineColor = color;
  }
  else if(dps.length)
  {
    //Setting markerBorderColor and lineColor for each specific dataPoint 
    color = (yVal % 2 === 0 ? "blue" : "red");
    dps.push({x: xVal, y: yVal, markerBorderColor: color});
    dps[dps.length - 2].lineColor = color;
  }
  else
    dps.push({x: xVal, y: yVal, markerBorderColor: "blue"});

  xVal++;
  chart.render();		
}

Please take a look at this JSFiddle for the complete code.

Considering this thread as a duplicate of Line Chart Connector Colors and hence closing the same.

___________
Indranil Singh Deo
Team CanvasJS