Thursday, December 04, 2008 6:20 PM Jan Tielens

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.

Filed under:

Comments

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Thursday, December 04, 2008 3:14 PM by Karel

Dat ziet er prachtig uit!

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Thursday, December 04, 2008 4:38 PM by bazztrap

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)

# Links (12/4/2008) « Steve Pietrek - Everything SharePoint

Thursday, December 04, 2008 8:55 PM by Links (12/4/2008) « Steve Pietrek - Everything SharePoint

Pingback from  Links (12/4/2008) « Steve Pietrek - Everything SharePoint

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Friday, December 05, 2008 12:18 AM by Karine

Wow jan! Dat ziet er indrukwekkend uit!

Karine

# Dew Drop - December 5, 2008 | Alvin Ashcraft's Morning Dew

Friday, December 05, 2008 9:47 AM by Dew Drop - December 5, 2008 | Alvin Ashcraft's Morning Dew

Pingback from  Dew Drop - December 5, 2008 | Alvin Ashcraft's Morning Dew

# SharePoint Daily for December 5, 2008

Friday, December 05, 2008 9:51 AM by SharePoint Daily

Top News Stories Microsoft Empowers IT Professionals by Providing Training on Office SharePoint Server

# Thailand Luxury Development

Friday, December 05, 2008 9:38 PM by Thailand Luxury Development

Pingback from  Thailand Luxury Development

# Hosting Silverlight charting controls in a SharePoint Web Part

Saturday, December 06, 2008 8:51 AM by Harold van de Kamp's Blog

A few days ago I blogged about hosting ASP.NET 3.5 charting controls in a SharePoint Web Part , now there

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Saturday, December 06, 2008 11:55 AM by Christian Stahl

Cool, thanks for your work man!

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Monday, December 08, 2008 2:59 AM by Peter

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.

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Monday, December 08, 2008 3:42 AM by Jan Tielens

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Monday, December 08, 2008 4:09 PM by Jan Tielens

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Monday, December 08, 2008 5:56 PM by Peter

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Monday, December 08, 2008 6:12 PM by Peter

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:

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" BorderThickness="0" View3D="True" AnimationEnabled="True" ColorSet="VisiBlue" Watermark="False">  <vc:Chart.AxesX>    <vc:Axis>      <vc:Axis.Grids>        <vc:ChartGrid Enabled="True" />      </vc:Axis.Grids>    </vc:Axis>  </vc:Chart.AxesX>  <vc:Chart.AxesY>    <vc:Axis>      <vc:Axis.Grids>        <vc:ChartGrid Enabled="True" />      </vc:Axis.Grids>    </vc:Axis>  </vc:Chart.AxesY>  <vc:Chart.Series>    <vc:DataSeries RenderAs="Column" AxisYType="Primary" >      <vc:DataSeries.DataPoints>        <vc:DataPoint AxisXLabel="North" YValue="float;#0" LabelText="North" LabelFontSize="12"/><vc:DataPoint AxisXLabel="South" YValue="float;#0" LabelText="South" LabelFontSize="12"/><vc:DataPoint AxisXLabel="East" YValue="float;#0" LabelText="East" LabelFontSize="12"/><vc:DataPoint AxisXLabel="West" YValue="float;#0" LabelText="West" LabelFontSize="12"/>      </vc:DataSeries.DataPoints>    </vc:DataSeries>  </vc:Chart.Series></vc:Chart>

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)

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Tuesday, December 09, 2008 1:54 AM by Jan Tielens

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Tuesday, December 09, 2008 2:49 AM by Peter

Your welcome, this looks a lot better than the old Office Pivot Chart web parts, and no special installation of activex components is needed on the client side (except for Silverlight). And because of Silverlight cross platform with Firefox!

Some more feedback then: fields with spaces in the name generates the same error as well.

Besides that on a functional side it would be nice if the data from a view could be grouped; this is not possible when creating a view, for instance a list contains items with sales of product; one item per sale. It would be nice if the web part could be configured with fields to group and sum, then you can create a chart with total sales per product. Quite like the data source query the Office Pivot Chart web part uses.

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Tuesday, December 09, 2008 8:02 AM by Jenita

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.

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Tuesday, December 09, 2008 10:31 AM by Maurissen Geert

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Wednesday, December 10, 2008 5:26 AM by Jan Tielens

@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 ... ".

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Wednesday, December 10, 2008 7:54 AM by Maurissen Geert

@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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Wednesday, December 10, 2008 9:34 AM by Christian Stahl

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?

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Thursday, December 18, 2008 6:02 PM by Joe

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Friday, December 19, 2008 12:32 PM by Mike

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Wednesday, December 31, 2008 12:10 PM by David Goebel

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

# WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXIV)!

Thursday, January 01, 2009 10:29 AM by Blog del CIIN

Un año más ( ¡FELIZ AÑO NUEVO A TODOS! ), aquí estoy dando guerra (y ya van más de dos desde que Rodrigo

# WSS 3.0 &amp; MOSS: Recopilatorio de enlaces interesantes (XXIV)! &laquo; Pasi??n por la tecnolog??a&#8230;

Pingback from  WSS 3.0 &amp; MOSS: Recopilatorio de enlaces interesantes (XXIV)! &laquo; Pasi??n por la tecnolog??a&#8230;

# Charting Solutions for SharePoint &laquo; The Central Solutions SharePoint Blog

Pingback from  Charting Solutions for SharePoint &laquo; The Central Solutions SharePoint Blog

# Silverlight Charts for SharePoint &laquo; DevExpertise

Wednesday, January 28, 2009 9:51 PM by Silverlight Charts for SharePoint « DevExpertise

Pingback from  Silverlight Charts for SharePoint &laquo; DevExpertise

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Thursday, February 05, 2009 10:02 PM by tosh

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.

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Thursday, February 05, 2009 10:57 PM by tosh

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

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Sunday, February 08, 2009 10:29 PM by Dan

I am getting the same error as Joe...

Value cannot be null. Parameter name: format

Does anyone have extra steps?

# re: 3D Silverlight Charts in SharePoint: SmartTools.Charts

Tuesday, March 03, 2009 6:50 AM by ...

Interessante Informationen.