12,065,888 members (30,878 online)
Demo - http://jsbin.com/iqojut/1/
"Data Analyzer", as the name says, it analyses the data available in the form of HTML table and provides you all possible options of grouping the available values to display it in the form of chart (bar chart / pie chart).
Whether it was a stone age period or the period of super computers, well known saying - "picture speaks a thousand words" has proved correct in all kind of information conveyed to others.
Based on my experience in the field of development and designing, I have seen that majority of the web sites / web applications are generating HTML tabular contents in the form of reports. These reports could be generated using any of the tool/technology available in the market. Of those, there will be very few sites / applications that provides the option of displaying charts as well as reports, simultaneously. Even if they provide it, users of the sites / applications will have very limited scope in playing with the report contents thereby changing the charts, dynamically.
Imagine you have HTML table contents as shown in the figure-1 below -
It is good to provide users with detailed report about certain functionalities, but what about the search / filter facility? You might need to write some extra logic in the back-end / front-end tool for the same.
For the sake of understanding I have added an action button (
Analyze) in this table as shown in figure-2 below -
There is no such need to add any button, you can invoke the script directly on page load. Now, when you click on this action button, some magic occurs and you will see some new drop-down boxes added along with the total record count as well as multiple chart options, as shown in figure-3 below -
Here, you can see that all columns available in the table are automatically added in the filter criteria, along with an added option of 'Global Search' which can perform search on all the text contents of the table. Using this filter utility, user can perform search globally or specifically for any column. For example, I would like to search for something called 'Alex'. Figure-4 below shows that the table contents are automatically filtered showing only the records having content - 'Alex'. It has also updated the total record count.
In Figure-3, you might have noticed that at the bottom of action button (Analyze), some extra drop-down boxes are added. These are -
Data Analyzer Version 2.0 onwards, I have removed the JSChart library. And hence, the selection of chart library has been removed. By default, the output will be rendered using the Open flash chart (OFC) v1.0 (http://teethgrinder.co.uk/open-flash-chart/).
On selecting any of the option from the Possible charts drop-down box, you will see that the chart is displayed as shown in figure-5 below -
Up to this point, most of you might be thinking that this is wasteful effort in redeveloping things already available for free. Now the step ahead -
Select the operation and any of the numeric column from the list (as shown in figure-3 above). When this information combines with that of the selected chart, the outcome will be as shown in figure-6 below -
While figure-5 was showing the total count of records when grouped by Vendor Name, figure-6 is showing the aggregation of service charges incurred by the Vendors. Isn't that exciting ??
You saw the filter utility in the figure-4 above, right?, So, once you filter your data, how can you draw another chart based on the filter records? Here is the solution. In this demo, after performing the filter operation, again click on the
Analyze action button. Aaha !!! your charts are ready to go. The Possible charts drop-down box will be refreshed with new contents, based on the changes in the table content, as shown in figure-7 below -
And related chart is shown in figure-8 below -
Lets perform some operation on this filtered data. Figure-9 below shows the average service charges the citizen- Alex paid for the services offered to her -
Add more complexity ? Let us perform multiple filter condition. The output would be something as shown in figure-10 below -
Let us see how the "Random" Chart type looks like? and what will happen when you select "Show All Charts" option from the possible charts drop-down box? The output will be random display of all the charts based on the operations selected, as shown in figure-11 below -
How about error handling? what if no records found? Well, everything is handled in the code. If there are no records available, or if all available records are distinct, due to which, its not possible to generate the chart, you will see the message accordingly. Have a look at the figure-12 below -
Well, that was all about the features of Data Analyzer. Hope you found it interesting. If so, read a bit more to learn how to integrate it with your code.
To start with, following steps are required to be carried out in order to integrate Data Analyzer with your current HTML code.
<div id="AnalysisStatus"></div> <div id="chartContainer"></div>
And that's it. We are ready to roll the ball !!!
Well, if you have found this interesting till this point, it would be nice have proper understanding of the APIs used in Data Analyzer.
var analyzer = new DataAnalyzer(thisObject, dataSourceId, vHeaderStartsAt, vAddFilter, vBypassCols, vAnalyzeCols);
thisObject: [Mandatory] Self referencing object name. It will be the name of the variable of Data Analyzer object.
dataSourceId: [Mandatory] Id of the HTML table to be referred and analysed.
vHeaderStartsAt: [Optional] Row index of the header row of the HTML table. Default is
vAddFilter: [Optional] Flag to determine whether you want to include the filter option or not. Default is
vBypassCols: [Optional] Array of either column indexes or 'named' columns (i.e. name of the header column AS-IS), or mixture of both. Columns listed in this array will neither be considered for the filter criteria nor it will be considered for the 'Possible charts' option. This parameter value has low priority if value is supplied for the parameter vAnalyzeCols.
vAnalyzeCols: [Optional] Array of either column indexes or 'named' columns (i.e. name of the header column AS-IS), or mixture of both. Columns listed in this array will only be considered for the filter criteria. But for the 'Possible charts' option, they may or may not get included based on the analysis. This parameter value has more priority compare to the previous vBypassCols parameter value. If supplied, value for vBypassCols will be ignored. Reason for adding this as a last parameter is that the parameters required for analysing are more compare to that needs to be bypassed.
Next in the API list is the set of public methods supported by Data Analyzer. These are -
This is the very first (and only) method that developer will need to handle/invoke. Remaining methods are only required to be invoked manually if developer has written some custom code on top of it. Syntax is -
vFilterOnly: [Optional] Default value is
false. If set to
true, and vAddFilter parameter in the constructor above is also set to
true, it will disable the charting option. Only HTML table content filter option will be available. if
false, then any value of this parameter is irrelevant.
vAutoAnalyzeOnFilter: [Optional] Default value is
false. If set to
true, the HTML table content will be automatically analysed and related 'Possible Charts' drop-down box will get populated. When set to
false, developer needs to invoke
analyzer.start()method based on any user event (button click etc). if
true, then any value of this parameter is irrelevant.
Table below shows possible outcome for various combinations of using these parameters -
|false (or null)||Not applicable||Not applicable||Only Charts will be displayed|
|true||true||Not applicable||Only Filter will be displayed|
|true||false||false||User need to trigger some event to analyse and generate charts post filtering|
|true||false||true||Table content will be automatically analysed post filtering|
This method is generally gets automatically binds with the search text-box that gets created based on the
vAddFilter parameter defined above. There won't be any explicit need to invoke this method. Syntax is -
analyzer.filterTable(phrase, tableId, searchIn, headerStartsAt);
phrase: [Optional] Filter phrase to search the HTML table contents. If left blank, All records will be displayed AS-IS.
tableId: [Mandatory] Id of the source table whose contents will be searched for.
searchIn: [Optional] Column index of the table to be looked for the phrase for filter. If left blank, supplied phrase will be searched in all the columns.
headerStartsAt: [Optional] Numeric field to identify from which point the table content starts. Default is 1.
This method is generally gets automatically binds with the 'Possible Charts' drop-down box. There won't be any explicit need to invoke this method. Developers in need to integrate their custom chart library might need to look at the code of this method to modify it as required. Syntax is -
reportIndex: [Mandatory] Index of the chart to be drawn on screen. It could be individual chart index or all possible charts.
If you like this concept of displaying tabular reports and generating charts from it, I am sure you would be thinking of customizing it based on your application / web-site. Below are some points where you need to do changes that suites your requirements -
DataAnalyzer.jsfile, following changes can be possible -
addAutoFilter()to change the text, alignment, format etc.
report()to change the chart configurations - Chart type, text, alignment, format etc.
draw()to implement custom chart and related formats
filterTable()to customize the style for alternate row color, text etc.
This code is compatible to all major browsers - IE, Chrome, Firefox, Safari etc.
This section is for the people who loves algorithms and would like to go deep into the actual logic implementation of the solution / tool. Below are the steps I followed for designing this Data Analyzer -
analyzer.start()method internally calls the private method -
init()method will validate -
analyzer.start()method will call the private method -
analyzeHeaders(). It will parse the header row (based on the index supplied in the constructor parameter). This parsing will prepare a METADATA for each and every column.
columnType(initially unknown or null), and
true, then it will invoke another private method -
addAutoFilter()method iterates through the metadata and will create the dynamic HTML code that will be placed above the HTML table. This is how the automatic search/filter functionality is added in.
analyzeData(). It iterates through every visible row and every individual column in it.
false. When both are
true, there is no need to process and generate charts.
columnDatawill be updated with the column information which identifies the total occurrences of the cell text within whole column. This information is used for generating the 'Group by Chart' for that column.
prepareDataSets(). Datasets are nothing but the format in which every chart takes input.
onchangeevent of the drop-down will call the
analyzer.draw()method, with the selected chart option passed as parameter. If the "Operation" and "Numeric Column" are selected, then this method will invoke the private internal method -
updateDataSet(operation, numColumn, reportIndex). This method will perform the required calculations and update the dataset that will be used for rendering the chart.
Please rate this article if you liked this. Also, let me know your feedback for the same.
If you have some suggestions about the features to be included in this utility, please do let me know so that everyone can use it.