Microsoft 365 Community SharePoint, 25 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using reusable chart controls to present business data in a web part

Description

During this 11-minute Developer-focused demo, Hugo Bernier shares a robust web part sample that uses PnP Reusable ChartControl to add theme aware, responsive fluent UI integrated charts (20 charts) to your web parts. You may use plugins for custom rendering or for showing continuous data feed in a chart. This “Chartinator“ control pulls static or dynamic data into your web part. You are able to define chart colors, type, layout, legend, animations in the properties pane. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 25, 2021.

Demo Presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• Website - JavaScript charting for designers & developers | www.chartjs.org
• Samples - Chart Control Samples | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-chartcontrol
• PnP Samples - Samples by JavaScript Framework | https://aka.ms/spfx-webparts

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hi everyone, my name is hugo bernier and I'm going to be talking to you about a whole bunch of web parts. I'm not just demoing one web part today, I'm demoing 20 web parts and it's a web part sample that uses the pnp reusable controls to add charts to your web parts.

A

There's tons of great libraries out there to create charts one of the most flexible ones out. There is chart.js, but it can be difficult to add, chart js to a web part and have all the cool, responsive, behavior theme awareness, you know fluent ui integration and all the other cool features that we've learned to love in sharepoint web parts.

A

Fortunately, there's the pnp reusable controls, library, which makes it easy for you to integrate the chart.js in your spfx solutions. If you haven't used the pmp, reusable controls, it's a nod, node module that you can add to your spfx solutions and add tons of cool controls, not just a chart, control, there's a web part title control and a placeholder control and a folder picker lots of really cool stuff.

A

So I created the uh the chart control component. It seems like a couple years ago now, but when I did uh create the chart control component for the pnp reusable controls, I also made sure to create samples to show how to use pretty much every single feature of the pmp chart control, so the chart control- and this is actually the list of web parts in the chart- control solution.

A

uh It's got about 20 web parts. In fact, I think it's exactly 20 web parts to show you how to use all the features so the chart web part. That's obviously got some cool gratuitous animations by default. The chart control will actually try to render an accessible version of every chart and there's a sample called accessible bar chart that actually shows you what the web part renders behind the scenes.

A

So the table that's created at the bottom here normally is not visible, but is available to someone who's using a screen reader to read the content, and that's done automatically. All you have to do is provide a title and a description to your chart.

A

There's also an area chart with lots of cool little options here, showing how to integrate with with the various buttons and things like that uh bubble chart which is fun now. I think I even added the ability to pop the baubles, because I had nothing better to do.

A

There's a horizontal bar chart with lots of features again to add dynamic uh sections and stuff of that data sets and line chart where you can have. Each point can have a different type of point. You know circle triangle and so on pie chart.

A

Polar area chart is there too again, you can dynamically add data and there's a radar chart as well.

A

There's a scatter chart and the chart control also uses or supports using things like patterns and gradients. So this is a sample of using a donut charts with or without patterns. I would never use so many patterns on a web part. But again this was just to demonstrate all the patterns that are available and the control itself.

A

You can also use combo charts, so there's a combo chart sample. That shows you how to combine multiple charts into uh into one and the chart control even supports custom plugins, so you can completely override the rendering behavior of your chart. So this is an example of custom, rendering here using a plug-in, I saw this really cool chart somewhere and I decided to emulate it using the chart control.

A

Another example of a plug-in here is an example of showing real-time data in a continuous feed, so that updates all the time and just for good measure. I even added a dynamic property web part or web parts that connect two web parts together, so you can create clickable, chart areas and update the chart, data based on a selection from another web part, and that's also a great way to to learn how to handle events in a web part.

A

But my favorite web part is probably the chart nader and those of you who have children may remember a show called phineas and ferb in in that show. There was an evil scientist who created evil inventions in every episode and he always called his inventions.

A

Something innater, so he's got a baby inator a shrinkinator, a big sail oblinator, so I decided to create a chartonator and uh if you've used the out of the box quick chart web part in sharepoint you'll know that it's it allows you to quickly build charts using custom data and by reading data from a list.

