Skip to content

GoogleCharts Features

Jump to bottom Edit New page
Prakriti Gupta edited this page Jul 30, 2018 · 5 revisions

Importing Data from Google Spreadsheet

API

With this feature, a user can visualize its data present in Google spreadsheet. To use this feature just provide the link of the spreadsheet (in a specified format, see documentation) as data. The best part is, you get to query the data according to your need. :)

For example: Data from spreadsheet

Examples

Check out some more examples to understand the working of this feature.

TODOs

  • Right now, plot.table contains an empty table as DataTable is extracted through javascript when the URL is provided. To extract the table content, we can use the URL of the google spreadsheet (which provides the JSON content) provided by the user and store this content in the DataFrame. (Refer this comment)

ChartWrapper

API

ChartWrapper was introduced to ease the js developers as it required less code and is much more convenient to use. So, how this will benefit daru-view?

  • Firstly, we can now use another option view which provides the facility to visualize only some of the columns. For example,

I created this table and generated the GoogleChart for it: cw1

Now, to visualize combined charts individually: cw2

What if I want to get the chart for Sales v/s Expenses? cw3

  • Secondly, further ChartWrapper paves the way for ChartEditor to implement as ChartEditor only works on ChartWrapper.

To generate charts using ChartWrapper, a user needs to set the class_chart option as 'Chartwrapper' in the third parameter (we will be implementing all the user options provided by us in the third parameter, will update the HighCharts also).

Examples

Check out some more examples of ChartWrapper.

Handling Events

API

This feature provides a user with the facility to write their own javascript code in Google Charts in the form of events and listeners. This improves the interaction of the user with the visualization.

In this example, select listener is being used to create an alert whenever the user navigates on Google Datatable's pages.

handling event

Usage in daru-view:

A user just needs to add the listeners option in the third parameter with the event name (as key) and the js code to execute when that event is fired (as value).

Examples:

Check out these examples to have a better understanding of the feature.

Formatters for Google DataTables

API

The Google Visualization API provides formatters that can be used to reformat data in a visualization. These formatters change the formatted value of the specified column in all rows. There are six kinds of formatters available right now: Arrow, Bar, Number, Date, Color, and Pattern.

API looks something like this:

user_options = {
    formatters: {
        formatter1: {
            type: 'Arrow',
            options: {
                  base: 30000
            },
            column: [1, 2]
        },
        formatter2: {
                type: 'Number',
                options: {prefix: '$', negativeParens: true},
                column: 2
        },
        formatter3: {
                type: 'Arrow',
                options: {
                      base: 3000
                },
                column: 2
        }
    }
}
table = Daru::View::Table.new(data, {}, user_options)

For example,

formatters

Examples

To understand the API and its usage, do visit these examples.

Difficulties:

Out of these six formatters, Arrow and Bar are causing some issues and rest are working fine. Bar formatter is working correctly in rails but in IRuby notebook it generates weird bars. Arrow formatter is neither generating arrows in nbviewer (working fine in localhost) nor in rails.

Clone this wiki locally