SharePoint jQuery Charts

Sales Results Bar Chart (SharePoint List Data Source)

The next sample is a Bar chart of laptops’ sales. For example, we need to see the dynamics of three laptop models sales.

X axis shows dates and Y axis shows number values of Sales in thousands of USD. The chart shows sales dynamics of three models – ASUS UL30A-XS, Dell Inspiron N5010 and Toshiba NB305-N600. The Dynamics is shown for 5 days. Chart title and chart legend are placed on the left.

Since the chart shows sales dynamics of three models, three data sources are used. Click “Edit web part” to see the settings of the chart.

Bar chart type with vertical orientation is selected. Bar width, bar padding and bar margin are defined. Checkboxes are not switched on.

Grid options are the same as in previous sample chart.

Properties of X and Y axes are also the same as in previous section.

Label for Y axis is not shown. Chart title is shown on the left.

Chart legend is shown on left position.

Three data sources are added to the chart (data from SharePoint list).

Source SharePoint list looks as follows:

Now let us see how settings are defined for the data sources.

SharePoint list is selected as a data source; data source is shown on chart (checkbox).

SharePoint site and list where data will be taken from are defined. Date is selected as X axis and laptop model is selected as Y axis.

Advanced options are defined for this chart.

If you need to modify the appearance of chart, change its type or Axe properties, make all the required changes in the settings block and click “OK” or “Apply” to save the settings.