var

        canvas = document.getElementById('stock-canvas'),

        width = canvas.width,

        height = canvas.height,

        ctx = canvas.getContext('2d');

    console.log(JSON.stringify(data[0])); // {"date":"20150602","open":4844.7,"close":4910.53,"high":4911.57,"low":4797.55,"vol":62374809900,"change":1.69}

    ctx.clearRect(0, 0, width, height);

    ctx.fillText('Test Canvas', 10, 10);

    var

        max = -1,

        min = 9999999;

    for(i=0;i<30;i++){

        if(data[i].high>max){

            max = data[i].high;

        }

        if(data[i].low<min){

            min = data[i].low;

        }

    }

    for(i=0;i<30;i++){

        [low,high] = [(data[i].low-min)/(max-min) * height, (data[i].high-min)/(max-min) * height];

        [close,open] = [(data[i].close-min)/(max-min) * height, (data[i].open-min)/(max-min) * height];

        ctx.beginPath();

        ctx.lineWidth = 1.0;

        ctx.strokeStyle = "black";

        ctx.moveTo(i*10+5, low);

        ctx.lineTo(i*10+5, high);

        ctx.stroke();

        if(data[i].open>data[i].close){

            ctx.fillStyle = "green";

            ctx.fillRect(i*10, close, 10, open-close);

        }

        else if(data[i].open<data[i].close){

            ctx.fillStyle = "red";

            ctx.fillRect(i*10, open, 10, close-open);

        }

        else{

            ctx.moveTo(i*10, data[i].open);

            ctx.lineTo((i+1)*10, open);

        }

    }