Graphics

 View Only
  • 1.  Pie chart question

    Posted 07-23-2020 21:37

    So, we just started using an XPression and I only received training a couple weeks ago.

    Unfortunately, my news department is already asking me to do things that are turning out to be fairly  complex and over my present level of experience.

    I managed to follow the tutorial on pie charts and got most of the functionality that they want, save one thing.

    I would like to have the numbers (values that determine the size of the pieces) appear either attached to the pie slices themselves or around the outside rim of the chart.

    Below is sort of an example of what I'm asking for:

     

     

    Any easy ways to do this? Or does this require heavy scripting?

     



  • 2.  RE: Pie chart question

    Posted 07-23-2020 22:30

    I'm assuming this will animate and be tied to DataLinq data?


    #XPression


  • 3.  RE: Pie chart question

    Posted 07-24-2020 01:08

    Well first you're going to call or compose an email to any former math teachers (specifically a calculus teacher) and apologize for ever thinking "when will I ever use this math!"

    About a year ago we were exploring the uses of the Draw API (heavy scripting) for something like this. I developed a very dirty pie chart, but eventually ran into plenty of walls as we talked about how many features we'd want to include. Ultimately, we decided that for what we were doing, Pie Charts didn't really serve our needs any better than a bar chart. Also, we are fortunate to have graphic artists on hand for production operations, so infographics go to them.

    There's a lot of stuff to script in it from determining the slices based on the available datapoints, the math to break them into a proportional value (based on a 360 degree circle), the color to assign the slices, and then of course in your case the midpoint of the arc you need to place a numerical value on screen based on the circle's origin. Excel really makes it look simple eh?

    To give you a fighting chance, I have an early version of that script before I optimized it with some For loops and arrays but I don't have access to that file with a more elegant script (this only goes to 5 values). If you go into the SDK documentation that came with Xpression you can look for the APITexture Shader section and glean some info from there on how this is being made. If you provide me your email I can provide a lightweight Xpression file for you to poke around in. Good luck!

    dim Material as xpMaterial
    Engine.GetMaterialByName("PieMat",Material)
    dim APIPie as xpAPITextureShader
    Material.GetShaderByName("APIPie", APIPie)

    dim Pen as xpPen
    Pen = Engine.CreatePen
    Pen.Size = 20
    Pen.SetColor(0,0,255,255)

    dim Brush as xpBaseBrush
    Engine.CreateBrush(0, Brush)
    Brush.SetColor(20,170,204,255)

    dim EntryField as xpTextObject
    Self.GetObjectByName("Slices",EntryField)

    APIPie.Clear

    Engine.DebugMessage("Begin Execute",0)

    dim TextField1 as xpTextObject
    Self.GetObjectByName("Val1",TextField1)
    dim TextField2 as xpTextObject
    Self.GetObjectByName("Val2",TextField2)
    dim TextField3 as xpTextObject
    Self.GetObjectByName("Val3",TextField3)
    dim TextField4 as xpTextObject
    Self.GetObjectByName("Val4",TextField4)
    dim TextField5 as xpTextObject
    Self.GetObjectByName("Val5",TextField5)

    dim Outputs() as Double = {Cdbl(TextField1.Text),Cdbl(TextField2.Text),Cdbl(TextField3.Text),Cdbl(TextField4.Text),Cdbl(TextField5.Text)}
    dim HighestIndex as Integer = Outputs.Length-1
    For index as Integer = 0 to Outputs.Length-1
    If Outputs(index) = Nothing Then
    HighestIndex = HighestIndex-1
    End If
    Next

    dim TotalPie as double

    ' Individual Slice Values

    For index as Integer = 0 to HighestIndex
    TotalPie += Outputs(index)
    Next

    'Individual Slice Angles
    dim PieAngles(HighestIndex) as Double

    For index as Integer = 0 to HighestIndex
    PieAngles(index) = Math.Round((Outputs(index) / TotalPie)*360,2)
    Next

    Engine.DebugMessage("Highest Index Before Start Angle Math = " & HighestIndex,0)


    dim StartAngleVal as double = 0
    dim StartAngles(HighestIndex) as Double
    StartAngles(0) = StartAngleVal
    For index as Integer = 1 to HighestIndex
    StartAngles(index) = StartAngleVal + PieAngles(index-1)
    StartAngleVal += PieAngles(index-1)
    Next

    '=======================================
    'Individual Slice Math
    '=======================================

    if (HighestIndex = 1) then
    Engine.DebugMessage("Two",0)

    APIPie.FillPie(Brush, 810,390,300,300,0,PieAngles(0))
    Brush.SetColor(61,136,153,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(1),PieAngles(1))

    else if (HighestIndex = 2) then
    Engine.DebugMessage("Three",0)

    APIPie.FillPie(Brush, 810,390,300,300,0,PieAngles(0))
    Brush.SetColor(61,136,153,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(1),PieAngles(1))
    Brush.SetColor(0,255,162,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(2),PieAngles(2))

    else if (HighestIndex = 3) then
    Engine.DebugMessage("Four",0)

    APIPie.FillPie(Brush, 810,390,300,300,0,PieAngles(0))
    Brush.SetColor(61,136,153,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(1),PieAngles(1))
    Brush.SetColor(0,255,162,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(2),PieAngles(2))
    Brush.SetColor(204,20,90,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(3),PieAngles(3))

    else if (HighestIndex = 4) then
    Engine.DebugMessage("Five",0)

    APIPie.FillPie(Brush, 810,390,300,300,0,PieAngles(0))
    Brush.SetColor(61,136,153,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(1),PieAngles(1))
    Brush.SetColor(0,255,162,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(2),PieAngles(2))
    Brush.SetColor(204,20,90,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(3),PieAngles(3))
    Brush.SetColor(255,91,51,255)
    APIPie.FillPie(Brush, 810,390,300,300,StartAngles(4),PieAngles(4))
    end if

    APIPie.DrawEllipse(Pen, 760, 340, 400, 400)

    Array.Clear(Outputs,0,Outputs.Length)
    Array.Clear(PieAngles,0,PieAngles.Length)
    Array.Clear(StartAngles,0,StartAngles.Length)
    Engine.DebugMessage("OutputsLength = " & Outputs(0),0)
    Engine.DebugMessage("PieAngle Degrees = " & PieAngles(3),0)

     


    #XPression


  • 4.  RE: Pie chart question

    Posted 07-24-2020 15:02

    Thanks for the help, all!

    I should have described my project goals a bit more thoroughly. You see, I work for a television station and my plan was to create this pie chart as a template scene that could be used by news producers live in a newscast. It would function through a MOS environment. The producer would just manually enter the data points. More than likely it would be used for political stuff.

    I managed to follow a tutorial I found on YouTube for making a pie chart using Visual Logic. I'm giving them the ability to do anywhere from 2-8 slices in 8 different colors. No particular reason for 8, other than I just came up with 8 colors that stood out over our graphic background.

    I just hit a wall on how to display the actual numbers, because I know they're going to ask me for that. I suppose I could just have them incorporate it into the "legend" text? That would be the easy route. I'm planning to dress it up a bit more than what you see above. It will be over a moving background and probably have a title and source disclaimer. that the producers would also type in the plugin.

    Thanks for the code, Martin. I'm definitely already seeing how scripting can really open up the possibilities with XPression. It's still a bit outside my learning curve at the moment. I'm hopefully going to get there soon! My email address is kenny.meade@wghp.com, if you're still willing to drop a file to me. Sometimes I do learn best by "picking apart" something that already works.

    And Shane, I actually "faked" the animation by simply animating the end angle of a larger cylinder with a mask material on it to simply reveal the whole pie chart. Maybe not the prettiest presentation, but that was another one that sort of stumped me. How to animate the end angles of each piece in like a cascading fashion. 

    And yes, somewhere a former math teacher is glaring at me for just wanting to play with pretty pictures!


    #XPression


  • 5.  RE: Pie chart question

    Posted 07-26-2020 14:17

    Hello Kenny,

    here is a visual Logic sample to position text so it seems attached to a pie chart :

    Cosinus and Sinus are the magical functions to convert angle into x,y position.

     

    Here is the sample project :

    https://drive.google.com/file/d/1axWMv8wBsyzGq6mBJJJcCBDBe3PQYXS2/view?usp=sharing

    change start and end angles to see how it behave.

    Hope it helps,

    Antoine.


    #XPression