SHARE
TWEET

Untitled

a guest Jun 25th, 2019 51 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function () {
  2.   let chartInstance;
  3.   let chartElement;
  4.  
  5.   function createChart(chartElement) {
  6.     const chartConfig = {
  7.         type: 'scatter',
  8.         data: {
  9.           datasets: [
  10.             {
  11.               data: [
  12.                 {
  13.                   x: 0,
  14.                   y:0
  15.                 }
  16.               ],
  17.               fill: true,
  18.               showLine: true,
  19.               lineTension: 0
  20.             }
  21.           ]
  22.         },
  23.         options: {
  24.           legend: {
  25.             display: false,
  26.           },
  27.           layout: {
  28.             padding: {
  29.               left: 50,
  30.               right: 50,
  31.               top: 0,
  32.               bottom: 0
  33.             }
  34.           },
  35.           title: {
  36.             display: false,
  37.             text: 'Chart.js Interactive Points',
  38.           },
  39.           scales: {
  40.             xAxes: [
  41.               {
  42.                 type: 'linear',
  43.                 display: true,
  44.                 padding: 20,
  45.                 paddingLeft: 10,
  46.                 paddingRight: 10,
  47.                 paddingTop: 10,
  48.                 paddingBottom: 10,
  49.                 scaleLabel: {
  50.                   display: true,
  51.                   labelString: 'Time',
  52.                 },
  53.                 ticks: {
  54.                   suggestedMin: -5,
  55.                   suggestedMax: 5,
  56.                   stepValue: 1,
  57.                 }
  58.               }
  59.             ],
  60.             yAxes: [
  61.               {
  62.                 type: 'linear',
  63.                 display: true,
  64.                 scaleLabel: {
  65.                   display: true,
  66.                   labelString: 'Weight'
  67.                 },
  68.                 paddingLeft: 10,
  69.                 paddingRight: 10,
  70.                 paddingTop: 10,
  71.                 paddingBottom: 10,
  72.                 ticks: {
  73.                   suggestedMin: 0,
  74.                   suggestedMax: 3,
  75.                   stepValue: 1
  76.                 },
  77.               }
  78.             ]
  79.           },
  80.           responsive: true,
  81.           maintainAspectRatio: true,
  82.           tooltips: {
  83.             intersect: true,
  84.           }
  85.         }
  86.       };
  87.     chartInstance = new Chart(chartElement.getContext('2d'), chartConfig);
  88.     let element = null;
  89.     let scaleY = null;
  90.     let scaleX = null;
  91.     let datasetIndex = null;
  92.     let index = null;
  93.     let valueY = null;
  94.     let valueX = null;
  95.     function onGetElement() {
  96.       const event = d3.event.sourceEvent;
  97.       element = chartInstance.getElementAtEvent(event)[0];
  98.       if (!element) {
  99.         chartClickHandler(event);
  100.         return;
  101.       }
  102.       if (event.shiftKey) {
  103.         const tempDatasetIndex = element['_datasetIndex'];
  104.         const tempIndex = element['_index'];
  105.         chartInstance.data.datasets[tempDatasetIndex].data = chartInstance
  106.           .data.datasets[tempDatasetIndex].data.filter((v, i) => i !== tempIndex);
  107.         chartInstance.update();
  108.         return;
  109.       }
  110.       scaleY = element['_yScale'].id;
  111.       scaleX = element['_xScale'].id;
  112.     }
  113.     function onDragStart() {
  114.       const event = d3.event.sourceEvent;
  115.       datasetIndex = element['_datasetIndex'];
  116.       index = element['_index'];
  117.       valueY = chartInstance.scales[scaleY].getValueForPixel(event.offsetY);
  118.       valueX = chartInstance.scales[scaleX].getValueForPixel(event.offsetX);
  119.       chartInstance.data.datasets[datasetIndex].data[index] = {
  120.         x: valueX,
  121.         y: valueY
  122.       };
  123.         chartInstance.update(0);
  124.     }
  125.     function onDragEnd() {
  126.       if (
  127.       chartInstance.data.datasets[datasetIndex] &&
  128.       chartInstance.data.datasets[datasetIndex].data) {
  129.         chartInstance.data.datasets[datasetIndex].data.sort((a, b) => a.x - b.x > 0 ? 1 : -1);
  130.         chartInstance.update(0);
  131.       }
  132.       element = null;
  133.       scaleY = null;
  134.       scaleX = null;
  135.       datasetIndex = null;
  136.       index = null;
  137.       valueY = null;
  138.       valueX = null;
  139.     }
  140.  
  141.     d3.select(chartInstance.chart.canvas).call(
  142.       d3.drag().container(chartInstance.chart.canvas)
  143.         .on('start', onGetElement)
  144.         .on('drag', onDragStart)
  145.         .on('end', onDragEnd)
  146.     );
  147.   }
  148.  
  149.  
  150.     function chartClickHandler (event) {
  151.     let scaleRef;
  152.     let valueX = 0;
  153.     let valueY = 0;
  154.     Object.keys(chartInstance.scales).forEach((scaleKey) => {
  155.       scaleRef = chartInstance.scales[scaleKey];
  156.       if (scaleRef.isHorizontal() && scaleKey === 'x-axis-1') {
  157.         valueX = scaleRef.getValueForPixel(event.offsetX);
  158.       } else if (scaleKey === 'y-axis-1') {
  159.         valueY = scaleRef.getValueForPixel(event.offsetY);
  160.       }
  161.     });
  162.     const newPoint = {
  163.       x: valueX,
  164.       y: valueY
  165.     };
  166.     const dataSeries = chartInstance.data.datasets[0].data;
  167.     for (let i = 0; i < dataSeries.length; i++) {
  168.       if (dataSeries[i].x === newPoint.x) {
  169.         dataSeries.y = newPoint.y;
  170.         chartInstance.update();
  171.         return;
  172.       }
  173.     }
  174.     let inserted = false;
  175.     for (let j = dataSeries.length - 1; j >= 0; j--) {
  176.       if (dataSeries[j].x > newPoint.x) {
  177.         dataSeries[j + 1] = dataSeries[j];
  178.       } else {
  179.         dataSeries[j + 1] = newPoint;
  180.         inserted = true;
  181.         break;
  182.       }
  183.     }
  184.     if (!inserted) {
  185.       dataSeries.push(newPoint);
  186.     }
  187.     chartInstance.update();
  188.     }
  189.  
  190.   chartElement = document.getElementById("chart");
  191.   createChart(chartElement);
  192. })();
  193.      
  194. <body>
  195.  
  196.  <div>Chart Drag and Click Test</div>
  197. <div class="wrapper">
  198.         <canvas id="chart"></canvas>
  199. </div>
  200. </body>
  201.      
  202. .wrapper {
  203.   display: "block";
  204. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top