{"id":2483,"date":"2018-02-21T21:48:36","date_gmt":"2018-02-21T16:18:36","guid":{"rendered":"http:\/\/localhost:8081\/system-on-module-som\/?p=2483"},"modified":"2024-03-19T13:57:23","modified_gmt":"2024-03-19T08:27:23","slug":"bind-chart-js-with-qt-for-esomimx6","status":"publish","type":"post","link":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/bind-chart-js-with-qt-for-esomimx6\/","title":{"rendered":"Bind Chart.js with Qt for eSOMiMX6"},"content":{"rendered":"<p>Qt\u2019s binding with JavaScript is well-known to the world. You can do just amazing things with this binding. One such wonder is Graphs.<\/p>\n<p>Data visualization is a common method to visually illustrate relationships in the data. The purpose of data visualization is to present data that are too numerous or complicated to be described adequately in the text and in less space.<\/p>\n<p>As a human, we would be pleased to view that graphical data in a qualitative visual form. This can be done with QML which provides fluid animations and visually appealing components.<\/p>\n<p>This article will explain how JavaScript chart can be bound with QML to produce an appealing data visualization application for <a href=\"https:\/\/www.e-consystems.com\/iMX6-micro-som-system-on-module.asp\">eSOMiMX6<\/a>.<\/p>\n<p>The Chart.js is the heart of the application. It contains the default properties of each graph, initialization code, code for drawing the graph\/chart and the mathematical functions for frequently used calculations.<\/p>\n<p>The application depicts the following graphs:<\/p>\n<ul>\n<li>Bar graph<\/li>\n<li>Line graph<\/li>\n<li>Pie graph<\/li>\n<li>Doughnut graph<\/li>\n<li>Polar graph<\/li>\n<li>Radar graph<\/li>\n<\/ul>\n<p>Full source code for the binding js with QML with graph sample application is available on our&nbsp;<a href=\"https:\/\/developer.e-consystems.com\/\">developer site.<\/a><\/p>\n<p>Please refer our previous articles on<a href=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/getting-started-with-qt-creator-on-esomimx6\/\"> How to setup Qt creator for eSOMiMX6 devices<\/a> and <a href=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/build-deploy-and-run-qt-application-on-esomimx6\/\">How to build, deploy and run Qt applications on eSOMiMX6 devices<\/a> to build and run the application on <a href=\"https:\/\/www.e-consystems.com\/iMX6-micro-som-system-on-module.asp\">eSOMiMX6<\/a> devices.<\/p>\n<p>For further assistance and queries get in touch with <a href=\"mailto:sales@e-consystems.com\">sales@e-consystems.com<\/a><\/p>\n<p><a href=\"https:\/\/developer.e-consystems.com\/downloads?key=ehxs6scps08yz6fwgn2e25wyqnmv%252flu%252b8sruzf9xsgsurcony4uqctq%252fccm%252bduqhayyfhxf9aecvti8v%252frv6otxw%252fazxo1e28vglw3loofsxxgvduy31lteu%252fnu7qx2lukw2pvob%252fdyt6tpb%252bckyni24l3jonmitxiooarfqmbnf1jaevyn45yywcfurpy5p3qi8mh33qu4dvwkbqkp9c6uvnscznx91nwk5jreqroha%252bzvqqgthu0br5lyj3on%252feelbuno67jcoyeepboyw%252fq7tfxzvltxodvsh68kll14qemxgturpaylpq3e17o63\">Qt-QML-Build-Deploy-Run-Steps Application Guide<\/a><\/p>\n<p><a href=\"https:\/\/developer.e-consystems.com\/downloads?key=69ykfkubx5erk9%252bgndi2wg%252bbmim00ozjn2rgxnwdsqshpnzde5lq8nflveuxielvigfa1y2jf5i4gtchtrij7ryzkrpbb0n6%252fhc6mnliiyiint3cjvg7452hjaatcqfmyf8fcxkkzhpynstmrymhnylqgnznmotxfcxwlpbybtvt7x9cu42eyt0sy1d%252b%252bg8sykstfdsjfxg0az1slpovifzaajdl0xwqkvmujlm8j4aulpvhkf%252f5aaqdbg1ii8wdelbty5nrkumsnx1df1xwmvbphole4vtqt189vz7yvjw%253d\">Qt Basics Samples Package Containing Graphs<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Qt\u2019s binding with JavaScript is well-known to the world. You can do just amazing things&#8230;<\/p>\n","protected":false},"author":17,"featured_media":2484,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[212,213,342,343,127,340,341],"tags":[373,453,251,374,255,196,396,259,452,454,339,106],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/2483"}],"collection":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/comments?post=2483"}],"version-history":[{"count":3,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/2483\/revisions"}],"predecessor-version":[{"id":3032,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/2483\/revisions\/3032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media\/2484"}],"wp:attachment":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media?parent=2483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/categories?post=2483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/tags?post=2483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}