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,

  • 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
  • 13438
    posted

    Hello Chao,

    You can create a custom marker in order to achieve this. It is far more complex. A good explanation is discussed in the following forum thread - http://ko.infragistics.com/community/forums/t/71724.aspx

     

    Currently we do not offer this functionality. I have logged a feature request with id PI12080043. I have sent this product idea directly to our product management team.  Our product team chooses new product ideas for development based on popular feedback from our customer base.  Infragistics continues to monitor application development for all of our products, so as trends appear in requested features, we can plan accordingly.

     

    We value your input, and our philosophy is to enhance our toolset based on customer feedback.  If your feature is chosen for development, you will be notified at that time.

     

    If you would like to follow up on your product idea at a later point, you may contact Developer Support management via email.  Please include the reference number of your product idea in the subject and body of your email message.  You can reach Developer Support management through the following email address:  dsmanager@infragistics.com