Announcement

Collapse

Looking for a User App or Add-On built by the NinjaTrader community?

Visit NinjaTrader EcoSystem and our free User App Share!

Have a question for the NinjaScript developer community? Open a new thread in our NinjaScript File Sharing Discussion Forum!
See more
See less

Partner 728x90

Collapse

Can I place an image over a chart at a specific position?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Can I place an image over a chart at a specific position?

    Is there a way to place an image (say a jpeg) over a chart at a specific bar and price?

    #2
    Hello AnotherTrader , thanks for your question.

    This is possible with the use of SharpDX in the OnRender method. You can place any bitmap image onto a chart.

    We have an example that I have attached to this post. This example draws a SharpDX Bitmap onto the RenderTarget. First, the images are loaded into Bitmap objects in the UpdateImage method, then the image is drawn to the RenderTarget with the SharpDX “DrawBitmap” method. Note that RenderTarget dependent resources must be disposed and recreated when the RenderTarget changes, or with each OnRender pass. Use OnRenderTargetChange as demonstrated for better performance.
    The Bitmap should be updated in OnRender, and any signals to change the Bitmap should be signaled in OnBarUpdate, and then changed in the next OnRender pass.

    Please let me know if you have any questions on this material.
    Attached Files
    Chris L.NinjaTrader Customer Service

    Comment


      #3
      How could I set it up so that additional text appears if the user runs their mouse over the image?

      Comment


        #4
        Hi AnotherTrader, thanks for your reply.

        I am not sure if these support tool tips, that would be a C# concept that would need to be researched more on your own.

        Best regards,
        -ChrisL
        Chris L.NinjaTrader Customer Service

        Comment


          #5
          you can try this code to place an image over a chart at a specific position
          Step 1
          HTML Code:
            	var chart = new CanvasJS.Chart("chartContainer",{ 	title :{ 	text: "Position Image over chart" 	}, 	data: [{ 	type: "column", 	dataPoints : [ 	{ label: "apple", y: 10 }, 	{ label: "orange", y: 15 }, 	{ label: "banana", y: 25 }, 	{ label: "mango", y: 30 }, 	{ label: "grape", y: 28 } 	] 	}] 	}); 	chart.render();
          Step2:

          HTML Code:
            	$('img').attr('src', url) 	.attr("class", label) 	.css({"display": "none"}) 	.appendTo($('#chartContainer>.canvasjs-chart-container'));

          Step3:

          HTML Code:
            	imageBottom = chart.axisX[0].bounds.y1; 	imageCenter = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[0].x); 	  	image.css({"position": "absolute", 	"display": "block", 	"top": imageBottom - fruit.height(), 	"left": imageCenter - fruit.width()/2 	});

          Comment

          Latest Posts

          Collapse

          Topics Statistics Last Post
          Started by zstheorist, Today, 07:52 PM
          0 responses
          3 views
          0 likes
          Last Post zstheorist  
          Started by pmachiraju, 11-01-2023, 04:46 AM
          8 responses
          149 views
          0 likes
          Last Post rehmans
          by rehmans
           
          Started by mattbsea, Today, 05:44 PM
          0 responses
          5 views
          0 likes
          Last Post mattbsea  
          Started by RideMe, 04-07-2024, 04:54 PM
          6 responses
          33 views
          0 likes
          Last Post RideMe
          by RideMe
           
          Started by tkaboris, Today, 05:13 PM
          0 responses
          5 views
          0 likes
          Last Post tkaboris  
          Working...
          X