bjcull/ChartDraw.html

## ChartDraw.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>

    <style>
        .chart-wrapper {
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }

        .bcCanvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        .top-canvas {
            z-index: 50;
            left: 21px;
            top: 12px;
        }

        .bottom-canvas {
            z-index: 10;
        }
    </style>

    <div class="chart-wrapper">
        <canvas id="userValuesCanvas" class="bcCanvas top-canvas" width="479" height="466"></canvas>
        <canvas id="underlyingChart" class="bcCanvas bottom-canvas" width="500" height="500"></canvas>
    </div>

    <script>

    // Get context with jQuery - using jQuery's .get() method.
    var ctx = $("#underlyingChart").get(0).getContext("2d");

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: []
    };

    var options = {
        // Boolean - If we want to override with a hard coded scale
        scaleOverride: true,

        // ** Required if scaleOverride is true **
        // Number - The number of steps in a hard coded scale
        scaleSteps: 5,
        // Number - The value jump in the hard coded scale
        scaleStepWidth: 1,
        // Number - The scale starting value
        scaleStartValue: 0
    };

    // This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx).Bar(data, options);

    </script>

    <script id="editable">
	var canvas, stage;
	var drawingCanvas;
	var oldPt;
	var oldMidPt;
	var title;
	var color;
	var stroke;
	var colors;
	var index;

	var points = [];
	var normalizeWidth = 10;
	var normalizeStrength = 0.9;

	function init() {
	    canvas = document.getElementById("userValuesCanvas");
		index = 0;
		colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
		//check to see if we are running in a browser with touch support
		stage = new createjs.Stage(canvas);
		stage.autoClear = false;
		stage.enableDOMEvents(true);
		createjs.Touch.enable(stage);
		createjs.Ticker.setFPS(24);
		drawingCanvas = new createjs.Shape();
		stage.addEventListener("stagemousedown", handleMouseDown);
		stage.addEventListener("stagemouseup", handleMouseUp);
		title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
		title.x = (500 - title.getBounds().width) / 2;
		title.y = 200;
		stage.addChild(title);
		stage.addChild(drawingCanvas);

		drawingCanvas.graphics.clear().setStrokeStyle(2, 'round', 'round').beginStroke("green");
		drawingCanvas.graphics.drawRect(0, 0, canvas.width, canvas.height);

		for (var i = 0; i < 479; i++) {
		    points[i] = new createjs.Point(i, 466);
		}

		stage.update();
	}
	function handleMouseDown(event) {
		if (!event.primary) { return; }
		if (stage.contains(title)) {
			stage.clear();
			stage.removeChild(title);
		}
	    color = "red";
		stroke = 2;
		oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
		oldMidPt = oldPt.clone();
		stage.addEventListener("stagemousemove", handleMouseMove);
	}
	function handleMouseMove(event) {
	    var i = 0;
	    if (!event.primary) { return; }
	    stage.clear();

	    console.log(stage.mouseX + "," + stage.mouseY);
	    points[stage.mouseX].y = stage.mouseY;

	    // Normalize
	    for (i = 1; i < normalizeWidth; i++) {
	        if (stage.mouseX - (i + 1) >= 0)
	        {
	            points[stage.mouseX - i].y += (points[stage.mouseX - (i - 1)].y - points[stage.mouseX - i].y) * normalizeStrength;
	        }

	        if (stage.mouseX + (i + 1) < 479)
	        {
	            points[stage.mouseX + i].y += (points[stage.mouseX + (i - 1)].y - points[stage.mouseX + i].y) * normalizeStrength;
            }
        }

	    drawingCanvas.graphics.clear().setStrokeStyle(2, 'round', 'round').beginStroke("red");
	    for (i = 0; i < 479; i++) {
	        drawingCanvas.graphics.lineTo(points[i].x, points[i].y);//.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
	    }


		//var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
		//drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
		//oldPt.x = stage.mouseX;
		//oldPt.y = stage.mouseY;
		//oldMidPt.x = midPt.x;
		//oldMidPt.y = midPt.y;
		stage.update();
	}
	function handleMouseUp(event) {
		if (!event.primary) { return; }
		stage.removeEventListener("stagemousemove", handleMouseMove);
	}

	init();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8" />
	</head>
	<body>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
	<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>

	<style>
	.chart-wrapper {
	width: 500px;
	height: 500px;
	position: relative;
	overflow: hidden;
	}

	.bcCanvas {
	position: absolute;
	top: 0;
	left: 0;
	}

	.top-canvas {
	z-index: 50;
	left: 21px;
	top: 12px;
	}

	.bottom-canvas {
	z-index: 10;
	}
	</style>

	<div class="chart-wrapper">
	<canvas id="userValuesCanvas" class="bcCanvas top-canvas" width="479" height="466"></canvas>
	<canvas id="underlyingChart" class="bcCanvas bottom-canvas" width="500" height="500"></canvas>
	</div>

	<script>

	// Get context with jQuery - using jQuery's .get() method.
	var ctx = $("#underlyingChart").get(0).getContext("2d");

	var data = {
	labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: []
	};

	var options = {
	// Boolean - If we want to override with a hard coded scale
	scaleOverride: true,

	// Required if scaleOverride is true
	// Number - The number of steps in a hard coded scale
	scaleSteps: 5,
	// Number - The value jump in the hard coded scale
	scaleStepWidth: 1,
	// Number - The scale starting value
	scaleStartValue: 0
	};

	// This will get the first returned node in the jQuery collection.
	var myNewChart = new Chart(ctx).Bar(data, options);

	</script>

	<script id="editable">
	var canvas, stage;
	var drawingCanvas;
	var oldPt;
	var oldMidPt;
	var title;
	var color;
	var stroke;
	var colors;
	var index;

	var points = [];
	var normalizeWidth = 10;
	var normalizeStrength = 0.9;

	function init() {
	canvas = document.getElementById("userValuesCanvas");
	index = 0;
	colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
	//check to see if we are running in a browser with touch support
	stage = new createjs.Stage(canvas);
	stage.autoClear = false;
	stage.enableDOMEvents(true);
	createjs.Touch.enable(stage);
	createjs.Ticker.setFPS(24);
	drawingCanvas = new createjs.Shape();
	stage.addEventListener("stagemousedown", handleMouseDown);
	stage.addEventListener("stagemouseup", handleMouseUp);
	title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
	title.x = (500 - title.getBounds().width) / 2;
	title.y = 200;
	stage.addChild(title);
	stage.addChild(drawingCanvas);

	drawingCanvas.graphics.clear().setStrokeStyle(2, 'round', 'round').beginStroke("green");
	drawingCanvas.graphics.drawRect(0, 0, canvas.width, canvas.height);

	for (var i = 0; i < 479; i++) {
	points[i] = new createjs.Point(i, 466);
	}

	stage.update();
	}
	function handleMouseDown(event) {
	if (!event.primary) { return; }
	if (stage.contains(title)) {
	stage.clear();
	stage.removeChild(title);
	}
	color = "red";
	stroke = 2;
	oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
	oldMidPt = oldPt.clone();
	stage.addEventListener("stagemousemove", handleMouseMove);
	}
	function handleMouseMove(event) {
	var i = 0;
	if (!event.primary) { return; }
	stage.clear();

	console.log(stage.mouseX + "," + stage.mouseY);
	points[stage.mouseX].y = stage.mouseY;

	// Normalize
	for (i = 1; i < normalizeWidth; i++) {
	if (stage.mouseX - (i + 1) >= 0)
	{
	points[stage.mouseX - i].y += (points[stage.mouseX - (i - 1)].y - points[stage.mouseX - i].y) * normalizeStrength;
	}

	if (stage.mouseX + (i + 1) < 479)
	{
	points[stage.mouseX + i].y += (points[stage.mouseX + (i - 1)].y - points[stage.mouseX + i].y) * normalizeStrength;
	}
	}

	drawingCanvas.graphics.clear().setStrokeStyle(2, 'round', 'round').beginStroke("red");
	for (i = 0; i < 479; i++) {
	drawingCanvas.graphics.lineTo(points[i].x, points[i].y);//.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
	}


	//var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
	//drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
	//oldPt.x = stage.mouseX;
	//oldPt.y = stage.mouseY;
	//oldMidPt.x = midPt.x;
	//oldMidPt.y = midPt.y;
	stage.update();
	}
	function handleMouseUp(event) {
	if (!event.primary) { return; }
	stage.removeEventListener("stagemousemove", handleMouseMove);
	}

	init();
	</script>
	</body>
	</html>