Forums Ignite UI for jQuery
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
Chao
435
Can marker size be changed?
posted

Hi,

For example, if markerType="triangle" used, is it possible to change the size of the triangle?

Thanks,

Parents
  • 1775
    Verified Answer
    posted

    Hello, cgao

    I developed a sample for you which draws scatter series with triangle markers with settings for triangle size and color. It is based on custom marker as Nikifor suggested earlier. Please, find the sample attached. Just to be clear, I'll explain the most important parts:

     1. Setting custom marker template. The markerTemplate option is configured with a marker template object.

    1. series: [{
    2.     ...
    3.     markerTemplate: new TriangleMarker(15, "lightblue", "black", 1)
    4.     ...
    5. }],

     

    2. Basic structure of the custom marker object. The measure and render methods are called by the chart widget to draw a custom marker. The extent parameter defines how large the triangle will be.

    1. function TriangleMarker(extent, fillBrush, outlineBrush, outlineThickness) {
    2.     this.measure = function (measureInfo) {
    3.                 
    4.     };
    5.     this.render = function (renderInfo) {
    6.                 
    7.     }
    8. }


    3. Triangle drawing logic. The logic uses the marker coordinates as a center of a circle and draws a unilateral triangle in this circle.

    1. this.render = function (renderInfo) {
    2.     var context = renderInfo.context;
    3.     //  Marker center
    4.     var X = renderInfo.xPosition;
    5.     var Y = renderInfo.yPosition;
    6.  
    7.     //  Helper variables for triangle plot
    8.     var startX, vertexX, startY, vertexY;
    9.  
    10.     context.beginPath();
    11.     //  Calcualte and draw Vertex 1 at 60 degress
    12.     //  angle in radians = angle in degrees * Pi / 180
    13.     vertexX = startX = X + Math.cos(90 * Math.PI / 180) * extent;
    14.     vertexY = startY = Y + Math.sin(90 * Math.PI / 180) * extent;
    15.  
    16.     context.moveTo(vertexX, vertexY);
    17.  
    18.     //  Calcualte and draw Vertex 2 at 180 degress
    19.     vertexX = X + Math.cos(210 * Math.PI / 180) * extent;
    20.     vertexY = Y + Math.sin(210 * Math.PI / 180) * extent;
    21.  
    22.     context.lineTo(vertexX, vertexY);
    23.  
    24.     //  Calcualte and draw Vertex 3 at 300 degress
    25.     vertexX = X + Math.cos(330 * Math.PI / 180) * extent;
    26.     vertexY = Y + Math.sin(330 * Math.PI / 180) * extent;
    27.  
    28.     context.lineTo(vertexX, vertexY);
    29.     context.lineTo(startX, startY);
    30.  
    31.     //  Set stroke and fill
    32.     context.fillStyle = fillBrush;
    33.     context.fill();
    34.  
    35.     context.lineWidth = outlineThickness;
    36.     context.strokeStyle = outlineBrush;
    37.     context.stroke();
    38. }


    I hope this can provide you the required functionality. Post here if you need some additional questions.

    Cheers, Lazar

    CustomMarker.zip
Reply Children
No Data