Skip to Content
Author's profile photo Former Member

Design Studio 1.2 SDK – Creating a custom donut component

While this is not the first component I have created it’s proving to be a versatile component that I wanted to share with the community.  If you’re using Design Studio 1.3 you now have the ability to use and configure a donut component but for those of us stuck with 1.2 the only option is developing in the SDK.

This particular component took under two days to build, with the bulk of that time spent on the finer details such as positioning the text, sizing the arrow, ….  It’s fully configurable for its intended use but additional settings could easily be added if required (ie. text color, “donut-hole” color, shadow, etc…):

Design Studio SDK - donut img1.JPG

Figure 1

As I do with components where it makes sense I also added the following three events:  On Click, On Mouse Over and On Mouse Out:

Design Studio SDK - donut img2.JPG

Figure 2

Linking a donut component to a detailed WebI is simply a matter of adding code to the On Click event, for example.

The display of both the arrow and the “From” value below the donut are triggered by setting the Previous Value.  With a value of “-1” neither are displayed; anything other than will cause both to appear.  It’s important to note no data validation is done as I’ve assumed the dashboard developer will set reasonable percentage values.  The donut will not break if, for example, a value of 200 is used but it will display no differently from using 100.

While the logic to determine the arrow direction and color is not handled within the component it could easily be accomplished.  As it is a developer explicitly sets both the color and direction of the arrow (see Figures 3 & 4 below):

Design Studio SDK - donut img3.JPG

Figure 3

Design Studio SDK - donut img4.JPG

Figure 4

The code is quite simple and I have uploaded the two base files here: https://github.com/davelr/Design-Studio-SDK-Custom-Donut

Having not yet seen the donut in DS 1.3 I would be very curious to know how it compares.  I welcome any feedback you may have.

Assigned tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      Hi David,

      thanks for sharing that new component. I added it to my post

      List of Design Studio SDK Components

      Cheers

      Dirk

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Dirk,

      Thank-you for the endorsement!  I'll be following your post to see what else pops up.

      Dave

      Author's profile photo Mike Howles
      Mike Howles

      Hey, David - Great post, surprised I missed it until recently!  I think this is a great, clean example of how to use the HTML canvas component.

      Would you be interested in participating in SCN Design Studio SDK Development Community project?  If you do not have the interest or time, would you be willing to allow us to at least publish your source code in our repository to be made available for others?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Michael, thanks for the positive feedback!  You've posted some terrific articles on the Design Studio SDK that I've read over the last year.

      Yes, I would be interested in being a part of your new project, time-dependent of course.  I think that's a great idea to publish this source code to the new repository.  I just remembered I still need to upload the missing .ztl file for it to be complete.  I'll get that done between tonight and the weekend and let you know.

      Dave

      Author's profile photo Former Member
      Former Member

      Hi David,

      Thank you for sharing your work with the community, unfortunately I am not being able to successfully install your donut component. Maybe this is not the correct place to post that kind of a content but I couldn't find any solution over the community.

      I am working with Design Studio 1.5 and facing the following error when I am trying to install the component under Tools -> Install Extensions to Design Studio and

      1) selecting the zip file.

      Failed to discover all connectors.

      RepositoryDiscoveryStrategy failed with an error

      Failed to process repository contents

      No repository found at jar:file:/C:/Users/hypadmin/Desktop/05%20SDK%20Components/02%20Community/Design-Studio-SDK-Custom-Donut-master.zip!/.

      2) entering the URL as davelr/Design-Studio-SDK-Custom-Donut · GitHub

      Failed to discover all connectors.

      RepositoryDiscoveryStrategy failed with an error

      Failed to process repository contents

      Unable to read repository at https://github.com/davelr/Design-Studio-SDK-Custom-Donut.git/content.xml.

      sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

      I guess that the donut component is not compatible with the DS 1.5 however if it is compatible do you or does anyone has any kind of workaround about the problem I have?

      Best,

      Ozan

      Author's profile photo Former Member
      Former Member

      Hi David - Thanks for sharing it. I have tried downloading the .zip file and tried installing it. It is not working. Can you confirm the latest file is placed / the working version is available.?

      Author's profile photo Former Member
      Former Member

      Hi David,-This chart looks amazing. I would like to use it in my application. Request you to please specify from where I can download latest working version. Thanks!

      Author's profile photo Former Member
      Former Member

      Hello David , I am unable to convert the given source code into Deployable feature. I am using DS 1.6 . Its throwing Export Error at final export.

      Please Advise.

      Thanks,

      Praveen

      Author's profile photo Former Member
      Former Member

      Hi David.

      Great work you have done.

      Any chance you can provide us with the complete files, so that we can use it?

      Regards,

      Thatoyame

      Author's profile photo Former Member
      Former Member

      same problem, impossible to install in DS 1.6 SP01

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hello David,

      I hope you doing good. I have integrated your code into the scn repository, so now your donut component is available there as well (in release 3.0). with the integration, the corresponding ZTL script is generated from the spec and APS is available as well.

      For those, who want to use it, you can install it with the SCN repository 3.0.

      Component List 3.0 - SCN Design Studio Community

      Karol

      Author's profile photo Former Member
      Former Member

      Hi,

      Experts i was developing donut with data binding but i was lagging there can you please give me valuable suggestions.

      Thank You,

      Pavan Kumar

      Author's profile photo Lakshmikanth Adharapurapu
      Lakshmikanth Adharapurapu

      Hi,

      Can you explain bit more what you are trying to achieve?

      BR,

      Lakshmikanth

      Author's profile photo Former Member
      Former Member

      Hello All,

      I'm working with this component, and I couldn't get to change the font style on the value, has anyone done it yet?
      Thanks!

      Author's profile photo Lakshmikanth Adharapurapu
      Lakshmikanth Adharapurapu

      Hello Rafael,

      I have faced the same problem with font style, in my scenario i am doing a data binding for current value as float and previous value as float....I am getting a very high font number in the middle of the donut overallping the text. Then i have followed this work around to ensure no overlapping text is visible in the donut.

      1.My donut height and width is 250.

      2.then i have dragged and dropped text box and applied below css to convert it to circle and to fill the circle with white back ground. if you want to change the radius of the circle the you can change border radius, height and width as per your requirement.

      border: 1px solid white;
      border-radius: 136px;
      height:136px;
      width:136px;
      background-color:white;

      3.Then Cover the donut center section with white back ground circle from step 2.

      4. Now you can drag one more text box and assign data binding property to display the value where you can format as per your wish.

      5.Incase if your values are more than four digits the you can go to 'formatter function' in the current value as float section and apply below logic where you can avoid text overflow scenario.

      if (value < 1000)

      {
      return Convert.floatToString(value,"0");
      }

      if (value >= 1000)

      {
      return Convert.floatToString(value/10,"0");
      }

       

      Hope this helps, let me know if you need more help on this topic.

       

      BR,

      Lakshmikanth

      Author's profile photo E. T
      E. T

      Hi David,

      Thanks for your blog.
      Question if we create SDK component, can these component be used with the new desing studio release ?

      Thanks
      david

      Author's profile photo Lakshmikanth Adharapurapu
      Lakshmikanth Adharapurapu

      Hi David,

      Very nice post...Just a question, any idea how to format the values in the middle of the donut value?...current value as float value should appear smaller in the middle of the donut...Hence i am using data binding for specific key figure

       

      BR,

      Lakshmikanth