none
Having Trouble Visualizing SharePoint List Using Google Charts RRS feed

  • Question

  • Hi everyone,

    My team and I are having trouble visualizing a SharePoint List using Google Charts API. For security reasons we cannot use an URL source link so we went ahead an uploaded the dependencies to our site assets folder.

    We even created the example used in the below link but could not get the charts to show. 

    https://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/

    The code below shows how we sourced the site assets library by using a portion of the URL link. 

    <html>
    <head>
    <script src="/sites/juon/execution/SiteAssets/gstatic_charts_loader.js" type="text/javascript"></script>
    
    <script src="/sites/juon/execution/SiteAssets/jquery.SPServices.min.js" type="text/javascript"></script>
    
    <script
    src="/sites/juon/execution/SiteAssets/jquery_3.js"
    type="text/javascript"></script>
    <script language="javascript">
    

    Are we doing something wrong or using the wrong API?

    We appreciate any help!

    Tuesday, November 26, 2019 1:37 AM

All replies

  • Hi jp--her,

    I followed the above blog and below is my code and result:

    <html>
    
    <head>
        <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"
            type="text/javascript"></script>
    
        <script language="javascript" type="text/javascript">
            var returnedItems = null;
    
            $(document).ready(function () {
                loadGoogleLibAndDraw();
            });
    
            function loadGoogleLibAndDraw() {
                google.charts.load('current', { 'packages': ['bar', 'line'] });
                google.charts.setOnLoadCallback(visualizeData);
            }
            function visualizeData() {
                var context = new SP.ClientContext();
                var list = context.get_web().get_lists().getByTitle('smartphone_sales');
                var caml = new SP.CamlQuery();
                caml.set_viewXml("<View></View>");
    
                returnedItems = list.getItems(caml);
                context.load(returnedItems);
                context.executeQueryAsync(onSucceededCallback, onFailedCallback);
            }
            function onSucceededCallback(sender, args) {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Year');
                data.addColumn('number', 'Red Mi3');
                data.addColumn('number', 'Honor 5s');
                data.addColumn('number', 'Le 1s');
                var enumerator = returnedItems.getEnumerator();
                var markup = '';
                while (enumerator.moveNext()) {
                    var row = [];
                    var listItem = enumerator.get_current();
                    row.push(listItem.get_item('Title'));
                    row.push(listItem.get_item('RedMi3'));
                    row.push(listItem.get_item('Honor5s'));
                    row.push(listItem.get_item('Le1s'));
                    data.addRow(row);
                }
                var options = {
                    chart: {
                        title: 'Sales Trend',
                    },
                    bars: 'vertical'
                };
                var barChart = new google.charts.Bar(document.getElementById('BarChart'));
                barChart.draw(data, options);
    
                var lineChart = new google.charts.Line(document.getElementById('LineChart'));
                lineChart.draw(data, options);
            }
    
            function onFailedCallback(sender, args) {
                var markup = '<p>The request failed: <br>';
                markup += 'Message: ' + args.get_message() + '<br>';
                displayDiv.innerHTML = markup;
            }
        </script>
    </head>
    
    <body>
        <div>
            <div id="displayDiv"></div>
            <div id="BarChart" style="width: 900px; height: 500px;"></div>
            <div id="LineChart" style="width: 900px; height: 500px;"></div>
        </div>
    </body>
    
    </html>

    Result: 

    *Note : please make sure the column's internal name in your code is correct. And you may check the source panel to see if the JS files have been loaded. Sometimes it will remains some caches, so please refresh the page or try it in a private window. 

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, November 26, 2019 8:35 AM
  • Hi Baker,

    Thank you for assisting.

    The problem that we are running into is that we can't use a URL link for the script source. We have to download the txt from the links then add it to the assist page as JS files. Are we correctly linking the sources from the Site Assets Page?

    V/r,

    Tuesday, November 26, 2019 12:09 PM
  • Hi jp--her,

    Yes we can reference the js file from site assets with a URL like "/sites/....../SiteAssets/.....". However, Google Charts is not allowed to be used offline per Google agreements. For more details, please refer to :

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, November 27, 2019 2:45 AM
  • Thank you Baker!

    That is what I figured...

    Thursday, December 5, 2019 4:58 PM
  • Hi jp--her,

    That's good. If there is no other issue that we can help further, it's suggested to mark it as answer for archiving and others who stuck in similar issues will get answered quickly. 

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, December 6, 2019 1:16 AM