The webpage has 2 main areas: a form area and a chart area.
The webpage should use static html when possible and dynamic html when required. My preference for dynamic HTML controls is with YUI, but other libraries may be accepted if they are simple to implement.
The form contains 3 types of dropdowns (green in figure), labels below each dropdown (yellow in figure), and a button that instructs the page to generate the chart (red in figure):
onDOMReady an AJAX call will retrieve a list of all of the possible analyses. An example of the available data for possible analysis is demonstrated with the php call below on the attached php script.
[url removed, login to view]
By default the first analysis returned will be shown in the green “Analysis” dropdown box. In the example php file this would be “data1”
A second php call using the selected analysis (data1) will request the actual data. The “data” query to the php is the name of the analysis selected from the “Analysis” dropdown box.
[url removed, login to view]
DataField1 will be the first data column that is part of the ‘data’ array that gets returned. In the php example the first data column is ‘c’. Other example columns are ‘color’ and ‘t’.
As soon as a column is shown as selected in the dropdown, the corresponding “datatypes” will be shown in the “category” label. The datatypes also comes from the php query. For example, the datatypes of ‘t’ is ‘datetime’.
DataField2 will appear automatically if a column is selected in DataField1. By default DataField2 will be blank.
If a selection is made in DataField2 than a DataField3 will automatically appear. New datafields can occur any number of times.
For any datafield in which there’s a selection, the “category” field below (yellow in the figure) should be updated with the “datatypes”. If data selection is blank the ‘category’ field is blank.
The displayed visualizations will depend on the ‘categories’ that are shown for all of the datatypes.
DataTable - DT
Annotated Time Line
The Visualizations that are actually shown will depend on all the selected ‘category’ and the number of DataType selections.
1 selection && ‘numeric’ category
1 selection && any category except for ‘numeric’
2 selection && both are ‘numeric’ category
2 selection && DataType1 == ‘datetime’ && DataType2 == ‘numeric’
Annotated Time Line(default)
3 selection && all are ‘numeric’ category
3 selection && 2 are ‘numeric’ and 1 is (category || ‘ordinal’)
The chart should be updated based on the form options any time the button (shown in red) is pressed.
The chart should display the selected ‘Visualization’ of the selected ‘DataField’’s data. For example, if DataField1 is set to ‘v’ and the Visualization is set to ‘Pie Chart’ than when the button is pressed a pie chart of the ‘v’ data should be shown.
The actual visualization should use a standard library and standard API calls. There will be a very clean interface between the request for a chart and the chart itself. The reason for the clean interface is so that new charts can be added with minimal programming effort. The preferred visualization library is Google Chart Tools, but other visualization libraries will be considered if they are full featured and have a very clean, well implemented API. No Flash.
7 freelancers are bidding on average $214 for this job
It's a very interesting project, it would be delightful to work on it. I already did similar job and I'm efficient enough on PHP5/Ajax and web app charts to be qualified to do this job.