JavaScript Google Chart API - CSV

// @author: Dököll Solutions, Inc.
// Program: myjquerybarchartsregdata.js
// Created: from copy: 2013.
// load the visualization library from Google and set a listener
      google.load("visualization", "1", {packages:["corechart"]});

      function drawChart() {
         // grab the CSV
         $.get("TutsDataForJSCharts.csv", function(csvString) {
            // transform the CSV string into a 2-dimensional array
            var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

            // use arrayData to load the select elements with the appropriate options
            for (var i = 0; i < arrayData[0].length; i++) {
               // this adds the given option to both select elements
               $("select").append("<option value='" + i + "'>" + arrayData[0][i] + "</option");
            // set the default selection
            $("#domain option[value='0']").attr("selected","selected");
            $("#range option[value='1']").attr("selected","selected");

            // this new DataTable object holds all the data
            var data = new google.visualization.arrayToDataTable(arrayData);

            // this view can select a subset of the data at a time
            var view = new google.visualization.DataView(data);

            var options = {
               title: " Programming Tutorial Code Samples By Type",
               hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
               vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
               legend: 'none'

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

            //uncomment the following to load a PieChart
            //var chart = new google.visualization.PieChart(document.getElementById('chart'));
            //chart.draw(view, options);

            // set listener for the update button
               // determine selected domain and range
               var domain = +$("#domain option:selected").val();
               var range = +$("#range option:selected").val();

               // update the view

               // update the options
               options.hAxis.title = data.getColumnLabel(domain);
               options.hAxis.minValue = data.getColumnRange(domain).min;
               options.hAxis.maxValue = data.getColumnRange(domain).max;
               options.vAxis.title = data.getColumnLabel(range);
               options.vAxis.minValue = data.getColumnRange(range).min;
               options.vAxis.maxValue = data.getColumnRange(range).max;

               // update the chart
               chart.draw(view, options);


Download /Make available Google Chart API

Download jQuery-csv (jQuery Plugin) / jquery.csv-0.71 / jquery.csv-0.71.min

Follow instructions below and download the necessary files to visualize your data in Google charts.  At this point we assume the jQuery CSV plugin is available/installed in your environement; plug a reference to this JavaScript in the Xpages form added earlier and load Google Charts to user.

Create CSV file and place in WebContent
You will now create a CSV file with the following column coordinates: CodeName, Quantity, Downloads, Rating, Response, Inventory.  You want to fill these columns with data to be read into Google charts.  Firstly, add the following, or your choosing, to the CodeName column/rows (1) CSS, (2) LSAgent (3) Java (4) JavaAgent (5) XML, lastly add integer values to Quantity, Downloads, Rating, Response, Inventory respectively to column/rows.

Hover Charts to visualize data:
See pop up references to the data included in the Google Charts by hovering on the respective Bar Chart column.  If you are not see your chart, it may be because your CSV file cannot be found.  Be sure to place the CSV file to the WebContent folder at this point or your choosing; simply change the code to locate the file if adding to a server or subfolders.

While you can Repeat the above process to create a Pie Chart, using same CSV file, creating a scattered chart, as one example, will need additional programming on your part.  Please visit the Google Chart API webpage for more info:

Köll S Cherizard
September 25, 2013 11:52 PM

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...