{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/blog/challenge-and-solution",
    "result": {"data":{"markdownRemark":{"html":"<p>While working at <a href=\"http://www.sigsensetech.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Sigsense Technologies</a>, I was badly stuck with unseen customization of Highcharts graph.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/21c3c3882e70ee8227e41e771c0a8e7d/ff59c/sigsense_machine_learning.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 43.42857142857143%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABd0lEQVQoz3XQTW/UMBAG4PzVVmr/3qLuhUu5wAkhFWlFKbtb0O4maew49jiO7fFXBhLg0EOfw1xG86G30lqnlLzziIghmsmmlIjIOQdKalhIKYUQADCIAQDatt3v94yxCkDPpYwrIgohGGO01maaphAwYM7ZrWKKPvhSym632263x+Oxal4ug5JKKmPMsmCtehwlZ8PTD96ymJAWc8nF6VBKIZqJyHtfffz0oetZUzdipZTK69vlfPh1ffu4vSdi87wOp/L17jn6PBPlXCZrK3othIDez0TldHi+vnnYvC+p9T6HgOjwy+a7Mz7lhIgAUOWccs7lvxDQWutnwp9Ph6ubh3f3OXX/hn34vHl0BnMp1jrG+0opuYSxss6PxkqYGmHaTp6+HU9nzmHspGPSMulOZ+iGiSnLwZvJVqIXMUZEjDFKJeUgJEwXrpvBNuDrfqy5qbk+M6j7sRnMheulK8xoTAUAf8+mlLTWvejXPGmNdKa3/Un7N9v7+o425or1AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Machine Learning UI\"\n        title=\"Machine Learning UI\"\n        src=\"/static/21c3c3882e70ee8227e41e771c0a8e7d/ff59c/sigsense_machine_learning.png\"\n        srcset=\"/static/21c3c3882e70ee8227e41e771c0a8e7d/1aaec/sigsense_machine_learning.png 175w,\n/static/21c3c3882e70ee8227e41e771c0a8e7d/98287/sigsense_machine_learning.png 350w,\n/static/21c3c3882e70ee8227e41e771c0a8e7d/ff59c/sigsense_machine_learning.png 600w\"\n        sizes=\"(max-width: 600px) 100vw, 600px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Highcharts graph needed to be made bi-directional, which meant end-users being able to draw different types of plots using their mouse.\nIn addition, already-drawn plots were to be resized by the end-users’ dragging of the plot edges. (you could notice the colorful pillars from the above figure)\nGiven the primary purpose of Highcharts, it implied heavy customization and an elaborate manipulation of the available interfaces to the graph.</p>\n<p>Google it! That was my first response to this challenge.\nIt was not very successful, as there were no such use cases discussed or answered publicly.\nSo there came the realization -</p>\n<p><strong>_ I need the top-down approach_</strong></p>\n<p>Here’s how I broke the issue down to smaller pieces.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 581px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/c7b8469a9dc108e3c0e4703a864788d4/13a45/top-down-sigsense.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 74.28571428571428%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEPElEQVQ4y01Ta2gcVRQ+k9iSNK1JbJQEfPyIotVaEPyRFcVHQ7GI4g9BaX7VUFpDaokoNiEWHyBEKPaHzySCBqs2GrPZZDdpdrOPJPuYnX3vziY7uzszO4+dfc1OZrubbrXNlUmp9MDHd+53Dpd7v8MBPOPEvKwTm5j5AVvyGDHlX7kBIQSKorhKpRLKZrNIkiQkiuIua1BVFRUKhWGtT91W9oxPf4d5mHXMzTgwoG+RUEYiTMx9C/bkEnz608dQrVVBluUvZFk2i6I4l8vl5gRBMEiSNCdJkr5Sqdjy+fybW9cU6Jt8FcZnv4EiygCPkgAFlG5G6Oa+s5+c6bx0eezg6fMn2wCgCQAwAGjs6Ohompqa2qvT6VoRQg0A0Ay3o7H3jRf3X5z68uDAyKmum2irZQdt74WVkJk3uY3i3Kq+YHIv5FdJeywoejv/QXUolUrHMplMgSCIbDAYzG9sbBRkWQ5P/jzR5mcJcKfWP1vCTVW942/J6FzIWiKLNLgS64ll4mpyJWjZtIZWGILBfWw12RVJhqBYKvaWy+VMPB5P4Ti+yXEcr6qq17BoaJ2xT4OPxS9Yg5aSLWzdsPjMKVvcHAPGswMXTyzDj6dwmP+ahEq5DprZdwAA2jcb79buRlm4DuapKJx9yAAudwQA+RD8es4HhGACw4xpnyzL77Ise14QhA9VVR3w+XxtOp0O9Ho9ZDKZxxVF+UBRlPcTicSwqqrn5JI8GIvE72dLcYiHGAy+t38ORNjdQEZJCIVCj9I0jRiGQRRFIS0PBALPCrwAhVwBOI77KJVK/V/Tco2zUvZoKS8Dy9ONMDY2BpFIBILBIBAE0SYIwng6nZ6hKOoKy7KXE4lEV6GYB67IQIbhnqfT9GwqmfqDoqjZJJWcZmjmN54RHskUaBBzArZ74eDgIAwMDEBPTw82OjoKGIY1t7e37z36ci+8dvx1TPOqjkr3TjoutXYff6AVHoZ7NO250e6mB4+1HvjT98t9O0ht2fV8ZGQEUqlUI0VR4HQ63yZJshIIBIRoNCrE4/Gan/CfsZeNHWukg1kJWkRtqu6Ek3ClHSdWYw7eFlrJWoOW4lrc4fAWrS2gvahWqzXW63Wgafo0z/MoFoshkiR3veQ5YdTA/N5p8ZuRmVhGJpcR2cNWxRZffs/oMiJNX/IsIpPbKEWqzgPQ19cHuawEkiBBOBjer17bemLxqvEZi818RMwJh5gk0/oVPoxtViKHEtXo4eR27HCs7H/MwztaktvkkxuV8FNULfZ0ohrt3t2f/v5+wFlnQyCLQ0DyHrGGLc55p8FldC+s26NW3Mu5XiI4N2RvccBeTwN3gwFK3QCvsAbcDRqY7RRwdY2T8M6FVwCGhobAw6w1BEQcAln8hSXfPJp3zyL92l9oyb+ACM71lo93g4dZ3xPgiQYNft6LOWkb3Dnf1nDsim8c/gOVyQ9LErxYYAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Flight History Simulator\"\n        title=\"Flight History Simulator\"\n        src=\"/static/c7b8469a9dc108e3c0e4703a864788d4/13a45/top-down-sigsense.png\"\n        srcset=\"/static/c7b8469a9dc108e3c0e4703a864788d4/1aaec/top-down-sigsense.png 175w,\n/static/c7b8469a9dc108e3c0e4703a864788d4/98287/top-down-sigsense.png 350w,\n/static/c7b8469a9dc108e3c0e4703a864788d4/13a45/top-down-sigsense.png 581w\"\n        sizes=\"(max-width: 581px) 100vw, 581px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>At the end of the day, the challenge boiled down to resolving <strong>3 leaf issues</strong>(the green ones on the above) :</p>\n<ul>\n<li>Catch mouse events on Highcharts canvas</li>\n<li>Add plots after the graph is rendered</li>\n<li>Remove plots after the graph is rendered</li>\n</ul>\n<p>Then, with the issue broken down to tangible, atomic and easy-to-solve pieces, I did the dreaded and contributed to the original value of the product.</p>","frontmatter":{"title":"Challenge & Solution (Highcharts)","description":"While working at Sigsense Technologies, I was","date":"2020-04-09T00:00:00.000Z","slug":"/blog/challenge-and-solution","tags":["Blogging","Tech"]}}},"pageContext":{}},
    "staticQueryHashes": ["2009693873","2077189868","3303540520","3505212370","3825832676"]}