Per Vertex Coloring

Per-vertex colors allows you to alter the color of individual points in qdex. If the points are connected with a line or a fill, the color in between the two points will be the average of the two.

Per-vertex coloring can be used to create multi-colored lines, gradient fills, and assist in animation. You can specify per-vertex coloring in the initial plot declaration, or in Lua script. You can also specify the per-vertex color of CSV data, vectors, and matrices.

XML

The per-vertex colors are specified using the colors tag inside of the series tag. A X11 color can be specified or the RGBA value can be used. Altering the draw mode allows for gradient fills.

<xyPlot>
  <series>
    <data>1 1; 1 -1; -1 -1; -1 1; 1 1</data>
    <colors>red; green; blue; 64 128 72; 58 39 239 160</colors>
  </series>
</xyPlot>

<drawing>
  <series draw="radialFill">
    <data>1 1; 1 -1; -1 -1; -1 1; 1 1</data>
    <colors>red; red; white; white; red</colors>
  </series>
</drawing>

Lua

When manually adding a point to a series you can specify the color that you would like that point to be. As above, you can specify the name of the color or use RGB/RGBA codes.

<drawing name="myDrawing">
  <series name="mySeries" draw="radialFill" manual="true" capacity="8" />
</drawing>

<script>
  local newPoint = myDrawing.mySeries;

  function drawColours()
  newPoint:Add(0, 0, color.white)
  newPoint:Add(-0.5, 0.86, color.green)
  newPoint:Add(0.5, 0.86, color.rgba(255, 255, 0, 100))
  newPoint:Add(1, 0, color.orange)
  newPoint:Add(0.5, -0.86, color.rgb(255, 0, 0))
  newPoint:Add(-0.5, -0.86, color.purple)
  newPoint:Add(-1, 0, color.blue)
  newPoint:Add(-0.5, 0.86, color.green)
  newPoint:Update()
  end

  drawColours()
</script>

You can also alter the colors of predefined points by creating a vector of colors. In the below animation, new colors are calculated for the four points of the square then put into a color vector. The Colors attribute is used to update the vertex colors.

<drawing name="aPlot">
  <series name="mySeries" draw="radialFill" manual="true" />
</drawing>
<script>
  local blue = 0;
  local up = true;
  local myColorVector = colors(4);

  -- Initialize the plot vertices (including initial colors)
  aPlot.mySeries:Clear();
  aPlot.mySeries:Add(0, 0, color.rgb(30, 144, blue));
  aPlot.mySeries:Add(0, 1, color.rgb(30, 144, blue));
  aPlot.mySeries:Add(1, 1, color.rgb(30, 144, 255-blue));
  aPlot.mySeries:Add(1, 0, color.rgb(30, 144, 255-blue));
  aPlot.mySeries:Update();
</script>

<button name="sim_button" content="Start">
  <onClick>
    if sim_button.Text == "Start" then
    sim_button.Text = "Stop";
    mySim:Start();
    else
    sim_button.Text = "Start";
    mySim:Stop();
    end
  </onClick>
</button>

<simulation name="mySim" duration="30">
  <onUpdate>
    <![CDATA[                
     if up then
         if blue < 255 then
             blue = blue + 1;
         else
             up = false;
         end
     else
         if blue > 0 then
             blue = blue - 1;
         else
             up = true;
         end
     end
     
     myColorVector[1] = color.rgb(30, 144, blue);
     myColorVector[2] = color.rgb(30, 144, blue);
     myColorVector[3] = color.rgb(30, 144, 255-blue);
     myColorVector[4] = color.rgb(30, 144, 255-blue);
     
     aPlot.mySeries.Colors:Clear();
     aPlot.mySeries.Colors:Add(myColorVector);
     aPlot.mySeries:Update();
     ]]>
  </onUpdate>
</simulation>

CSV

If you would like to specify the per-vertex color of points in the CSV file, create a separate CSV file with a single column of colors. Colors can be specified using their X11 color names (e.g. lightSteelBlue) or their RGBA value (e.g. 230 230 250 or 230 230 250 100). The color CSV should contain as many colors as there are points in the data CSV file; points with unspecified colors will not appear in the plot.

Add the color to the series using the color tag inside of the CSV series.

<xyPlot>
  <series>
    <data src="resources\noisy_sine_wave.csv" />
    <colors src="resources\colors.csv" />
  </series>
</xyPlot>