3D Silverlight Charts in SharePoint: SmartTools.Charts

Last week I was teaching the U2U Advanced SharePoint Development course in Brussels when one of my students showed me a web part he had created. The web part showed a cool 3D chart (rendered with Adobe Flex) based on some data coming from a SharePoint list. This idea inspired me to create an addition to the SmartTools project on CodePlex: the SmartTools.Charts component. The SmartTools.Charts component contains a web part that can show charts rendered by making use of a very cool open source Silverlight control created by Visifire (since I don't have any knowledge about Adobe Flex). The web part can be configured to read data from any list or document library of that site on which it's placed. At the end of this post you can see a screenshot of the web part in action. I've created a small video as well since the charts have some fancy animations when they're shown, so you need to see it in motion! A high resolution version of that video can be download from this page (bottom right). If you'd like to try the SmartTools.Charts component, you can download a first beta version from the CodePlex site (direct link to the releases). Since this is an early beta version, things can go wrong, and breaking changes in future releases can be expected; so basically use it at your own risk (source code is included). As usual, let me know if you have any comments, remarks or feature requests.


SmartTools.Charts from Jan Tielens on Vimeo.

22 Comments

  • Dat ziet er prachtig uit!

  • I like this.
    We can use CQWP to use xslt and javascript to render these charts too... since Visifire allows it.
    This will be more geared towards end users I thinl, I am always confused about developing tools for End users or for Super Users /Admins because there is always a trade off ( simple but less configurable and customizable)

  • Wow jan! Dat ziet er indrukwekkend uit!
    Karine

  • Cool, thanks for your work man!

  • Is there anything else needed for configuration? After configuring like the demo no chart displays, the web part just displays empty white space. Right click does display silverlight menu though.

  • @Peter, do you have some data in the list? Are the properties correctly configured?

  • @peter: could you email me the HTML of the page that should render the chart? jan at my last name dot name.

  • @Jan: the error is gone now when I followed the Sales example. Thanks for this great web part, will try some different views now!

  • Figured out the error also: as soon as you use a calculated column as a Value field the following error displays:

    Error Log Version=2.0.1 Beta:
    --------------------------------
    1) Copy & Paste the contents of this log in www.visifire.com/forums for support.

    2) Exception: 2260 An error has occurred. [Line: 2 Position: 697]

    3) XML:


    4) StackTrace:
    at MS.Internal.XcpImports.CreateFromXaml(String xamlString, Boolean createNamescope, Boolean requireDefaultNamespace, Boolean allowEventHandlers, Boolean expandTemplatesDuringParse)
    at MS.Internal.XcpImports.CreateFromXaml(String xamlString, Boolean createNamescope, Boolean requireDefaultNamespace, Boolean allowEventHandlers)
    at System.Windows.Markup.XamlReader.Load(String xaml)
    at SLVisifireChartsXap.App.CreateChart()
    at SLVisifireChartsXap.App.RenderEngine()
    at SLVisifireChartsXap.App.Application_Startup(Object sender, StartupEventArgs e)
    at System.Windows.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
    at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)

  • @peter, thanks for the feedback! I'll try to solve the bug for the next release.

  • I tried your control with the IIS configuration and it works fine for one value field. Does this control support other chart types like clustered bar chart, pie chart, stacked bar chart etc.? Would appreciate if you let me know as early as possible how to configure to achieve that.

  • Jan,

    Nice but do you want to mention the one who gave you the idea as well? I think it should be only fair to do so as credits should go to him.
    I don't want to do it here myselves as I know the person in question but I think you should do this.
    He didn't blogged on this yet as he asked you the question in how you would be able to group data from the list so the charting component would even be more flexible.

    Best regards,
    Geert

  • @Geert: I think I did ... "Last week I was teaching the U2U Advanced SharePoint Development course in Brussels when one of my students showed me a web part he had created. The web part showed a cool 3D chart (rendered with Adobe Flex) based on some data coming from a SharePoint list. This idea inspired me to ..."

    I don't feel comfortable putting names of students/customer names on a public site (especially if questions are asked in private email discussions). So if that person doesn't mind having it's name on my blog, or even better if that person has a blog post with his version of the web parts (using Flex) I'd love to put a link to it.

    I hope you don't think I'm taking credit for somebody else's idea since I clearly stated: "This idea inspired me to ... ".

  • @Jan: Fully agree but you could have done this from the start. Just have the person contacted and asked if he wanted to be mentioned in your text -> "course in Brussels when one of my students showed me a web part" -> "course in Brussels when one of my students, name - website - link - ... , showed me a web part"

    I feel that in blogs we often 'forget' to cross-check with the references we make. It should be considered as best practice to
    1. contact the person to see if you can post what you want to post (this sometimes can even cause copyright issues)
    2. if he wants to be referenced or not

  • Hi, nice webpart! Can you in the next version make it possible to choise a list in another site in the same sitecollection, via dropdown in the web parts config?

  • I tried to install the Charts, but when I add the web part, my chart keeps reporting "ChartWebPart

    Value cannot be null. Parameter name: format

    Details: System.ArgumentNullException: Value cannot be null. Parameter name: format at System.String.Format(IFormatProvider provider, String format, Object[] args) at System.String.Format(String format, Object arg0, Object arg1) at SmartTools.Charts.ChartWebPart.RenderContents(HtmlTextWriter writer)

    "
    am I missing something?
    Thanks!
    Joe

  • I was able to install the LIST webpart and im still getting a Blank list chart webpart, i made sure that the MIME were enabled on our windows 2003 server, also all of the CHARTData are correct. Any thoughts, it would seem that the server is unable to render the image. Thanks

    Mike

  • The chart is working today - woot! Maybe the mime types just needed some time to take effect on the server?

  • Hi Jan. I was able to get this webpart to work but the issue i am facing is that the other things such as menu,images in the page appear underneath this webpart. Where do it set the windowless state for this silverlight webpart? Please help. Thanks.

  • Managed to solve this by setting this.windowless=true in the Visifire2.js file in the 12 hive.

  • I am getting the same error as Joe...

    Value cannot be null. Parameter name: format

    Does anyone have extra steps?

  • Interessante Informationen.

Comments have been disabled for this content.