GoogleCharts Features
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:
Check out some more examples to understand the working of this feature.
- Right now,
plot.tablecontains 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 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
viewwhich provides the facility to visualize only some of the columns. For example,
I created this table and generated the GoogleChart for it:
Now, to visualize combined charts individually:
What if I want to get the chart for Sales v/s Expenses?
- 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).
Check out some more examples of ChartWrapper.
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.
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).
Check out these examples to have a better understanding of the feature.
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,
To understand the API and its usage, do visit these examples.
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.
The ChartEditor class is used to open an in-page dialog box that enables a user to customize a visualization on the fly.
For example, you have drawn a bar chart and you want to try out some modifications on it. Say, its title is pretty small and you want to see it bigger or you want to try out some new Chart type. Poof!! you can do it all on the same chart. :)
Just need to add chart_class as Charteditor and done. You can see the edit button to customize the chart.
In IRuby notebook, the dialog box appears behind the elements of the notebook. I have tried some ways to figure this out (refer) but the problem still persists.