{"id":223,"date":"2012-09-18T01:22:56","date_gmt":"2012-09-18T01:22:56","guid":{"rendered":"http:\/\/webomnizz.com\/?p=223"},"modified":"2019-11-20T07:37:22","modified_gmt":"2019-11-20T07:37:22","slug":"simple-and-attractive-javascript-plotting-chart","status":"publish","type":"post","link":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/","title":{"rendered":"Simple and attractive javascript plotting chart"},"content":{"rendered":"\n<p>if we talking about the data representation, like the total sale or total visits on day-by-day etc. then it&#8217;s a great idea to showing the data into the plotting chart. When I have this idea to represent the data in the plotting chart then I got a JavaScript plug-in on flotcharts.org, one to the simplest and attractive javascript plotting chart plug-in. Below you get that how to start with this plugin in the simplest way, which means just the starting of the <strong>plotting chart<\/strong> plug-in.<\/p>\n\n\n\n<p>First, make your document ready like usually, we are doing before running any jquery stuff. After that just call the <strong>plotting chart<\/strong> plugin&#8217;s function <em>&#8216;$.plot()&#8217;<\/em> and start to input the data that you want to display on your <strong>chart<\/strong>. First, you have to mention, in which element you want to show your chart. As you see in the HTML section, I have created a div with the class name <em>&#8216;graph&#8217;<\/em>. And in the jquery section just call the call or whatever you element you want.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Now just put your data into the <strong>plot<\/strong> function, the data that you are giving into the plugin should be in an array format. That could be raw data or the object with properties. After putting the data format, set the label property if you want. If you want to show the label on the chart then you have to give the label with its values, otherwise, it is not mandatory. Here is the code without a label:<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>$(document).ready(function() {\n    $.plot('div.graph',\n        &#91;{ data: &#91; &#91;0, 60], &#91;1, 100], &#91;2, 20], &#91;3, 200], &#91;4, 150], &#91;5, 100], &#91;6, 200] ]}],\n        ....\n    );\n});<\/code><\/pre>\n\n\n\n<p>In my example I also mention labels. Then just make true the line and the points also, that we want on our plotting chart. Now come to the grid section. This section is also not mandatory. But if you want to make a hover effect on the point of lines then the grid section makes it more clear and attractive, with to enable the <em>&#8216;hoverable or clickable&#8217;<\/em> as you wish. Hoverable working with hover event and clickable working with click event. I have enabled the hoverable, And the second <em>&#8216;backgroundColor&#8217;<\/em> property is just for showing the gradient effect on background, which is also not mandatory, but if you want then you can because by default the background of <strong>plotting chart<\/strong> section is white. Now just run your code and the <strong>plotting chart<\/strong> complete.<\/p>\n\n\n\n<p>Make sure to include the <em>flot.js<\/em> plugin file and the <em>jquery.js<\/em> file. And you are welcome through the comment section for any feedback or comment.<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>function($) {\n    $(document).ready(function(){\n        $.plot('div.graph',\n            &#91;{ data: &#91; &#91;0, 60], &#91;1, 100], &#91;2, 20], &#91;3, 200], &#91;4, 150], &#91;5, 100], &#91;6, 200] ], label: 'Amount Show' }], {\n            series:{\n                lines: {show: true},\n                points: {show: true}\n            },\n            grid : {hoverable: true, backgroundColor: {colors: &#91;\"#ffffff\", \"#efefef\"]}}\n        });\n    });\n})(jQuery);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Style Section<\/h2>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>#container{\n    width: 600px;\n    height: 200px;\n    margin: 0 auto;\n}\n.graph{\n    width: 600px;\n    height: 200px;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">HTML section<\/h2>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;div id=\"container\">\n    &lt;div class=\"graph\">&lt;\/div>\n&lt;\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>if we talking about the data representation, like the total sale or total visits on day-by-day etc. then it&#8217;s a great idea to showing the data into the plotting chart. When I have this idea to represent the data in the plotting chart then I got a JavaScript plug-in on flotcharts.org, one to the simplest [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[56],"tags":[22,8,28],"class_list":["post-223","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-javascript-2","tag-jquery-2","tag-plotting-chart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Simple and attractive javascript plotting chart<\/title>\n<meta name=\"description\" content=\"Simple and Attractive javascript plotting chart. Plotting chart possible through the flot.js plugin. This plugin display the data into attractive sections.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple and attractive javascript plotting chart\" \/>\n<meta property=\"og:description\" content=\"Simple and Attractive javascript plotting chart. Plotting chart possible through the flot.js plugin. This plugin display the data into attractive sections.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/\" \/>\n<meta property=\"og:site_name\" content=\"WebOmnizz\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/web.omnizz\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/web.omnizz\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-18T01:22:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-20T07:37:22+00:00\" \/>\n<meta name=\"author\" content=\"WebOmnizz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webomnizz\" \/>\n<meta name=\"twitter:site\" content=\"@webomnizz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"WebOmnizz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/\"},\"author\":{\"name\":\"WebOmnizz\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#\\\/schema\\\/person\\\/adc3fe2ce2bef4a57dba3004a31f74c2\"},\"headline\":\"Simple and attractive javascript plotting chart\",\"datePublished\":\"2012-09-18T01:22:56+00:00\",\"dateModified\":\"2019-11-20T07:37:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/\"},\"wordCount\":421,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#organization\"},\"keywords\":[\"javascript\",\"jquery\",\"plotting-chart\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/\",\"url\":\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/\",\"name\":\"Simple and attractive javascript plotting chart\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#website\"},\"datePublished\":\"2012-09-18T01:22:56+00:00\",\"dateModified\":\"2019-11-20T07:37:22+00:00\",\"description\":\"Simple and Attractive javascript plotting chart. Plotting chart possible through the flot.js plugin. This plugin display the data into attractive sections.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/simple-and-attractive-javascript-plotting-chart\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webomnizz.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery\",\"item\":\"https:\\\/\\\/webomnizz.com\\\/jquery\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple and attractive javascript plotting chart\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#website\",\"url\":\"https:\\\/\\\/webomnizz.com\\\/\",\"name\":\"WebOmnizz\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webomnizz.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#organization\",\"name\":\"WebOmnizz\",\"url\":\"https:\\\/\\\/webomnizz.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webomnizz.com\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/web_icon.jpg\",\"contentUrl\":\"https:\\\/\\\/webomnizz.com\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/web_icon.jpg\",\"width\":512,\"height\":512,\"caption\":\"WebOmnizz\"},\"image\":{\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/web.omnizz\",\"https:\\\/\\\/x.com\\\/webomnizz\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/#\\\/schema\\\/person\\\/adc3fe2ce2bef4a57dba3004a31f74c2\",\"name\":\"WebOmnizz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webomnizz.com\\\/wp-content\\\/litespeed\\\/avatar\\\/094f2c86e6cd39f0cdffb1bc324a4ac2.jpg?ver=1776837844\",\"url\":\"https:\\\/\\\/webomnizz.com\\\/wp-content\\\/litespeed\\\/avatar\\\/094f2c86e6cd39f0cdffb1bc324a4ac2.jpg?ver=1776837844\",\"contentUrl\":\"https:\\\/\\\/webomnizz.com\\\/wp-content\\\/litespeed\\\/avatar\\\/094f2c86e6cd39f0cdffb1bc324a4ac2.jpg?ver=1776837844\",\"caption\":\"WebOmnizz\"},\"description\":\"Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.\",\"sameAs\":[\"https:\\\/\\\/webomnizz.com\",\"https:\\\/\\\/www.facebook.com\\\/web.omnizz\",\"https:\\\/\\\/x.com\\\/webomnizz\"],\"url\":\"https:\\\/\\\/webomnizz.com\\\/author\\\/jogpi06\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple and attractive javascript plotting chart","description":"Simple and Attractive javascript plotting chart. Plotting chart possible through the flot.js plugin. This plugin display the data into attractive sections.","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:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/","og_locale":"en_US","og_type":"article","og_title":"Simple and attractive javascript plotting chart","og_description":"Simple and Attractive javascript plotting chart. Plotting chart possible through the flot.js plugin. This plugin display the data into attractive sections.","og_url":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/","og_site_name":"WebOmnizz","article_publisher":"https:\/\/www.facebook.com\/web.omnizz","article_author":"https:\/\/www.facebook.com\/web.omnizz","article_published_time":"2012-09-18T01:22:56+00:00","article_modified_time":"2019-11-20T07:37:22+00:00","author":"WebOmnizz","twitter_card":"summary_large_image","twitter_creator":"@webomnizz","twitter_site":"@webomnizz","twitter_misc":{"Written by":"WebOmnizz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/#article","isPartOf":{"@id":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/"},"author":{"name":"WebOmnizz","@id":"https:\/\/webomnizz.com\/#\/schema\/person\/adc3fe2ce2bef4a57dba3004a31f74c2"},"headline":"Simple and attractive javascript plotting chart","datePublished":"2012-09-18T01:22:56+00:00","dateModified":"2019-11-20T07:37:22+00:00","mainEntityOfPage":{"@id":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/"},"wordCount":421,"commentCount":0,"publisher":{"@id":"https:\/\/webomnizz.com\/#organization"},"keywords":["javascript","jquery","plotting-chart"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/","url":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/","name":"Simple and attractive javascript plotting chart","isPartOf":{"@id":"https:\/\/webomnizz.com\/#website"},"datePublished":"2012-09-18T01:22:56+00:00","dateModified":"2019-11-20T07:37:22+00:00","description":"Simple and Attractive javascript plotting chart. Plotting chart possible through the flot.js plugin. This plugin display the data into attractive sections.","breadcrumb":{"@id":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webomnizz.com\/simple-and-attractive-javascript-plotting-chart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webomnizz.com\/"},{"@type":"ListItem","position":2,"name":"jQuery","item":"https:\/\/webomnizz.com\/jquery\/"},{"@type":"ListItem","position":3,"name":"Simple and attractive javascript plotting chart"}]},{"@type":"WebSite","@id":"https:\/\/webomnizz.com\/#website","url":"https:\/\/webomnizz.com\/","name":"WebOmnizz","description":"","publisher":{"@id":"https:\/\/webomnizz.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webomnizz.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webomnizz.com\/#organization","name":"WebOmnizz","url":"https:\/\/webomnizz.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webomnizz.com\/#\/schema\/logo\/image\/","url":"https:\/\/webomnizz.com\/wp-content\/uploads\/2020\/01\/web_icon.jpg","contentUrl":"https:\/\/webomnizz.com\/wp-content\/uploads\/2020\/01\/web_icon.jpg","width":512,"height":512,"caption":"WebOmnizz"},"image":{"@id":"https:\/\/webomnizz.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/web.omnizz","https:\/\/x.com\/webomnizz"]},{"@type":"Person","@id":"https:\/\/webomnizz.com\/#\/schema\/person\/adc3fe2ce2bef4a57dba3004a31f74c2","name":"WebOmnizz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webomnizz.com\/wp-content\/litespeed\/avatar\/094f2c86e6cd39f0cdffb1bc324a4ac2.jpg?ver=1776837844","url":"https:\/\/webomnizz.com\/wp-content\/litespeed\/avatar\/094f2c86e6cd39f0cdffb1bc324a4ac2.jpg?ver=1776837844","contentUrl":"https:\/\/webomnizz.com\/wp-content\/litespeed\/avatar\/094f2c86e6cd39f0cdffb1bc324a4ac2.jpg?ver=1776837844","caption":"WebOmnizz"},"description":"Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.","sameAs":["https:\/\/webomnizz.com","https:\/\/www.facebook.com\/web.omnizz","https:\/\/x.com\/webomnizz"],"url":"https:\/\/webomnizz.com\/author\/jogpi06\/"}]}},"_links":{"self":[{"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":3,"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":1158,"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/posts\/223\/revisions\/1158"}],"wp:attachment":[{"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webomnizz.com\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}