Javascript Chart Webpage

I am looking for a single webpage that uses ajax to dynamically update form fields and produce multiple possible chart visualizations. Most of the development will be done in javascript and use existing libraries for event handling and charting. The code produced should be in a form such that minor modifications can be made in the future.

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.

Possible visualizations

DataTable - DT

Pie Chart

Bar Chart

Column Chart

2-D ScatterPlot

Annotated Time Line

Combo Chart

The Visualizations that are actually shown will depend on all the selected ‘category’ and the number of DataType selections.

1 selection && ‘numeric’ category


PieChart (default)


1 selection && any category except for ‘numeric’

DT (default)

2 selection && both are ‘numeric’ category


ScatterPlot (default)



2 selection && DataType1 == ‘datetime’ && DataType2 == ‘numeric’


Annotated Time Line(default)

3 selection && all are ‘numeric’ category

DT (default)

3 selection && 2 are ‘numeric’ and 1 is (category || ‘ordinal’)


ComboChart (default)

4+ selections

DT (default)

The chart should be updated based on the form options any time the button (shown in red) is pressed.

Chart area:

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.

Skills: Graphic Design, HTML, PHP, Website Design

See more: php javascript chart, webpage design with php, types of ajax, static interface, standard library c, simple dynamic programming example, programming javascript, programming in javascript, pie javascript, php programming tools, javascript pie, Javascript Development, javascript code library, javascript barchart, google tools for website development, example of dynamic programming, event based programming, dynamic programming example, design chart, data set visualization, data for data visualization, c.v. example, c standard library list, c programming standard library, bar chart javascript

About the Employer:
( 12 reviews ) Happy Valley, United States

Project ID: #1270081

Awarded to:


I can finish this job in a few days. Please check my private message for a working demo.

$200 USD in 7 days
(22 Reviews)

7 freelancers are bidding on average $214 for this job


i have experienced in various javascript chart api using php/ajax/mysql [url removed, login to view],check pmb

$200 USD in 5 days
(15 Reviews)

Hi, glad that drew attention to me! Pls, look PMB for details. regards

$200 USD in 7 days
(14 Reviews)

Hello Sir,Pls Check PM

$250 USD in 7 days
(3 Reviews)

we understand your project. we are ready to work. we are proficient in photoshop, ilustrater, flash, html, css, javascript, php, wordpress.

$200 USD in 5 days
(0 Reviews)

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.

$250 USD in 5 days
(0 Reviews)

hi sir, i'm an experienced web apps programmer, i'm familiar with php, js, jquery, mysql, pgsql, and many more, and i'm curently working with charts in Highcharts, thats so awesome, so i think i could doing this job we More

$200 USD in 5 days
(0 Reviews)