A

However, if you can only do column, charts and pie charts- and it supports only up to 50 data points and 12 if you enter them manually and that's screenshot of the out of box quick chart web part now.

A

So, let's make sure this is working so again, this is a quick chart, just because I know we we just switch between screens, so the quick chart allows you to do column, chart and pie chart the chart nader. On the other hand,.

A

A

Has a few more options: you have pretty much every single chart uh possible, so line charts, bar charts, horizontal charts and so on and so forth. I'm going to go through every one of them. You can still enter data manually or you can get data from a list, but you know there's more so you can actually create palettes or use the palettes and those are the office palettes.

A

Based on the type of chart you select, it'll actually change the options that are available here and when I had first built this web part, it was actually more an exercise on how to use property pane controls as opposed to creating a fancy chart.

A

So again, if I change, let's say: donut charts you'll see that the options here are donut settings versus the bar settings, so every web part has, or every chart type has different options. Things like layout, whether you want the legend to show up or not uh whether you want tool tips and even a cool animation selector, so it'll actually allow you to control how the web parts going to animate. Now, of course, because I'm trying to do this- it's not!

A

Oh, it's just not it's not displaying very well on uh on the screen capture, I think, but lots of options out there. It was really fun to use and again, I'm always looking for for opportunities here to improve, but let's switch back to the code all right. So let's show you the the code here so there's in the chart, control from the pmp control library, reusable control, library, you can pass static data and by static I don't mean like hard-coded data, I mean data.

A

You may have pre-loaded before you actually render the web part, so the static bar chart sample actually just does that. So this is the bar chart static and it actually in order to use the chart control. Of course, you need to add the pnp reusable control to your project library and then, uh when you create the bar chart, you can specify uh what kind of chart you want.

A

So in this case I, instead of using a string that says pi bar whatever I use a chart type enumeration, so I can do chart type dot, pi, for example, and then all you need to do after you import. The reference is, you create a chart, control and inside the chart, control.

A

You have the data element and you can pass data in this case. I'm passing labels and data sets. Of course I could have retrieved that data from somewhere else and passed it in here, but for the purpose of the demo, I just hard coded the data and then at the bottom here, like I said you just have to specify what type of chart it is and because there's a chart type enumeration, you can just go chart type dot and it'll. Tell you all the types of charts that are available to you.

A

If you want to do dynamic data and by dynamic I mean you want the web part to dynamically load, the data and display kind of a loading spinner, while you're retrieving the data and then once the data is, is retrieved. It'll actually render the data.

A

All you need to do is pass a data promise, so here's the bar chart demo, which actually renders dynamic data- and I do the same thing- I include a chart control, but instead of passing a data prop, I pass a data promise and hopefully, you've played with promises in in javascript or typescript. It's a great way to to do things asynchronously.

A

So in this case I'm calling a function that returns a data promise, while I'm at it, I'm also displaying a loading template. So you can actually there's a deep loading template that gets created automatically for you, but you can override the template in this case, I'm doing a gratuitous spinner when the the data is loaded and then my load of sync data is actually just again calling, in this case a mock service in the in the demo. I wanted to use only mock services, but you could call any apis graph sharepoint.

A

Whatever you wanted to retrieve the data you, uh you format it in a data set and data kind of format, and then the chart will be happy to see that data.

A

So I know I'm going really quickly here, but we're running out of time. I barely scratched the surface about how you can use the pmp chart control, but I do hope that I've convinced you to use the shark control on your own solutions and that you'll go take a look at the sample web parts to implement whatever charts your solutions need. If you need any help, please don't hesitate to reach out to me on twitter, I'm bernie h and if you ever have a cool uh looking chart that you'd like to implement.

A

I'm always looking for opportunities to create creative charts, so just reach out. That's it for me. Thank you for your time. Back to you, patrick.

B

Awesome stuff, as always, thank you hugo for running through that. I hope that's opened up some possibilities for folks to see ways to incorporate the chart controls into their projects, so really uh great work. There excited to see that and check out that sample.