{"id":32,"date":"2016-02-03T03:41:11","date_gmt":"2016-02-03T03:41:11","guid":{"rendered":"http:\/\/intelligentonlinetools.com\/blog\/?p=32"},"modified":"2016-02-03T03:41:11","modified_gmt":"2016-02-03T03:41:11","slug":"charting-with-html5","status":"publish","type":"post","link":"http:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/","title":{"rendered":"Charting with HTML5"},"content":{"rendered":"<p>One of the new and exciting features of HTML5\u00a0is the ability to build chart without any plugin or server side\u00a0programming. This can be done using the canvas element and some javascript coding. The Canvas is the HTML5\u00a0element and allows to draw graphics, 2D shapes on the web page using javascript. Google Chrome supports now HTML5, some other browsers may have problems with supporting HTML5 as of\u00a0the time of this writing.<\/p>\n<p>Here is the code example of canvas. The example is just drawing one line from (10,10) to (80,80). The output is shown under the code box.<br \/>\n<textarea cols=60 rows=10>&lt;br \/&gt;<br \/>\n&lt;canvas id=&#8221;myCanvas&#8221; width=&#8221;200&#8243; height=&#8221;100&#8243; style=&#8221;border: 1px solid #c3c3c3;&#8221;&gt;&lt;br \/&gt;<br \/>\n&lt;\/canvas&gt;&lt;br \/&gt;<br \/>\n &lt;script type=&#8221;text\/javascript&#8221;&gt;<br \/>\n var c=document.getElementById(&#8220;myCanvas&#8221;);<br \/>\n var ctx=c.getContext(&#8220;2d&#8221;);<br \/>\n ctx.moveTo(10,10);<br \/>\n ctx.lineTo(80,80);<br \/>\n ctx.stroke();<br \/>\n &lt;\/script&gt;<\/p>\n<p><\/textarea><\/p>\n<p><canvas id=\"myCanvas\" style=\"border: 1px solid #c3c3c3;\" width=\"200\" height=\"100\"><br \/>\n<\/canvas><br \/>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\n var c=document.getElementById(\"myCanvas\");\n var ctx=c.getContext(\"2d\");\n ctx.moveTo(10,10);\n ctx.lineTo(80,80);\n ctx.stroke();\n \n\/\/ ]]><\/script><\/p>\n<p>The good resource on HTML5 canvas tag is <a href=\"http:\/\/www.w3schools.com\/html5\/html5_canvas.asp\">w3schools.com<\/a><\/p>\n<p>Here is one more\u00a0link if you want learn\u00a0more on canvas element in HTML5. <a href=\"http:\/\/thinkvitamin.com\/code\/how-to-draw-with-html-5-canvas\/\" target=\"_blank\">http:\/\/thinkvitamin.com\/code\/how-to-draw-with-html-5-canvas\/<\/a> How to Draw with HTML 5 Canvas\u00a0\u00a0 By Jamie Newman<\/p>\n<p>There are many different ways to do charting due to different javascript libraries:<\/p>\n<p><a href=\"http:\/\/www.rgraph.net\/\" target=\"_blank\">RGraph: HTML5\u00a0Javascript charts library<\/a> RGraph\u00a0is a HTML5\u00a0Javascript\u00a0charts library. Using the new HTML5\u00a0canvas tag, RGraph\u00a0creates Javascript\u00a0charts in the web browser.\u00a0 RGraph\u00a0supports over twenty different types of Javascript charts, including fuel gauges,\u00a0 thermometer charts, waterfall charts. It is very cool looking charts, but there is one time fee for commercial usage.<\/p>\n<p><!-- Here is one more link <a href=\"http:\/\/bytecove.co.uk\/jsgraph\/\" target=\"_blank\">jsGraph<\/a> jsGraph is a portable javascript library for rendering charts using just HTML5's canvas elements without the need of external plugins like Flash. The website for jsGraph is saying that it is currently under development and new features may appear at any time. The jsGraph website provides for download javascript library for rendering charts in the file jsGraph.js.\n--><\/p>\n<p><!-- In the next post will be shown the example of charting with\u00a0 jsGraph with HTML5 Canvas element. After looking at all examples I selected\u00a0charting with\u00a0 jsGraph.\u00a0 As was stated above jsGraph\u00a0is javascript library for drawing graphs. We still need do some coding for\u00a0creating graph object and\u00a0loading the data to graph. Here\u00a0I am going to create code which can be used for situations when the data is pulled out from database or from somewhere else. For example the data can be extracted from database on the server side\u00a0but the graph in HTML5 will be created on the client side. This is the typical situation since the data usually are not static. In order to do this I created hidden field which is getting data from server side. The example however does not show server side programming, it is assuming just that the data already is pulled out and pushed to the hidden field. This is stock market price data with 7 columns. The example is using only\u00a0two columns to display. The name of hidden field is stock_data. The rest is very simple - read all data from this hidden field, then break all data into rows, then break row into columns and then load the data to series and draw the graph. Below is the javascript coding \u00a0example how I am getting data from my hidden field and then loading into graph. And this is done dynamically on the fly when the page with the data is loading. var stock_data = document.getElementById(\"stock_data\"); var s= stock_data.value; var ar= s.split(\"\\n\"); for (i=0; i&lt; ar.length; i++) { temp=ar[i]; a=temp.split(\",\"); graph1.addPoint(i,a[5], ''); } graph1.addSeries(\"Open Price\", \"green\"); for (i=0; i&lt; ar.length; i++) { temp=ar[i]; a=temp.split(\",\"); graph1.addPoint(i,a[2],''); } Here is the link to see it working. <a href=\"http:\/\/www.lwebzem.com\/cgi-bin\/res\/html5_charting.html\" target=\"_blank\">Charting in HTML5 with jsGraph<\/a> Again if the browser does not show graph try Google Chrome. &nbsp; Thus\u00a0it is very easy to create chart just with \u00a0HTML5\u00a0 and some javascript. --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the new and exciting features of HTML5\u00a0is the ability to build chart without any plugin or server side\u00a0programming. This can be done using the canvas element and some javascript coding. The Canvas is the HTML5\u00a0element and allows to draw graphics, 2D shapes on the web page using javascript. Google Chrome supports now HTML5, &#8230; <a title=\"Charting with HTML5\" class=\"read-more\" href=\"http:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[1],"tags":[],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Charting with HTML5 - Machine Learning Applications<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Charting with HTML5 - Machine Learning Applications\" \/>\n<meta property=\"og:description\" content=\"One of the new and exciting features of HTML5\u00a0is the ability to build chart without any plugin or server side\u00a0programming. This can be done using the canvas element and some javascript coding. The Canvas is the HTML5\u00a0element and allows to draw graphics, 2D shapes on the web page using javascript. Google Chrome supports now HTML5, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Machine Learning Applications\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-03T03:41:11+00:00\" \/>\n<meta name=\"author\" content=\"owygs156\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"owygs156\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/\",\"url\":\"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/\",\"name\":\"Charting with HTML5 - Machine Learning Applications\",\"isPartOf\":{\"@id\":\"http:\/\/intelligentonlinetools.com\/blog\/#website\"},\"datePublished\":\"2016-02-03T03:41:11+00:00\",\"dateModified\":\"2016-02-03T03:41:11+00:00\",\"author\":{\"@id\":\"http:\/\/intelligentonlinetools.com\/blog\/#\/schema\/person\/7a886dc5eb9758369af2f6d2cb342478\"},\"breadcrumb\":{\"@id\":\"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/intelligentonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Charting with HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/intelligentonlinetools.com\/blog\/#website\",\"url\":\"http:\/\/intelligentonlinetools.com\/blog\/\",\"name\":\"Machine Learning Applications\",\"description\":\"Artificial intelligence, data mining and machine learning for building web based tools and services.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/intelligentonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/intelligentonlinetools.com\/blog\/#\/schema\/person\/7a886dc5eb9758369af2f6d2cb342478\",\"name\":\"owygs156\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/intelligentonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/b351def598609cb4c0b5bca26497c7e5?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/b351def598609cb4c0b5bca26497c7e5?s=96&d=mm&r=g\",\"caption\":\"owygs156\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Charting with HTML5 - Machine Learning Applications","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/","og_locale":"en_US","og_type":"article","og_title":"Charting with HTML5 - Machine Learning Applications","og_description":"One of the new and exciting features of HTML5\u00a0is the ability to build chart without any plugin or server side\u00a0programming. This can be done using the canvas element and some javascript coding. The Canvas is the HTML5\u00a0element and allows to draw graphics, 2D shapes on the web page using javascript. Google Chrome supports now HTML5, ... Read more","og_url":"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/","og_site_name":"Machine Learning Applications","article_published_time":"2016-02-03T03:41:11+00:00","author":"owygs156","twitter_card":"summary_large_image","twitter_misc":{"Written by":"owygs156","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/","url":"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/","name":"Charting with HTML5 - Machine Learning Applications","isPartOf":{"@id":"http:\/\/intelligentonlinetools.com\/blog\/#website"},"datePublished":"2016-02-03T03:41:11+00:00","dateModified":"2016-02-03T03:41:11+00:00","author":{"@id":"http:\/\/intelligentonlinetools.com\/blog\/#\/schema\/person\/7a886dc5eb9758369af2f6d2cb342478"},"breadcrumb":{"@id":"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/intelligentonlinetools.com\/blog\/2016\/02\/03\/charting-with-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/intelligentonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Charting with HTML5"}]},{"@type":"WebSite","@id":"http:\/\/intelligentonlinetools.com\/blog\/#website","url":"http:\/\/intelligentonlinetools.com\/blog\/","name":"Machine Learning Applications","description":"Artificial intelligence, data mining and machine learning for building web based tools and services.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/intelligentonlinetools.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/intelligentonlinetools.com\/blog\/#\/schema\/person\/7a886dc5eb9758369af2f6d2cb342478","name":"owygs156","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/intelligentonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b351def598609cb4c0b5bca26497c7e5?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b351def598609cb4c0b5bca26497c7e5?s=96&d=mm&r=g","caption":"owygs156"}}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7h1IJ-w","jetpack-related-posts":[{"id":766,"url":"http:\/\/intelligentonlinetools.com\/blog\/2016\/12\/31\/retrieving-post-data-using-the-wordpress-api-with-python-script\/","url_meta":{"origin":32,"position":0},"title":"Retrieving Post Data Using the WordPress API with Python Script","date":"December 31, 2016","format":false,"excerpt":"In this post we will create python script that is able to get data from WordPress (WP) blog using WP API. This script will save downloaded data into csv file for further analysis or other purposes. WP API is returning data in json format and is accessible through link http:\/\/hostname.com\/wp-json\/wp\/v2\/posts.\u2026","rel":"","context":"In &quot;API Programming&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1095,"url":"http:\/\/intelligentonlinetools.com\/blog\/2017\/03\/25\/3-most-useful-examples-to-add-interactivity-to-graph-data-using-bokeh-library\/","url_meta":{"origin":32,"position":1},"title":"3 Most Useful Examples to Add Interactivity to Graph Data Using Bokeh Library","date":"March 25, 2017","format":false,"excerpt":"Bokeh is a Python library for building advanced and modern data visualization web applications. Bokeh allows to add interactive controls like slider, buttons, dropdown menu and so on to the data graphs. Bokeh provides a variety of ways to embed plots and data into HTML documents including generating standalone HTML\u2026","rel":"","context":"In &quot;Data Visualization&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/intelligentonlinetools.com\/blog\/wp-content\/uploads\/2017\/03\/bokeh-and-other-data-viz-300x138.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":852,"url":"http:\/\/intelligentonlinetools.com\/blog\/2017\/01\/22\/data-visualization-visualizing-an-lda-model-using-python\/","url_meta":{"origin":32,"position":2},"title":"Data Visualization &#8211; Visualizing an LDA Model using Python","date":"January 22, 2017","format":false,"excerpt":"In the previous post Topic Extraction from Blog Posts with LSI , LDA and Python python code was created for text documents topic modeling using Latent Dirichlet allocation (LDA) method. The output was just an overview of the words with corresponding probability distribution for each topic and it was hard\u2026","rel":"","context":"In &quot;Data Mining&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/intelligentonlinetools.com\/blog\/wp-content\/uploads\/2017\/01\/word_topic_dataframe-300x112.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1257,"url":"http:\/\/intelligentonlinetools.com\/blog\/2017\/06\/17\/time-series-prediction-with-convolutional-neural-networks-and-keras\/","url_meta":{"origin":32,"position":3},"title":"Time Series Prediction with Convolutional Neural Networks and Keras","date":"June 17, 2017","format":false,"excerpt":"A convolutional neural network (CNNs) is a type of network that has recently gained popularity due to its success in classification problems (e.g. image recognition or time series classification) [1]. One of the working examples how to use Keras CNN for time series can be found at this link[2]. This\u2026","rel":"","context":"In &quot;Artificial Intelligence&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/intelligentonlinetools.com\/blog\/wp-content\/uploads\/2017\/06\/CNN22-300x212.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":431,"url":"http:\/\/intelligentonlinetools.com\/blog\/2016\/07\/30\/automating-csv-file-reading-and-writing-with-python\/","url_meta":{"origin":32,"position":4},"title":"Automating CSV File Reading and Writing with Python","date":"July 30, 2016","format":false,"excerpt":"Python is widely used programming language in many fields, such as data science, machine learning, web development. It is also a great choice for automation of different computer tasks such as data downloading from websites or data manipulation. Python can open, read or save data in different file formats. In\u2026","rel":"","context":"In &quot;Python Scripts&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2452,"url":"http:\/\/intelligentonlinetools.com\/blog\/2018\/12\/19\/wavelet-denoising-with-daubechies-wavelet\/","url_meta":{"origin":32,"position":5},"title":"Application of Daubechies Wavelet for Denoising 1D Data","date":"December 19, 2018","format":false,"excerpt":"If we see in the real world, we will always face the signals which are not changing their stats. Means the change in the data signals are quite slow. But if we compare the 1D- data to the 2D Image data then we can see the 2D images have more\u2026","rel":"","context":"In &quot;Wavelet&quot;","img":{"alt_text":"Approximation and details at the different levels","src":"https:\/\/i0.wp.com\/intelligentonlinetools.com\/blog\/wp-content\/uploads\/2018\/12\/Figure-7-e1545270773979.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/32"}],"collection":[{"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":13,"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":47,"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions\/47"}],"wp:attachment":[{"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/intelligentonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}