HTML5 Multi Touch EQ Graph

This project received 5 bids from talented freelancers with an average bid price of $188 USD.

Get free quotes for a project like this
Project Budget
Total Bids
Project Description

Please create an EQ Graph using HTML 5 Canvas, CSS 3, and Javascript.  This is the first part of a larger project.  A successful hire will be able to work on more projects similar to this.  

The EQ graph has these requirements:

It has four adjustable "dot" controls that can be moved to any X/Y location in the graph.

Each dot control has a colored curve that has to be drawn based on its location in X/Y coordinates.

An additional graph curve has to be drawn that is the sum of the four curves.

The javascript code must have a function that passes in the parameter information for a dot control that returns a set of points that is the curve.  We will supply the math that calculates the curve.

The overall dimensions can be adjusted to any size.

The X and Y scales can be defined to be any values using linear or logarithmic scales.

Each dot has some additional parameters associated it that are used by the EQ graph math calculations.

The background color can be defined.

The scales and grid and text must have a color that can be defined.

The dots can be adjusted using multiple touches on a touchscreen browser such as iPad, iPhone, Android tablet, or Android phone.

The dots can be adjusted using a mouse on a computer browser.

The color and opacity of each dot curve can be defined.

The code will be based upon a prototype javascript file that we will provide named eqgraph.js.  It provides dot controls that operate on multitouch browsers.

The Graph should look exactly as it is shown on the images. The image 1 ([url removed, login to view]) shows the default state of the graph. There are 8 images ([url removed, login to view] - [url removed, login to view]) that show different state of the dots. The opacity of the colored overlay is 35-40%.

There are also 2 images of the basic graph we already have. That is the starting point you will use to implement the EQ graph. It has four adjustable dots and simply draws a line between the dots.

Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online