Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago

Graph with integrated arrows

Good day!    We need to create a "combo chart" that contains a Column Chart with integrated arrows and that those arrows move and resize along the columns (y axis).   Currently, we have a native C...
Need Help
Anonymous's avatar
Anonymous
Not applicable
7 years ago

Hi Anonymous 

How is it working for you now?
Consider using SVGs.

You can set their properties (position,size,color,etc.) dynamically.

Thanks!
A

  • Anonymous's avatar
    Anonymous
    Not applicable
    7 years ago

    Hi, Anonymous! Thank you for your response. Can you give me a little more information about SVGs? Right now, the arrows are at a fixed position over the column chart. If the column chart changes because we get a below 0 value, the arrows stay at the same place. 

     

    Regards, 

    • Anonymous's avatar
      Anonymous
      Not applicable
      7 years ago

      Hi Anonymous 

       

      I did this solution as "quick and dirty". Feel free to take this idea and develop it to a better/nicer solution.

      Also, I am attaching the pbix file for reference.

       

      I have created 2 svg strings with different positions. This goes into a custom column.

      The code is:

      PRES ARROW = 
var A  =
"<svg xmlns='http://www.w3.org/2000/svg'>
		    <polygon points='2,30 22,30 11,50'
            style='stroke:#660000; fill:blue; stroke-width: 3;'/>
		    Sorry, your browser does not support inline SVG.
	  </svg>"

var B = 
"<svg xmlns='http://www.w3.org/2000/svg'>
		    <polygon points='2,0 22,0 11,20'
            style='stroke:#660000; fill:blue; stroke-width: 3;'/>
		    Sorry, your browser does not support inline SVG.
	  </svg>"

return IF(T2[PRESUPUESTO] < 0, A,B)

      Add the column into a HTML contianer (Download from marketplace)

      So, if the value of PRESUPUESTO is negative, the triangle will be below the X axis. Otherwise, above it (i.e. PRESUPUESTO is positive)

       

       

      Good Luck!
      A

      • Anonymous's avatar
        Anonymous
        Not applicable
        7 years ago

        Thank you! We're checking your proposal and evaluating how we can apply it. The only issue we see here is that the column chart must have fixed axis to get the effect we want, so the arrow appears to move over the column. This can be tricky, because we can fix the axis, but eventually get a over the limit value. 

         

        Regards!