0

I would like to create a custom web part/visual web part that will generate a chart from an existing sharepoint list. Is there any possible way of doing this aside from using the OOB Chart Web Part?

  • Umm. What are your requirement? Why you can't use the OOB web part? You need a specific graph type that is not supported? There are some issue when linking the graphs to the list? if you can provide some more background info, we may focus our attention to provide a more fitting solution. – Hitodama Jul 23 '13 at 8:40
  • We have been given a task to build a SharePoint site that will be used for logging, tracking and managing IT related requests and issues within an organization and records will be saved in a custom list (ticket list). There will be a page to display reports(report page) wherein a custom web part should be use to display a chart that will show a summary of data gathered.For example, a pie chart showing the request according to status, if it is new or rejected. – user18418 Jul 23 '13 at 9:18
1

You can use Jquery plugins for plotting graphs. Something like a JQPlot. Create a custom control -> Get the data from javascript using REST directly or JSON -> Form the data the way the plugin requires it and done you have your graph plotted with minimum effort.

Sample generic function which I use for plotting pie-charts

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

function 
plotPieChart(data, piediv) {

    var plot1 = jQuery.jqplot(div, [data],
      {
          seriesDefaults: {
              renderer: jQuery.jqplot.PieRenderer,
              rendererOptions: {
                  padding: 5,
                  shadowDepth: 0,
                  shadowAlpha: 0,
                  sliceMargin: 4,
                  startAngle: -90,
                  showDataLabels: true,
                  dataLabels: 'value'
              }
          },
          gridPadding:
              {
                  top: 0, right: 0, bottom: 0, left: 0
              },
          gridPadding:
              {
                  top: 0, right: 0, bottom: 0, left: 0
              },
          seriesColors: ["#CC9900", "#993300"],
          grid:
              {
                  drawBorder: false, drawGridlines: false, shadow: false, borderColor: '#e9eaec', background: '#e9eaec'
              },
          axesDefaults:
              {

              },
          legend:
              {
                  show: false,
              }
      }
    );
}
  • Thank you for the answer.. umm i would just like to ask where do i put that code once i create a custom webpart in visual studio? – user18418 Jul 23 '13 at 9:30
  • another question, is there a way to use data from a sharepoint list for creating a pie chart using the code sample you gave? – user18418 Jul 23 '13 at 9:33
  • look at this question, may help you – mbauer Jul 23 '13 at 9:57
  • can i use that in a visual web part? – user18418 Jul 23 '13 at 9:59
  • Yes all the code goes into Visual Webpart. All the code goes into javascript. – Vishal Singh Jul 23 '13 at 10:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.