{"id":2037,"date":"2017-12-18T18:40:29","date_gmt":"2017-12-18T13:10:29","guid":{"rendered":"http:\/\/localhost:8081\/system-on-module-som\/?p=2037"},"modified":"2025-03-26T13:22:27","modified_gmt":"2025-03-26T07:52:27","slug":"bring-your-html5-charts-to-esomimx6-in-30-minutes","status":"publish","type":"post","link":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/bring-your-html5-charts-to-esomimx6-in-30-minutes\/","title":{"rendered":"Bring Your HTML5 Charts To eSOMiMX6 in 30 Minutes"},"content":{"rendered":"<p class=\"western\" align=\"left\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">Most visually pleasing and complex charts that one can find on the internet are done using HTML5.<\/span><\/span><\/span><\/p>\n<p class=\"western\" align=\"left\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">This article guides you to quickly enable and run HTML5 charts on e-con Systems\u2122 <a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">eSOMiMX6<\/a> based development kit <a href=\"https:\/\/www.e-consystems.com\/iMX6-development-board.asp\">Ankaa<\/a> using Qt.<\/span><\/span><\/span><\/p>\n<p class=\"western\" align=\"left\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">We have included free samples which you can download for free by just registering yourself on our <a href=\"https:\/\/www.e-consystems.com\/auth\/Account\/login?ReturnUrl=%2F\">developer website<\/a>.<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">To showcase how quickly we can plug a HTML5 chart into a Qt application we performed the following steps:<\/span><\/span><\/span><\/p>\n<div style=\"width: 100%; float: left;\">\n<!--\n\n\n<div style=\"width: 50%; float: left;\">--><\/p>\n<ul>\n<li>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">Developed a HTML5 chart using Zingchart. Zingchart is a declarative, efficient, and simple JavaScript library for building responsive charts with integrations in Angular, React, JQuery, PHP, Ember, &amp; Backbone.<\/span><\/span><\/span><\/p>\n<\/li>\n<li>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">Developed a QML application using QWebEngine.The Qt WebEngine module provides a web browser engine that makes it easy to embed content from the World Wide Web into your Qt application.<\/span><\/span><\/span><\/p>\n<\/li>\n<li>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">Passed the URL of the HTML file to the WebEngineView QML type. WebEngineView allows Qt Quick applications to render regions of dynamic web content. <\/span><\/span><\/span><\/p>\n<\/li>\n<\/ul>\n<p><!--<\/div>\n\n\n\n\n<div style=\"width: 50%; float: right;\">\n\n\n<table style=\"width: 400px; margin: 0px auto; border: 1px solid #FFBC7D;\" align=\"center\">\n\n\n<tbody>\n\n\n<tr style=\"border: 1px solid #FFBC7D;\">\n\n\n<td align=\"center\" width=\"24%\"><img decoding=\"async\" loading=\"lazy\" style=\"vertical-align: middle;\" src=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-content\/uploads\/2018\/01\/QT-Series.jpg\" alt=\"Adobe Spark\" width=\"100\" height=\"125\"><\/td>\n\n\n\n\n<td width=\"1%\"><\/td>\n\n\n\n\n<td style=\"text-align: center; background: #FF7D01; margin: 0px auto; border-spacing: 0px; color: #ffffff; font-size: 18px;\" align=\"center\" width=\"75%\"><strong>Bring HTML5 Charts On Qt Application Running On eSOMiMX6<\/strong><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr style=\"width: 100%; height: 25px; text-align: left; background: #FFBC7D; margin: 0px auto; border-spacing: 0px; color: #000000; font-size: 15px;\">\n\n\n<td colspan=\"3\" align=\"left\"><a href=\"https:\/\/developer.e-consystems.com\/Downloads?key=69YkFkubX5ERK9%2BGNDi2WkpJacc9t%2BeC%2F2gdMY5mJbi5MUu2WuFvofl6lOFcqNUClkO21C%2Bk7TCJAbmkOIrLJGXbsg0vxsPc4aGiKjknJIR3fmWqU94ApE0ji%2Bn2%2FiNqkyiz9uxCCj5b4DYG7I7M%2FjXN6azepfLV9%2BnlE3nbVEEdhl13FOudSjrKTkT%2FzNEBhDvQ4OdFuGAMDHQEza50PWHTWevZzpuTH%2FML5KvofLziLqxbBO94dOU%2BN5e7YXixXoaoV79NFrH938%2BqXFJ3%2FjYvm%2BWwZ%2FYMx%2Fh6GhUY%2B01hP09vBh07wkcptA4aFBVt\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt-QML-Setup-Qt-Creator-Steps Application Guide <\/a><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr style=\"width: 100%; height: 25px; text-align: left; background: #FFFFFF; margin: 0px auto; border-spacing: 0px; color: #000000; font-size: 15px;\">\n\n\n<td colspan=\"3\" align=\"left\"><a href=\"https:\/\/developer.e-consystems.com\/Downloads?key=69YkFkubX5ERK9%2BGNDi2WvNwtWdxaa0OTgXeFUKaQP5VwvCrb4t6j4iBhEYWFN6FORWCjboPF1CD5tkIkMXiMvclNUuwShI0ioaZPTjggGk%2FrFxgngq0RqVAad9cRB87xz4CISMQISnEpFZz9hQeTsTGjXJ6Ffiu6gRZJOYq3UB86hs0nY5zy7i1mRj2khK43KL2IFRZQ3KW5AMdK57FZR6tC6GPB6RcLDrZLIpZOQMkSJJ3C3y%2FnArWm9Cywsz8K0INk4PMshGu2%2B%2FkGwHdw9A8nFSQR2soS2M5zU6DArLaCjVj8es9GDdDsF2JyP2%2F\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt-QML-Build-Deploy-Run-Steps Application Guide<\/a><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr style=\"width: 100%; height: 25px; text-align: left; background: #FFBC7D; margin: 0px auto; border-spacing: 0px; color: #000000; font-size: 15px;\">\n\n\n<td colspan=\"3\" align=\"left\"><a href=\"https:\/\/developer.e-consystems.com\/Downloads?key=69YkFkubX5ERK9%2BGNDi2WsPc1wgKH6jLc72e3BXq3E8O4rpsykDcmeBlBTdA70i4Bb%2FEe8UiS97InmuSKHWrIW4tQN2nlkDeEfmZelZwmnbz9N5Bi%2B2ZAffhvvsuxiFX7LnJldv39pg745Hfd8Jr%2F%2BsMS6WwGYdRuKD5fwkltsL5%2F59lHUlP%2F55%2BWsFpO66o6%2BE14WTl1Vbgsmt1qSE3ekC1Z%2FwMs%2B5b3saX5tOdG1dMpLUbzc%2BXibm17W%2F9AB0HURSeiDOsY%2B8pkdy%2BBmgzLPrH43pCnqRLb6D2UsXZ6hc%3D\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt-Intermediate Samples<\/a><\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\n<\/div>\n\n\n--><\/div>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">The result are amazing!! The time taken to develop, build, deploy and run the application<span lang=\"zxx\"><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\"> eSOMiMX6<\/a> <\/span><\/span><\/span><\/span><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">was less than 30 minutes. The output was a HTML5 chart with an excellent look and feel on our <\/span><\/span><\/span><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\"><span lang=\"zxx\"><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">eSOMiMX6<\/a> <\/span><\/span><\/span><\/span><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">device.<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">The below code is used to load the HTML5 chart in the QML window. <\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">import QtWebEngine 1.0<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">Window<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">{<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">width: 1024<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">height: 750<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">visible: true<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">WebEngineView<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">{<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">anchors.fill: parent<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">url: &#8220;chart.html&#8221; \/\/Give the url of HTML page<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">}<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">}<\/span><\/span><\/span><\/p>\n<p class=\"western\"><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">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 eSOMiIMX6 devices<\/a> to build and run the application on <\/span><\/span><\/span><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\"><span lang=\"zxx\"><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">eSOMiMX6<\/a> <\/span><\/span><\/span><\/span><span style=\"color: #333333;\"><span style=\"font-family: 'Liberation Serif', serif;\"><span style=\"font-size: medium;\">devices.<\/span><\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most visually pleasing and complex charts that one can find on the internet are done&#8230;<\/p>\n","protected":false},"author":17,"featured_media":2135,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[342,127],"tags":[376,373,375,374,371,372,133,207,148,370],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/2037"}],"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=2037"}],"version-history":[{"count":9,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/2037\/revisions"}],"predecessor-version":[{"id":3064,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/2037\/revisions\/3064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media\/2135"}],"wp:attachment":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media?parent=2037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/categories?post=2037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/tags?post=2037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}