Customizing Look and Feel of Chart Web Part:
- Add a Chart webpart by clicking on “Add a web part” in web part zone and selecting Business Data -->Chart Web Part under Categories and Web Parts respectively as shown below.
- Once the Chart web part is loaded, click on Data & Appearance under Chart Web part.Then click Customize your Chart to customize look and feel of the chart web part.3. Click Next in Step1 (Since this example deals with chart webparts, you can go to Next step. In case you need to change the Chart type, select as per requirement from available ones.)4. In Step2, under Appearance Themes tab, Select both Theme and transparency to Custom, select Chart Height and Width as per requirement and Click Next.5. In step3, under Title and Legend tab you can select Show chart Title and Show Legend as per your requirement.
6. Under Axes and Grid Lines tab, you can set X axis and Y axis Title, Font, Text Color etc as per requirement.
7. Under Data Labels and Markers tab, you can check the Show Labels and Show markers if you need to show the data on each bar of the charts.
8. Under Hyperlinks and Tooltips tab, you can specify Hyperlink and tooltip for entire chart, Legend and label. Then click Finish.
Connecting Data to Chart Web part:1. Click Data & Appearance à Connect Chart to Data wizard.2. Click Step1 and select Connect to a List option and Click Next.3. In Step2, Select appropriate Site and List you want to showcase in Chart webpart and Click Next.4. In Step3, you can filter data if necessary. (Ex: I am filtering so that I can show only open Issues from the list).Once filter are applied click on Preview Data and data will be shown below. Chart shown in the webpart will be based on this data now. Click Next.
5. In Step4, Select Y axis, X axis and Group by Field and rest of the fields as per your requirement and Click Finish. Note : Y axis can only be numbers and date.
1. This is how my current chart looks.
2. Now in order to customize the color palettes of the chart, we need to export the webpart. To achieve that, edit the web part.
3. Go to Advanced options at the bottom and select Export all data option and click OK.
4. Click on downward arrow on the extreme right of web part and Click on Export…
5. Save dialog will be opened and save the web part in your local machine.
6. Open the web part in notepad or Word Pad and search for “PaletteCustomColors”.
7. There will be 10 different colors by default. We can customize as per our needs. As you can see that for each color, there are 4 parameters (numbers). First one Transparency and then RGB.
8. I have modified the first three colors to red, yellow and green.
9. Now go to your page, go to Edit pageà add a web part.
10 . Upload the customized web part which is present in your local machine.
11. Now add the uploaded web part. It will be usually present under Imported Web parts.
No comments:
Post a Comment