{"id":1884,"date":"2015-01-31T06:56:43","date_gmt":"2015-01-31T06:56:43","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=1884"},"modified":"2019-06-25T14:18:05","modified_gmt":"2019-06-25T14:18:05","slug":"membuat-grafik-dengan-variance-charts","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/","title":{"rendered":"Membuat Grafik dengan Variance Charts"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\" aligncenter\" src=\"http:\/\/thewhyaxis.info\/content\/66-variance\/variance.gif\" alt=\"\" width=\"750\" height=\"472\" \/><br \/>\n<!--more--><br \/>\n<a href=\"http:\/\/tutsplus.github.io\/easier-visual-data-in-the-browser-with-variance-charts\/\" target='_blank' rel=\"noopener noreferrer\">DEMO<\/a><\/p>\n<p><a href=\"https:\/\/s3.amazonaws.com\/cms-assets.tutsplus.com\/uploads\/users\/30\/posts\/20819\/attachment\/easier-visual-data-in-the-browser-with-variance-charts-master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">DOWNLOAD<\/a><\/p>\n<p>Syarat untuk membuat grafik menggunakan Variance charts , kita harus menambahkan CDN ke website yaitu<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n  &lt;body&gt;\r\n    &lt;script src=&quot;http:\/\/variancecharts.com\/cdn\/variance-noncommercial-standalone-f2c3356.min.js&quot;\r\n            charset=&quot;UTF-8&quot;&gt;&lt;\/script&gt;\r\n    &lt;script src=&quot;http:\/\/code.jquery.com\/jquery-1.10.1.min.js&quot;&gt;&lt;\/script&gt;\t\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Kemudian tambahkan data csv dibawah ini di dalam tag body : <\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;csv id=&quot;yearly-bacons&quot;&gt; year,bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 &lt;\/csv&gt;\r\n<\/pre>\n<p>Lalu tambahkan kode berikut , dan paste kan di dalam body juga.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;bacon-chart&quot;&gt;\r\n   &lt;h3&gt;Bacon data&lt;\/h3&gt;\r\n   &lt;chart data=&quot;#yearly-bacons&quot; scale-y-linear=&quot;0 20000&quot; scale-y-linear=&quot;1990 2015&quot;&gt;\r\n     &lt;guide-x&gt;&lt;\/guide-x&gt;\r\n     &lt;guide-y&gt;&lt;\/guide-y&gt;\r\n     &lt;repeat&gt;\r\n       &lt;annotation class=&quot;bottom&quot;&gt;{{year}}&lt;\/annotation&gt;\r\n       &lt;annotation class=&quot;tooltip&quot; map-position=&quot;bacons&quot;&gt;{{bacons}}&lt;\/annotation&gt;\r\n       &lt;bar map-length=&quot;bacons&quot;&gt;&lt;\/bar&gt;\r\n     &lt;\/repeat&gt;\r\n   &lt;\/chart&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Jangan lupa untuk menambahkan css, agar tampilan terlihat menarik.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\/*! normalize.css v3.0.1 | MIT License | git.io\/normalize *\/\r\n\r\n\/**\r\n * 1. Set default font family to sans-serif.\r\n * 2. Prevent iOS text size adjust after orientation change, without disabling\r\n *    user zoom.\r\n *\/\r\n\r\nhtml {\r\n  font-family: sans-serif; \/* 1 *\/\r\n  -ms-text-size-adjust: 100%; \/* 2 *\/\r\n  -webkit-text-size-adjust: 100%; \/* 2 *\/\r\n}\r\n\r\n\/**\r\n * Remove default margin.\r\n *\/\r\n\r\nbody {\r\n  margin: 0;\r\n}\r\n\r\n\/* HTML5 display definitions\r\n   ========================================================================== *\/\r\n\r\n\/**\r\n * Correct `block` display not defined for any HTML5 element in IE 8\/9.\r\n * Correct `block` display not defined for `details` or `summary` in IE 10\/11 and Firefox.\r\n * Correct `block` display not defined for `main` in IE 11.\r\n *\/\r\n\r\narticle,\r\naside,\r\ndetails,\r\nfigcaption,\r\nfigure,\r\nfooter,\r\nheader,\r\nhgroup,\r\nmain,\r\nnav,\r\nsection,\r\nsummary {\r\n  display: block;\r\n}\r\n\r\n\/**\r\n * 1. Correct `inline-block` display not defined in IE 8\/9.\r\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\r\n *\/\r\n\r\naudio,\r\ncanvas,\r\nprogress,\r\nvideo {\r\n  display: inline-block; \/* 1 *\/\r\n  vertical-align: baseline; \/* 2 *\/\r\n}\r\n\r\n\/**\r\n * Prevent modern browsers from displaying `audio` without controls.\r\n * Remove excess height in iOS 5 devices.\r\n *\/\r\n\r\naudio:not(&#x5B;controls]) {\r\n  display: none;\r\n  height: 0;\r\n}\r\n\r\n\/**\r\n * Address `&#x5B;hidden]` styling not present in IE 8\/9\/10.\r\n * Hide the `template` element in IE 8\/9\/11, Safari, and Firefox &lt; 22.\r\n *\/\r\n\r\n&#x5B;hidden],\r\ntemplate {\r\n  display: none;\r\n}\r\n\r\n\/* Links\r\n   ========================================================================== *\/\r\n\r\n\/**\r\n * Remove the gray background color from active links in IE 10.\r\n *\/\r\n\r\na {\r\n  background: transparent;\r\n}\r\n\r\n\/**\r\n * Improve readability when focused and also mouse hovered in all browsers.\r\n *\/\r\n\r\na:active,\r\na:hover {\r\n  outline: 0;\r\n}\r\n\r\n\/* Text-level semantics\r\n   ========================================================================== *\/\r\n\r\n\/**\r\n * Address styling not present in IE 8\/9\/10\/11, Safari, and Chrome.\r\n *\/\r\n\r\nabbr&#x5B;title] {\r\n  border-bottom: 1px dotted;\r\n}\r\n\r\n\/**\r\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\r\n *\/\r\n\r\nb,\r\nstrong {\r\n  font-weight: bold;\r\n}\r\n\r\n\/**\r\n * Address styling not present in Safari and Chrome.\r\n *\/\r\n\r\ndfn {\r\n  font-style: italic;\r\n}\r\n\r\n\/**\r\n * Address variable `h1` font-size and margin within `section` and `article`\r\n * contexts in Firefox 4+, Safari, and Chrome.\r\n *\/\r\n\r\nh1 {\r\n  font-size: 2em;\r\n  margin: 0.67em 0;\r\n}\r\n\r\n\/**\r\n * Address styling not present in IE 8\/9.\r\n *\/\r\n\r\nmark {\r\n  background: #ff0;\r\n  color: #000;\r\n}\r\n\r\n\/**\r\n * Address inconsistent and variable font size in all browsers.\r\n *\/\r\n\r\nsmall {\r\n  font-size: 80%;\r\n}\r\n\r\n\/**\r\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\r\n *\/\r\n\r\nsub,\r\nsup {\r\n  font-size: 75%;\r\n  line-height: 0;\r\n  position: relative;\r\n  vertical-align: baseline;\r\n}\r\n\r\nsup {\r\n  top: -0.5em;\r\n}\r\n\r\nsub {\r\n  bottom: -0.25em;\r\n}\r\n\r\n\/* Embedded content\r\n   ========================================================================== *\/\r\n\r\n\/**\r\n * Remove border when inside `a` element in IE 8\/9\/10.\r\n *\/\r\n\r\nimg {\r\n  border: 0;\r\n}\r\n\r\n\/**\r\n * Correct overflow not hidden in IE 9\/10\/11.\r\n *\/\r\n\r\nsvg:not(:root) {\r\n  overflow: hidden;\r\n}\r\n\r\n\/* Grouping content\r\n   ========================================================================== *\/\r\n\r\n\/**\r\n * Address margin not present in IE 8\/9 and Safari.\r\n *\/\r\n\r\nfigure {\r\n  margin: 1em 40px;\r\n}\r\n\r\n\/**\r\n * Address differences between Firefox and other browsers.\r\n *\/\r\n\r\nhr {\r\n  -moz-box-sizing: content-box;\r\n  box-sizing: content-box;\r\n  height: 0;\r\n}\r\n\r\n\/**\r\n * Contain overflow in all browsers.\r\n *\/\r\n\r\npre {\r\n  overflow: auto;\r\n}\r\n\r\n\/**\r\n * Address odd `em`-unit font size rendering in all browsers.\r\n *\/\r\n\r\ncode,\r\nkbd,\r\npre,\r\nsamp {\r\n  font-family: monospace, monospace;\r\n  font-size: 1em;\r\n}\r\n\r\n\/* Forms\r\n   ========================================================================== *\/\r\n\r\n\/**\r\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\r\n * styling of `select`, unless a `border` property is set.\r\n *\/\r\n\r\n\/**\r\n * 1. Correct color not being inherited.\r\n *    Known issue: affects color of disabled elements.\r\n * 2. Correct font properties not being inherited.\r\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\r\n *\/\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n  color: inherit; \/* 1 *\/\r\n  font: inherit; \/* 2 *\/\r\n  margin: 0; \/* 3 *\/\r\n}\r\n\r\n\/**\r\n * Address `overflow` set to `hidden` in IE 8\/9\/10\/11.\r\n *\/\r\n\r\nbutton {\r\n  overflow: visible;\r\n}\r\n\r\n\/**\r\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\r\n * All other form control elements do not inherit `text-transform` values.\r\n * Correct `button` style inheritance in Firefox, IE 8\/9\/10\/11, and Opera.\r\n * Correct `select` style inheritance in Firefox.\r\n *\/\r\n\r\nbutton,\r\nselect {\r\n  text-transform: none;\r\n}\r\n\r\n\/**\r\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\r\n *    and `video` controls.\r\n * 2. Correct inability to style clickable `input` types in iOS.\r\n * 3. Improve usability and consistency of cursor style between image-type\r\n *    `input` and others.\r\n *\/\r\n\r\nbutton,\r\nhtml input&#x5B;type=&quot;button&quot;], \/* 1 *\/\r\ninput&#x5B;type=&quot;reset&quot;],\r\ninput&#x5B;type=&quot;submit&quot;] {\r\n  -webkit-appearance: button; \/* 2 *\/\r\n  cursor: pointer; \/* 3 *\/\r\n}\r\n\r\n\/**\r\n * Re-set default cursor for disabled elements.\r\n *\/\r\n\r\nbutton&#x5B;disabled],\r\nhtml input&#x5B;disabled] {\r\n  cursor: default;\r\n}\r\n\r\n\/**\r\n * Remove inner padding and border in Firefox 4+.\r\n *\/\r\n\r\nbutton::-moz-focus-inner,\r\ninput::-moz-focus-inner {\r\n  border: 0;\r\n  padding: 0;\r\n}\r\n\r\n\/**\r\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\r\n * the UA stylesheet.\r\n *\/\r\n\r\ninput {\r\n  line-height: normal;\r\n}\r\n\r\n\/**\r\n * It's recommended that you don't attempt to style these elements.\r\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\r\n *\r\n * 1. Address box sizing set to `content-box` in IE 8\/9\/10.\r\n * 2. Remove excess padding in IE 8\/9\/10.\r\n *\/\r\n\r\ninput&#x5B;type=&quot;checkbox&quot;],\r\ninput&#x5B;type=&quot;radio&quot;] {\r\n  box-sizing: border-box; \/* 1 *\/\r\n  padding: 0; \/* 2 *\/\r\n}\r\n\r\n\/**\r\n * Fix the cursor style for Chrome's increment\/decrement buttons. For certain\r\n * `font-size` values of the `input`, it causes the cursor style of the\r\n * decrement button to change from `default` to `text`.\r\n *\/\r\n\r\ninput&#x5B;type=&quot;number&quot;]::-webkit-inner-spin-button,\r\ninput&#x5B;type=&quot;number&quot;]::-webkit-outer-spin-button {\r\n  height: auto;\r\n}\r\n\r\n\/**\r\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\r\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome\r\n *    (include `-moz` to future-proof).\r\n *\/\r\n\r\ninput&#x5B;type=&quot;search&quot;] {\r\n  -webkit-appearance: textfield; \/* 1 *\/\r\n  -moz-box-sizing: content-box;\r\n  -webkit-box-sizing: content-box; \/* 2 *\/\r\n  box-sizing: content-box;\r\n}\r\n\r\n\/**\r\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\r\n * Safari (but not Chrome) clips the cancel button when the search input has\r\n * padding (and `textfield` appearance).\r\n *\/\r\n\r\ninput&#x5B;type=&quot;search&quot;]::-webkit-search-cancel-button,\r\ninput&#x5B;type=&quot;search&quot;]::-webkit-search-decoration {\r\n  -webkit-appearance: none;\r\n}\r\n\r\n\/**\r\n * Define consistent border, margin, and padding.\r\n *\/\r\n\r\nfieldset {\r\n  border: 1px solid #c0c0c0;\r\n  margin: 0 2px;\r\n  padding: 0.35em 0.625em 0.75em;\r\n}\r\n\r\n\/**\r\n * 1. Correct `color` not being inherited in IE 8\/9\/10\/11.\r\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\r\n *\/\r\n\r\nlegend {\r\n  border: 0; \/* 1 *\/\r\n  padding: 0; \/* 2 *\/\r\n}\r\n\r\n\/**\r\n * Remove default vertical scrollbar in IE 8\/9\/10\/11.\r\n *\/\r\n\r\ntextarea {\r\n  overflow: auto;\r\n}\r\n\r\n\/**\r\n * Don't inherit the `font-weight` (applied by a rule above).\r\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\r\n *\/\r\n\r\noptgroup {\r\n  font-weight: bold;\r\n}\r\n\r\n\/* Tables\r\n   ========================================================================== *\/\r\n\r\n\/**\r\n * Remove most spacing between table cells.\r\n *\/\r\n\r\ntable {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\ntd,\r\nth {\r\n  padding: 0;\r\n}\r\n\r\nbody {\r\n  color: #3f130c;\r\n  height: 100%;\r\n  font-family: sans-serif;\r\n  background-image: url(..\/img\/bg.jpg);\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  background-attachment: fixed;\r\n}\r\nh1,h2,h3,h4 {\r\n  font-family: 'Tauri', sans-serif;\r\n}\r\n.container {\r\n  width: 50%;\r\n  margin: 100px auto;\r\n  padding: 100px;\r\n  position: relative;\r\n  background-image: url(..\/img\/bg-blur.jpg);\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  background-attachment: fixed;\r\n}\r\n.bacon-chart {\r\n  position: relative;\r\n  z-index: 999;\r\n}\r\n.bacon-chart h3 {\r\n  margin: 0 0 1em;\r\n}\r\n.container:after {\r\n  background-color: rgba(255,255,255,0.4);\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  content: &quot;&quot;;\r\n}\r\n.container chart {\r\n  width: 100%;\r\n  height: 400px;\r\n}\r\n.bacon-chart bar {\r\n  background-color: rgba(96,28,18, 0.7);\r\n  margin: 0 !important;\r\n  border: none;\r\n  height: 0;\r\n  -webkit-animation: barsIn 2s ease-out;\r\n}\r\n\r\ndatum {\r\n  overflow: hidden;\r\n}\r\n.tooltip {\r\n  width: auto;\r\n  height: auto;\r\n  padding: 6px;\r\n  background-color: #444;\r\n  color: #fff;\r\n  opacity: 0;\r\n  left: -100%;\r\n  font-size: 0.6em;\r\n  -webkit-transition: all 0.4s;\r\n  -moz-transition: all 0.4s;\r\n  -ms-transition: all 0.4s;\r\n  -o-transition: all 0.4s;\r\n  transition: all 0.4s;\r\n}\r\ndatum:hover {\r\n  background-color: rgba(255,255,255,0.1);\r\n}\r\ndatum:hover .tooltip {\r\n  display: block;\r\n  opacity: 1;\r\n  left: 0;\r\n}\r\n\r\n@-webkit-keyframes barsIn {\r\n  0% {\r\n    bottom: -100%;\r\n  }\r\n  100% {\r\n    bottom: 0;\r\n  }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[32,139,712,711,713,128],"class_list":["post-1884","post","type-post","status-publish","format-standard","hentry","category-belajar-web-design","tag-belajar-web-design-2","tag-html-css","tag-membuat-grafik","tag-variance-carts","tag-variancecharts-com","tag-web-desain"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membuat Grafik dengan Variance Charts - WebHozz Blog<\/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:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Grafik dengan Variance Charts - WebHozz Blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-31T06:56:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-25T14:18:05+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/thewhyaxis.info\/content\/66-variance\/variance.gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\"},\"headline\":\"Membuat Grafik dengan Variance Charts\",\"datePublished\":\"2015-01-31T06:56:43+00:00\",\"dateModified\":\"2019-06-25T14:18:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/\"},\"wordCount\":1182,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/thewhyaxis.info\\\/content\\\/66-variance\\\/variance.gif\",\"keywords\":[\"belajar web design\",\"html css\",\"membuat grafik\",\"variance carts\",\"variancecharts.com\",\"web desain\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/\",\"name\":\"Membuat Grafik dengan Variance Charts - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/thewhyaxis.info\\\/content\\\/66-variance\\\/variance.gif\",\"datePublished\":\"2015-01-31T06:56:43+00:00\",\"dateModified\":\"2019-06-25T14:18:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/#primaryimage\",\"url\":\"http:\\\/\\\/thewhyaxis.info\\\/content\\\/66-variance\\\/variance.gif\",\"contentUrl\":\"http:\\\/\\\/thewhyaxis.info\\\/content\\\/66-variance\\\/variance.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-grafik-dengan-variance-charts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Grafik dengan Variance Charts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/putralucio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Grafik dengan Variance Charts - WebHozz Blog","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:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/","og_locale":"en_US","og_type":"article","og_title":"Membuat Grafik dengan Variance Charts - WebHozz Blog","og_url":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/","og_site_name":"WebHozz Blog","article_published_time":"2015-01-31T06:56:43+00:00","article_modified_time":"2019-06-25T14:18:05+00:00","og_image":[{"url":"http:\/\/thewhyaxis.info\/content\/66-variance\/variance.gif","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea"},"headline":"Membuat Grafik dengan Variance Charts","datePublished":"2015-01-31T06:56:43+00:00","dateModified":"2019-06-25T14:18:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/"},"wordCount":1182,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/#primaryimage"},"thumbnailUrl":"http:\/\/thewhyaxis.info\/content\/66-variance\/variance.gif","keywords":["belajar web design","html css","membuat grafik","variance carts","variancecharts.com","web desain"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/","url":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/","name":"Membuat Grafik dengan Variance Charts - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/#primaryimage"},"thumbnailUrl":"http:\/\/thewhyaxis.info\/content\/66-variance\/variance.gif","datePublished":"2015-01-31T06:56:43+00:00","dateModified":"2019-06-25T14:18:05+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/#primaryimage","url":"http:\/\/thewhyaxis.info\/content\/66-variance\/variance.gif","contentUrl":"http:\/\/thewhyaxis.info\/content\/66-variance\/variance.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/membuat-grafik-dengan-variance-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Grafik dengan Variance Charts"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/putralucio\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=1884"}],"version-history":[{"count":3,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1884\/revisions"}],"predecessor-version":[{"id":8578,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1884\/revisions\/8578"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=1884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=1884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=1884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}