My Charts<\/title>\n <style>\n .header {\n\n } \n .button_selector {\n display: inline-block;\n border-radius: 5px;\n padding: 10px 20px;\n background-color: #eee;\n color: rgb(0, 0, 0);\n font-size: 16px;\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.3s ease;\n border: none;\n margin-top: 10px;\n margin-bottom: 10px;\n }\n .button_selector:hover {\n\t\t\tbackground-color: #202020;\n color: #eee;\n\t}\n .container_instructions{\n background-color: #eee;\n border: 2px solid black;\n border-radius: 5px;\n padding: 10px;\n display: blockk;\n align-items: center;\n width: 1200px;\n margin-bottom: 15px;\n font-family: \"ABC Marfa\"\n }\n .chart-container {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding:0px;\n gap: 40px;\n height: 540px; \n width: 970.6px;\n border: 2px solid #D9D9D9; \/* Probably shouldn't be there*\/\n }\n .chart {\n flex: none;\n order:1;\n flex-grow: 0;\n height: 100%;\n width: 100%;\n }\n <\/style>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script src=\"https:\/\/cdn.emailjs.com\/sdk\/2.3.2\/email.min.js\"><\/script>\n<\/head>\n<body>\n <div class=\"container_instructions\">\n <label style=\"flex: 1;justify-content: left;\">INSTRUCTIONS <\/label>\n \n <label style=\"flex: 1; justify-content: right;\">\n <span style=\"background-color:#3903FF; color:#FFFFFF; padding:5px 15px; border-radius:5px;\"+\">+<\/span> LEFT CLICK TO ADD POINTS<\/label>\n <span style=\"background-color:#3903FF; color:#FFFFFF; padding:5px 15px; border-radius:5px;\">-<\/span>\n<label style=\"margin-left:5px; margin-right:20px;\">RIGHT CLICK TO REMOVE POINTS<\/label>\n\n<span style=\"background-color:#3903FF; color:#FFFFFF; padding:5px 15px; border-radius:5px;\">><\/span>\n<label style=\"margin-left:5px;\">HOLD LEFT CLICK TO DRAG POINTS<\/label>\n <\/div>\n <div class=\"chart-container\">\n <div class=\"chart\">\n <canvas id=\"chart1\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n<span style=\"display: inline-flex; flex-wrap: nowrap; gap: 10px; white-space: nowrap;\">\n \n <button class=\"button_selector\" onclick=\"sendEmail()\" style=\"background-color: #3903FF; color: #FFFFFF; font-family: var(--e-global-typography-primary-font-family, 'WhyteInktrap', sans-serif); padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer; width: max-content; white-space: nowrap;\">Send<\/button>\n\n <button class=\"button_selector\" onclick=\"resetGraph()\" style=\"background-color: #3903FF; color: #FFFFFF; font-family: var(--e-global-typography-primary-font-family, 'WhyteInktrap', sans-serif); padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer; width: max-content; white-space: nowrap;\">Reset<\/button>\n\n<\/span>\n \n <script>\n const x1 = [2.00, 14.00];\n const y1 = [0.1,0.1];\n\n \/\/ Create the first chart\n const ctx1 = document.getElementById('chart1').getContext('2d');\n let chart1 = new Chart(ctx1, {\n type: 'line',\n data: {\n datasets: [{\n data: x1.map((x, i) => ({ x: x, y: y1[i] })),\n cubicInterpolationMode: 'monotone',\n tension: 0.4,\n }]\n },\n options: {\n plugins: {\n title: {\n display: true,\n text: ' '\n },\n legend: {\n display: false,\n },\n }, \n scales: {\n y: {\n min: 0,\n max: 100,\n title: {\n display: true,\n text: 'Transmittance (%)'\n },\n ticks: {\n beginAtZero: true,\n\n } \n },\n x: {\n type: 'linear',\n min : 2,\n max : 14,\n title: {\n display: true,\n text: 'Wavelength (\\u03BCm)'\n },\n ticks: {\n beginAtZero: true,\n }\n },\n }\n }\n });\n \n const canvas1 = document.getElementById('chart1'); \n let isDragging = false;\n let endDragging = false;\n let dragIndex = -1;\n let clickX = 0;\n let clickY = 0;\n var startTime;\n var endTime;\n let movementCounter = 0;\n\n canvas1.addEventListener('mousedown', function(evt) {\n if (evt.which == 1){ \/\/ when left clicking\n const point = chart1.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true)[0];\n isDragging = false;\n endDragging = false;\n if (point) {\n clickX = evt.offsetX;\n clickY = evt.offsetY;\n }\n try {\n dragIndex = point.index;\n startTime = new Date().getTime();\n } catch (error) {\n dragIndex = -1;\n } \n } \n\n });\n\n \/\/ Drag\n canvas1.addEventListener('mousemove', function(evt) {\n if (evt.which == 1){ \/\/ when left clicking and moving\n endTime = new Date().getTime();\n if (endTime-startTime >100 && dragIndex>-1){ \n isDragging = true;\n }\n if (isDragging && !endDragging){\n let x_point = chart1.scales.x.getValueForPixel(event.offsetX).toFixed(2); \/\/ get x value from click position\n let y_point = chart1.scales.y.getValueForPixel(event.offsetY).toFixed(2); \/\/ get y value from click position\n if (dragIndex==0 && x_point<x1[1] && y_point>0 && y_point<100){\n x1[0]=parseFloat(x_point)\n y1[0]=parseFloat(y_point)\n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n \/\/ Update chart every 5th movement\n if (movementCounter % 8 === 0) {\n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n chart1.update();\n }\n movementCounter++;\n canvas1.style.cursor = 'crosshair';\n }\n else if (x_point>x1[dragIndex-1] && x_point<x1[dragIndex+1] && y_point>0 && y_point<100){\n x1[dragIndex]=parseFloat(x_point)\n y1[dragIndex]=parseFloat(y_point)\n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n if (movementCounter % 8 === 0) {\n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n chart1.update();\n }\n movementCounter++;\n canvas1.style.cursor = 'crosshair';\n }\n }\n }\n });\n\n\n canvas1.addEventListener('mouseup', function(evt) {\n if (isDragging){ \/\/set last point\n let x_point = chart1.scales.x.getValueForPixel(event.offsetX).toFixed(2); \/\/ get x value from click position\n let y_point = chart1.scales.y.getValueForPixel(event.offsetY).toFixed(2); \/\/ get y value from click position\n if (dragIndex==0 && x_point<x1[1]&& y_point>0 && y_point<100) {\n x1[0]=parseFloat(x_point)\n y1[0]=parseFloat(y_point)\n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n }\n else if (x_point>x1[dragIndex-1] && x_point<x1[dragIndex+1]&& y_point>0 && y_point<100) {\n x1[dragIndex]=parseFloat(x_point)\n y1[dragIndex]=parseFloat(y_point)\n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n }\n isDragging = false;\n endDragging = true;\n chart1.update(); \/\/ update chart\n canvas1.style.cursor = 'default';\n }\n else if (evt.which != 3) {\n const deltaX = Math.abs(evt.offsetX - clickX);\n const deltaY = Math.abs(evt.offsetY - clickY);\n \/\/ Addpoint\n let x_point = chart1.scales.x.getValueForPixel(event.offsetX).toFixed(2); \/\/ get x value from click position\n let y_point = chart1.scales.y.getValueForPixel(event.offsetY).toFixed(2); \/\/ get y value from click position\n let position = x_point.length;\n if (x_point<x1[0]) {\n position = 0;\n } else if (x_point>x1[x1.length-1]){\n position = x1.length;\n } else{\n for (let i = 1; i < x1.length; i++) {\n if (x_point<x1[i] && x_point>x1[i-1]){\n position = i;\n \n break;\n }\n }\n }\n x1.splice(position, 0, parseFloat(x_point));\n y1.splice(position, 0,parseFloat(y_point)); \n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n chart1.update(); \/\/ update chart\n isDragging = false;\n dragIndex = -1;\n canvas1.style.cursor = 'default';\n } \n\n });\n\n \/\/Delete points when right click\n canvas1.addEventListener('contextmenu', function(evt) {\n if (evt.which == 3){\n \/\/console.log('delete');\n evt.preventDefault();\n const point = chart1.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true)[0];\n if (point) {\n const index = point.index;\n x1.splice(index, 1);\n y1.splice(index, 1); \n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n chart1.update();\n }\n }\n });\n\n function resetGraph() {\n x1.length = 0; \/\/ Clear the existing values in the global x1 array\n y1.length = 0; \/\/ Clear the existing values in the global y1 array\n x1.push(1.00, 15.00); \/\/ Add the initial x values\n y1.push(0.1, 0.1); \/\/ Add the initial y values\n chart1.data.datasets[0].data = x1.map((x, i) => ({ x: x, y: y1[i] }));\n chart1.update(); \n } \n <\/script>\n\n<script>\n function sendEmail() {\n \/\/ Get the canvas element\n const canvas = document.getElementById('chart1');\n\n \/\/ Get the image data as a URL\n const imageData = canvas.toDataURL('image\/jpeg');\n\n \/\/ Get user input\n const userEmail = window.prompt('Enter your email:');\n const userComments = window.prompt('Enter any comments (optional):');\n const userConsent = window.confirm('Do you consent to sending this image and your comments to Mapsi Photonics S.L.?');\n \n\n \/\/ Open the email form in a new window\n \/\/ Send email with chart attachment and user data\n emailjs.send(\"testing_gala\", \"template_vxlqavh\", {\n \"to_email\": \"ivan0782@gmail.com\",\n \"from_email\": userEmail,\n \"subject\": \"Chart Data\",\n \"message\": \"User Consent: \" + userConsent + \"<br>User Comments: \" + userComments,\n \"attachment\": {\n \"data\": imageData,\n \"type\": \"image\/jpeg\",\n \"name\": \"chart.jpg\"\n }\n }).then(function(response) {\n alert(\"Email sent successfully!\");\n }, function(error) {\n console.log(\"Error sending email: \" + error);\n alert(\"Error sending email. Please try again later.\");\n });\n }\n<\/script>\n\n<script>\n\n<\/script>\n\n\n<\/body>\n<\/html>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-25a0914 e-flex e-con-boxed e-con e-parent\" data-id=\"25a0914\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97135cf elementor-widget elementor-widget-text-editor\" data-id=\"97135cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In case you need further requirements or ad-hoc design, please contact our technical sales team at <span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"mailto:sales@mapsi.es\">sales@mapsi.es<\/a><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Design Your Own Filter Filters My Charts INSTRUCTIONS + LEFT CLICK TO ADD POINTS – RIGHT CLICK TO REMOVE POINTS > HOLD LEFT CLICK TO DRAG POINTS Send Reset In case you need further requirements or ad-hoc design, please contact our technical sales team at sales@mapsi.es<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_angie_page":false,"footnotes":""},"class_list":["post-3328","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/pages\/3328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/comments?post=3328"}],"version-history":[{"count":37,"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/pages\/3328\/revisions"}],"predecessor-version":[{"id":3761,"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/pages\/3328\/revisions\/3761"}],"wp:attachment":[{"href":"https:\/\/mapsiphotonics.com\/en\/wp-json\/wp\/v2\/media?parent=3328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}