Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

Applying Annotation on Google Charts from SharePoint Lists

$
0
0

Using google charts aggregation feature, i was able to apply grouping to data i retrieved from a SharePoint list and the applied the count to get the number of items created for each month.

I am now trying to get the count value display on the chart as an annotation. But not sure how to achieve this. The code below is how far i have gone. Any suggestion preferable with code snippets will be much appreciated

function drawThirdChart() {

            var dataCharts = new google.visualization.DataTable();
            dataCharts.addColumn('string', 'Month');
            dataCharts.addColumn('string', 'Title');
            dataCharts.addColumn({type:'string', role:'annotation'}); // annotation role col.

             var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/Web/Lists/getByTitle('NPT Form')/items?$select=Title,Created";

             // execute AJAX request
                $.ajax({
                                url: requestUri,
                                type: "GET",
                                async:false,
                                headers: { "ACCEPT": "application/json;odata=verbose" },
                                success: function (data) {
                                                console.log(data);
                                                console.log(data);
                                                var count = 0;
                                                var dataResults = data.d.results;
                                                var Created;
                                                var timelost;
                                                var MonthandYear1


                                                //console.log(dataResults);
                                                for (i=0; i< data.d.results.length; i++) {
                                                                count = count + 1;
                                                                Title = dataResults[i].Title;
                                                                Month = dataResults[i].Created;
                                                                console.log(Month);
                                                                Month = Month.toString();
                                                               // Month= new Date(Month);
                                                               // Month= Month.split('T');
			                                                          //Month = Month[0];
                                                                //Category = dataResults[i].Cat.Title;
                                                               // addTimeLost = addTimeLost + dataResults[i].Time_x0020_Lost;
                                                               //floorDate
                                                                //Month = floorDate(Month);
                                                                //Month = smallmonth(Month);
                                                                console.log(Month);
                                                                dataCharts.addRow([Month , Title, Title ]);

                                                }
                                                console.log(count);
                                  },

                        });

                var newData = google.visualization.data.group(dataCharts, [{
                      column: 0,
                      label: 'Month',
                      modifier: smallmonth,
                      type: 'string'
                  }], [{
                      column: 1,
                      label: 'Count',
                      aggregation: google.visualization.data.count,
                      type: 'number'
                  }],[{
                      column: 2,
                      label: 'Count',
                      aggregation: google.visualization.data.count,
                      type: 'string',
                      role:'annotation'
                  }]);

                  console.log(newData);

                  var options = {
                      title: 'Reports Per Month',
                      chartArea: {width: '50%'},
                      annotations: {
                        alwaysOutside: true,
                        textStyle: {
                          fontSize: 12,
                          auraColor: 'none',
                          color: '#555'
                        },
                        boxStyle: {
                          stroke: '#ccc',
                          strokeWidth: 1,
                          gradient: {
                            color1: '#f3e5f5',
                            color2: '#f3e5f5',
                            x1: '0%', y1: '0%',
                            x2: '100%', y2: '100%'
                          }
                        }
                      },
                       hAxis:{title:'Count',minValue:0,maxValue:5,gridlines:{count:6},slantedTextAngle: 45, textStyle: { color: '000000', fontName: 'Arial', fontSize: 9,  bold: false, italic: false  }},
                      vAxis:{title:'Months',displayAnnotations: true},

                     // gridlines: { count: -1},

                    };


              var chart = new google.visualization.BarChart(document.getElementById('reportspermonth'));
              chart.draw(newData, options);

    }



Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>