Dynamic Updating Chart

Answered

DvJenk

• June 26, 2024 19:23

How can I create a dynamic bar graph like the one in the image below?

1

• 

  Jason Stanczyk

  • July 02, 2024 16:48
  • Edited

  
  Plugins:

                  Shape Plugin

                  Data Source Plugin to read data

                                  (Tutorial data source plugin was used for example)

  Add Premade Data.xml to Kanzi project

  Add Data source to Data Context of Parent node(if any)

  Create Path 2D node

  Bind the Path commands of the Path 2D node as follows
                  BarHeight = 100

  BarWidth = 55

  PATHSTRING = "M "

  PATHSTRING = PATHSTRING  + STRING(25 + 0*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data0}))

  PATHSTRING = PATHSTRING + "L "

  PATHSTRING = PATHSTRING + STRING(25 + 1*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data1}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 2*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data2}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 3*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data3}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 4*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data4}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 5*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data5}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 6*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data6}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 7*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data7}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 8*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data8}))

  PATHSTRING = PATHSTRING + " " + STRING(25 + 9*BarWidth) + ", " + STRING(BarHeight * (1 -  {DataContext.data9}))

   

  This is the code needed to create the line graph, we are just accepting the DataContext.data# and adding it to the PathString.

  On the parent node, you need to add the Data Source to the data Context Property

  On the Path 2D node, you need to bind Data Context Property to {DataContext.chartdata}

  The Path should be aligning to the data you provided, and now you can customize the look and feel of the line itself.
  
  You can download Kanzi Shapes for the version of Kanzi you are using from Kanzi Hub.
  
  More information can be found here:
  https://docs.kanzi.com/shapes/1.0.0-beta6/working-with/paths.html
  
  

  2

Please sign in to leave a comment.