График

График с перемещением

by twobomb three

HTML

<canvas id="graph" width='500' height='500'></canvas>

CSS

canvas{
  outline:1px solid red;
  
}

JavaScript

var values = [];
var date= new Date();
var offset = 0;
var dragged = false,offX = 0;
var color_text ="rgb(193, 10, 7)";
var color_val = "rgb(255, 189, 7)";
var color_hidden_line = "rgb(200,200,200)";
var color_line = "rgb(100,100,100)";

var max_val = 100;
var min_val = 0;
for(var i=0; i < 30000;i++){
	values.push({date:new Date(date),value : Math.random()*100-50});
  
  date = new Date(date.setDate(date.getDate()+1))
  };
 max_val = values[0].value;
 min_val = values[0].value;
 for(var i = 0; i < values.length;i++){
 		if(values[i].value >  max_val)
    	max_val = values[i].value;
 		if(values[i].value <  min_val)
    	min_val = values[i].value;
 }
  var canvas = document.querySelector("#graph");
  var ctx = canvas.getContext("2d");
  var w = canvas.width,h = canvas.height;
  draw(values);

  function draw(arr){
  		ctx.clearRect(0,0,w,h);
      ctx.fillStyle = "rgb(193, 7, 159)";
  		var margin_left = 40;
  		var margin_bottom = 40;
  		var margin_top = 10;
  		var margin_right = 10;
      var count_x_val = 12;
      var count_y_val = 10;
    	var ww = (w-margin_left-margin_right)/(count_x_val-2);
      if(offset > 0)
      	offset =  0;
        var offset_end = -(ww*arr.length-w+margin_right+margin_left+ww);
       if(offset < offset_end)
       	offset = offset_end;
        
      var startIndex = Math.floor(Math.abs(offset)/ww);
      if(startIndex > arr.length - count_x_val+1)
      	startIndex = arr.length - count_x_val+1;
        ctx.fillStyle = color_text;
      ctx.fillText((startIndex+count_x_val-1)+"/"+arr.length,50,20);
      if(startIndex > 0)startIndex--;
      
      for(var j = 0; j<=10;j++){
      	 var y = margin_top + j * (h-margin_bottom-margin_top)/10; 
        ctx.strokeStyle = color_hidden_line;
      	ctx.beginPath();
        ctx.moveTo(margin_left,y);
        ctx.lineTo(w-margin_right,y);
        ctx.closePath();
        ctx.stroke();
      }
      ctx.save();
      ctx.translate(offset,0);
      //Рисуем зачения и даты
      for(var i =...