Visualizer: How to populate chart series and data dynamically

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Visualizer: How to populate chart series and data dynamically - Themeisle Docs</title> <meta name="viewport" content="width=device-width, maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"> <meta name="description" content="From version 1.1.0 Visualizer plugin allows users to write their own hooks for chart series and data filters. The global filter is applied for each chart, each "/> <meta name="author" content="Vertigo Studio SA"/> <link rel="canonical" href="https://docs.themeisle.com/article/605-how-can-i-populate-chart-series-and-data-dynamically"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="Visualizer: How to populate chart series and data dynamically" /> <meta name="twitter:description" content="From version 1.1.0 Visualizer plugin allows users to write their own hooks for chart series and data filters. The global filter is applied for each chart, each "/> <link rel="stylesheet" href="//d3eto7onm69fcz.cloudfront.net/assets/stylesheets/launch-1732006941823.css"> <style> body { background: #ffffff; } .navbar .navbar-inner { background: #ffffff; } .navbar .nav li a, .navbar .icon-private-w { color: #7f7f7f; } .navbar .brand, .navbar .nav li a:hover, .navbar .nav li a:focus, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus { color: #ff7f66; } .navbar a:hover .icon-private-w, .navbar a:focus .icon-private-w, .navbar .active a .icon-private-w, .navbar .active a:hover .icon-private-w, .navbar .active a:focus .icon-private-w { color: #ff7f66; } #serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count { color: #ff7f66; } #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color:#585858; } </style> <link rel="apple-touch-icon-precomposed" href="//d3eto7onm69fcz.cloudfront.net/assets/ico/touch-152.png"> <link rel="shortcut icon" type="image/png" href="//d33v4339jhl8k0.cloudfront.net/docs/assets/55192029e4b0221aadf23f55/images/5cdc0f042c7d3a6d82bd7cc1/cropped-favicon-2.png">  <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","url":"https://docs.themeisle.com","potentialAction":{"@type":"SearchAction","target":"https://docs.themeisle.com/search?query={query}","query-input":"required name=query"}} </script> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Themeisle Docs","item":"https://docs.themeisle.com"},{"@type":"ListItem","position":2,"name":"Visualizer: Charts and Graphs ","item":"https://docs.themeisle.com/collection/1560-visualizer-charts-and-graphs"},{"@type":"ListItem","position":3,"name":"Visualizer: How to populate chart series and data dynamically","item":"https://docs.themeisle.com/article/605-how-can-i-populate-chart-series-and-data-dynamically"}]} </script> <script async type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "hy76wyq8hi"); </script> <script>window.addEventListener("DOMContentLoaded",g=>{let d=document.getElementsByTagName("a"),b=window.location.href.split("/");b=b[b.length-1];let a=null;for(let c=0;c<d.length;c++){if(-1!==(a=d[c].href).indexOf("//themeisle.com")&& -1!==a.indexOf("themeisle.com/blog")|| -1===a.indexOf("//themeisle.com")|| -1!==a.indexOf("utm_"))continue;let f=-1===a.indexOf("?")?"?":"&",e=a.split("#");d[c].href=e[0]+f+"utm_source=themeisle&utm_medium=docs&utm_campaign="+b+(e[1]?"#"+e[1]:"")}})</script> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-579BG29');</script>   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-579BG29" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <style>.async-hide { opacity: 0 !important} </style> <script src="https://cdn.jsdelivr.net/npm/gifffer@1.5.4/build/gifffer.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { const nav = document.querySelector('.nav'); if (nav) { const li = document.createElement('li'); const a = document.createElement('a'); a.href = 'https://themeisle.com/contact/'; a.title = 'Contact'; a.textContent = 'Contact'; li.appendChild(a); nav.appendChild(li); } }); </script> <script type="text/javascript"> window.onload = function() { Gifffer(); } </script> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'> <style> /* Shopify docs hack */ body:has([href*='category/1993-general']) .ti-docs-sidebar, body:has([href*='category/1993-general']) .btn.btn-navbar, body:has([href*='category/1993-general']) header .nav { display: none; } /* GENERIC */ header#mainNav li#contact, header#mainNav li#contactMobile { display: none; } section#collection-1429 { display: none; } .brand img { max-width: 150px; } body, input { font-family: 'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif; } h1 strong { font-weight: 600; } a, a span { -webkit-transition: .3s ease all; -moz-transition: .3s ease all; -o-transition: .3s ease all; transition: .3s ease all; } /* remove default webkit input shadow */ input, textarea { -webkit-appearance: none; } /* HEADER */ #mainNav .brand span { background: url(http://m.helpscout.net.s3.amazonaws.com/docs-logo.png) no-repeat 0 0; background-size: 100%; display: inline-block; height: 30px; text-indent: -9000px; width: 155px; } .navbar .brand { padding: 20px 20px 15px 0; } .navbar .nav li a { padding: 14px 12px; } .navbar .btn-navbar .icon-bar { background: #fff; box-shadow: none; } /* HOME */ .category-list .category:hover { background: #f7f9fa; } .category-list .category p { color: #6d7983; line-height: 22px; } /* HIDE MENUS */ .nav #neve, .nav #hestia, .nav #visualizer, .nav #otter, .nav #orbit-fox, .nav #feedzy-rss-feeds, .nav #multiple-page-generator, .nav #wp-product-review, .nav #getting-started, .nav #custom-codes, .nav #ophelia-shopify-theme { display: none; } /* SEARCH */ #searchBar .search-query { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #searchBar .search-query:focus, #searchBar #sidebar form .search-query:focus { border-color: #ccc; box-shadow: none; } #searchBar button { background: #3197d1; border-color: #3197d1; font-family: 'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif; text-shadow: none; -webkit-transition: background .15s; -moz-transition: background .15s; -o-transition: background .15s; transition: background .15s; } #searchBar button:hover { background-color: #1F81BA; } #serp-dd .result a:hover, #serp-dd .result > li.active { background: #f7f9fa; } #docsSearch { background: #f7f9fa; border-bottom: 0; } /* INTERIOR PAGES */ #content { background: none; } #content:after { background: #f7f9fa; height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: -1; content: ""; } .contentWrapper { border: 0; } #sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus, #sidebar .nav-list h3 { color: #2a4258; font-weight: 600; } #sidebar .nav-list .active a .icon-arrow:before, #sidebar .nav-list .active a:hover .icon-arrow:before, #sidebar .nav-list .active a:focus .icon-arrow:before { color: #2a4258; } #sidebar .nav-list a { color: #6d7983; } #categoryHead h1 { color: #343b41; margin-bottom: 15px; } h1 { letter-spacing: -0.5px; } .contentWrapper p.descrip { color: #6d7983; line-height: 26px; margin-bottom: 25px; } .contentWrapper h1, #fullArticle h1.title { line-height: 1.4em; } /* $ARTCILES */ #fullArticle dt { background: #3197d1; } #fullArticle h4 { font-weight: 400; } #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color: #6d767e; font-size: 15px; line-height: 26px; } #fullArticle strong { color: #4A4D4F; font-weight: 600; } #fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5 { color: #343b41; margin-bottom: 1em; } #fullArticle h2, #fullArticle h5 { font-weight: 600; } #fullArticle h4 { font-weight: 500; } #fullArticle h1, #fullArticle h3 { font-weight: 400; } #fullArticle h3 { font-size: 23px; } #fullArticle h1.title { margin-bottom: 1em; } #fullArticle pre, #fullArticle table { margin-bottom: 2.5em; } #fullArticle dt { font-size: 15px; min-width: 9px; position: relative; top: 6px; } #fullArticle table th { font-weight: 600; } #fullArticle img { margin: 0; } #fullArticle .index-list { margin-bottom: 2.5em; border-left: 5px solid #AAAEB7; } #fullArticle .index-list h4 { display: block; text-transform: uppercase; margin: 0; padding: 8px 26px 0; font-size: 1em; font-weight: 600; } #fullArticle .index-list ul { list-style: none; margin: 1em 25px 0em; float: left; } #fullArticle .index-list li { float: left; width: 305px; } #fullArticle .index-list:before, #fullArticle .index-list:after { display: table; content: ""; /* Fixes Opera/contenteditable bug: /* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 */ line-height: 0; } #fullArticle .index-list:after { clear: both; } #fullArticle .callout-yellow, #fullArticle .callout-blue, #fullArticle .callout-red, #fullArticle .callout-green, #fullArticle .callout { color: #6d767e; margin-bottom: 2.5em; } #fullArticle .callout-yellow { background: #fff7e4; border-color: #ffdf92; } #fullArticle .callout-blue { background: #ecf7ff; border-color: #80bfe2; } #fullArticle .callout-green { background: #e9fceb; border-color: #92d7a9; } .related { border: 0; border-top: 1px solid #eceef0; padding: 30px 46px 25px; } .articleFoot p { font-family: 'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif; font-style: normal; } .articleFoot p, #sbContact { color: #6d7983; } .icon-contact { color: #c3c8cb; } footer p, footer p a { color: #6d7983; } .articleList a { margin-left: 0; } .articleList li { padding-left: 0; } .articleList li a:hover span { color: #065e99; text-decoration: none; } #serp .articleList > li { padding-left: 0; } /* CONTACT FORMS */ #contactModal { border: 0; border-radius: 4px; border-top: 4px solid #3197D1; top: 8%; } #contactModal h2 { background: 0; border: 0; font-size: 28px; font-weight: 300; padding: 1em 0 0.25em; text-align: center; } #contactModal .modal-body { padding: 0 6em 0; min-height: 525px; } #contactModal .control-label { float: none; text-align: left; width: auto; } #contactModal .controls { margin: 0; } #contactModal #md-message { height: 80px; width: 400px; } #contactModal .form-actions { padding: 0; margin: 15px auto 20px; text-align: center; } #contactModal .icon-close:before { color: #c6c8ca; } #contactModal .controls input, #contactForm .controls input { box-shadow: none; height: 25px; width: 400px; } #contactForm .control-group, #contactModal .control-group { margin-bottom: 10px; } #contactModal .controls input:focus, #contactModal #md-message:focus, #contactForm .controls input:focus, #contactForm #message:focus { border-color: #cccccc; box-shadow: none; } #contactModal #md-message, #contactForm #message { box-shadow: none; } #contactModal .form-actions input, #contactForm .form-actions input { background: #3197d1; border: 0; color: #fff; font-size: 13px; padding: 10px 25px; text-shadow: none; text-transform: uppercase; } #contactForm:before { color: #343b41; content: "How can we help?"; font-size: 30px; font-weight: 400; display: block; line-height: 45px; margin-bottom: 1em; } /* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */ @media screen and (max-width: 1105px) { section.category-list .category { background: #fff; width: 44.5%; } } @media screen and (max-width: 760px) { section.category-list .category { box-sizing: border-box; margin: 0 0 20px; padding: 1.5em 1em; width: 100%; } } .one-half { width: 47%; float: left; } .twoCol .popArticles, .threeCol .popArticles, .most-pop-articles .popArticles { margin: 0; } .twoCol .popArticles a, .threeCol .popArticles a, .most-pop-articles .popArticles a { margin-left: 0; } .twoCol .popArticles a, .threeCol .popArticles a, .most-pop-articles .popArticles a { font-family: 'font-family: 'Roboto Condensed', sans-serif; } #fullArticle .callout-yellow { background: #fff7e4; border-color: #ffdf92; } #fullArticle .callout-blue { background: #ecf7ff; border-color: #80bfe2; } #fullArticle .callout-yellow, #fullArticle .callout-blue, #fullArticle .callout-red, #fullArticle .callout-green, #fullArticle .callout { color: #414141; /* #6d767e */ margin-bottom: 2.5em; } .cta-btn { text-align: center; padding: 30px; } .cta-btn a { padding: 15px; background: #32A8D9; border-radius: 3px; box-shadow: 0 2px 2px 0 rgba(0, 129, 255, 0.1),0 3px 1px -2px rgba(1, 175, 233, 0.2),0 1px 5px 0 rgba(0, 0, 0, 0.1); color: #FFF; text-transform: uppercase; text-decoration: none; } .cta-btn a:hover { box-shadow: 0 14px 26px -12px rgba(0, 129, 255, 0.1),0 4px 23px 0 rgba(1, 175, 233, 0.2),0 8px 10px -5px rgba(0, 0, 0, 0.1); } #docsSearch h1 { font-size: 38px; padding-top: 0; color: #fff; } @media (max-width:768px) { #docsSearch { height: 50vh; } #docsSearch h1 { padding-top: 50px; } } #searchBar button { background: #ff7f66; border: none; } #searchBar button:hover { background: #ff7f66; opacity: 0.8 !important; } #searchBar .result li a { color:#4267cf; font-size: 16px; } @media (max-width: 480px) { #searchBar button { background: none; } #contactForm input[name="upload"] { width: 95%; } } </style> <style> .ti-docs-belowarticle { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; margin: 20px 0 0; } .ti-docs-belowarticle h3 { grid-column: span 3; margin-bottom: 15px; } .ti-docs-belowarticle a { grid-column: span 1; } .ti-docs-belowarticle a h4 { line-height: 1.5em; font-size: 16px; font-weight: 400; } .ti-docs-sidebar a { line-height: 1.5em; font-size: 1.1em; font-weight: 400; display: block; margin-bottom: 15px; } @media (max-width: 480px) { .ti-docs-belowarticle a { grid-column: span 3; margin-bottom: 10px; } } </style> <style> /* redesign Feb 2019 */ @import url("https://use.typekit.net/jid4nml.css"); body { font-family: sofia-pro, sans-serif; background: #f6f7f9; } .navbar-inner { padding: 0; box-shadow: none; } .container-fluid { max-width: 1200px; } .navbar .nav { top: 3px; } .navbar .nav li a, .navbar .icon-private-w { color: #32466b; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .brand { padding: 11px 25px 11px 0 !important; } /*eded*/ #docsSearch { background: url(https://s10725.pcdn.co/wp-content/uploads/2019/02/bg.svg) #4267cf center center no-repeat; padding: 60px 0 200px; position: relative; margin-bottom: -150px; } #docsSearch:after { content: url(https://s10725.pcdn.co/wp-content/uploads/2019/02/border.svg); position: absolute; bottom: -5px; width: 100%; } #docsSearch h1 { max-width: 800px; margin: auto; color: #fff; font-size: 45px; font-weight: 700; line-height: 45px; letter-spacing: -1px; margin-bottom: 20px; } section.threeCol { column-count: 3; column-gap: 15px; } .threeCol .collection { border-radius: 0; box-shadow: 0 2px 80px 0 rgba(0,0,0,0.1); border: none; background-color: #fff; display: inline-block; margin: 0 0 15px; width: 100%; transform: translateX(0); -webkit-transform: translateX(0%); } .articleList li { margin: 0; } .collection a, .articleList li a, .articleList li a span { color: #6F6F6F; transition: .3s ease all; font-size: 18px; line-height: 40px; } .twoCol .popArticles a:hover span, .threeCol .popArticles a:hover span, .most-pop-articles .popArticles a:hover span { text-decoration: none; } .collection a:hover, .articleList li a:hover, .articleList li a:hover span { color: #ff7e65; } .ti-docs-sidebar { padding-right: 30px; } .ti-docs-sidebar a { font-size: 16px; display: block; margin-bottom: 20px; line-height: 26px; font-weight: 400; color: #6F6F6F; } .ti-docs-sidebar a:hover { color: #ff7e65; text-decoration: none; } .twoCol h2, .threeCol h2, .twoCol h2 a, .threeCol h2 a { color: #4065C9; font-weight: 700; text-align: left; font-size: 25px; line-height: 25px; letter-spacing: normal; border-bottom: none; } .twoCol h2 a:hover, .threeCol h2 a:hover, .twoCol h2 a:focus, .threeCol h2 a:focus { color: #ff7e65; border-bottom: none; } .twoCol h2 a, .threeCol h2 a { margin-bottom: 5px; } .twoCol p, .threeCol p { font-weight: 300; color: #B2B2B2; font-size: 16px; line-height: 25px; text-align: left; } .threeCol .collection .collection-head { padding: 35px 35px 0; border-bottom: none; margin-bottom: 0; } .threeCol .collection .collection-head:after { content: ''; border-bottom: 2px solid #F4F4F4; width: 100%; display: block; margin: 30px auto; } #collection-96 .popArticles li:last-child, #collection-96 .popArticles li:nth-last-child(2) { display: none; } .threeCol .collection .collection-body { padding: 0 35px 35px; } #searchBar { width: 40%; } #searchBar .search-query { font-family: sofia-pro; border-radius: 0; font-size: 16px; line-height: 26px; } #searchBar button { font-family: sofia-pro; font-size: 14px; line-height: 14px; text-transform: uppercase; background: #ff7e65; border-radius: 0; text-shadow: none; font-weight: 400; padding: 18px 80px 20px; } .twoCol .browse, .threeCol .browse { color: #FF7F66; font-size: 14px; line-height: 14px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; text-align: left; display: block; font-weight: 700; margin-top: 40px; } #ti_blog_articles .popArticles a { display: block; } /*interior pages*/ #main-content { background: none; box-shadow: 0 2px 80px 0 rgba(0,0,0,0.1); padding: 0; margin-top: 60px; } .contentWrapper { padding: 60px; } .contentWrapper h1 { color: #4268CF !important; font-size: 40px; line-height: 40px; letter-spacing: 0; font-weight: 700; margin-bottom: 40px !important; } #sidebar { margin: 60px 0 0; } #sidebar h3 { font-size: 25px; line-height: 25px; letter-spacing: normal; color: #395BD2; text-transform: none; margin: 60px 0 20px; } #sidebar .nav-list a { font-size: 16px; font-weight: 400; color: #6F6F6F; padding: 6px 15px 10px 0; } #sidebar .nav-list a:hover, #sidebar .nav-list a:focus { color: #ff7f66; } #sidebar .nav-list .active a { font-weight: 700 !important; color: #6F6F6F !important; } #fullArticle .printArticle { top: 20px; } #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color: #393939; line-height: 30px; font-size: 16px; font-weight: 400; } #fullArticle dd { margin-left: 35px; } #fullArticle table td em { color: #B2B2B2; line-height: 20px !important; } #fullArticle h1 { font-weight: 700; max-width: 90%; } #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5 { color: #393939; } #fullArticle h2, #fullArticle h3, #fullArticle h4 { font-weight: 700; } #fullArticle h2 { font-size: 28px; letter-spacing: 0; } #fullArticle h3 { font-size: 25px; letter-spacing: -1px; } #fullArticle h4 { font-size: 23px; letter-spacing: -0.92px; } #fullArticle a, #fullArticle a span { font-weight: 600 !important; } /*scroll to top btn*/ #fullArticle { position: relative; } #scrollTop svg { width: 20px; height: 20px; padding: 12px; fill: white; display: block; } #scrollTop { display: inline-block; background-color: #4267cf; text-align: center; border-radius: 100%; position: fixed; bottom: 47px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; right: 110px; } #scrollTop:hover { cursor: pointer; background-color: #ff7f66; } #scrollTop:active { background-color: #ff7f66; } #scrollTop.show { opacity: 1; visibility: visible; } .related { padding-top: 0; } .related ul>li a { display: inline-block; } .related a span { font-size: 16px; display: inline-block; margin-bottom: 20px; line-height: 26px; font-weight: 400; color: #6F6F6F; margin-bottom: 0; } .related a:hover span { text-decoration: none !important; color: #ff7f66; } .related h3 { font-size: 25px; line-height: 25px; letter-spacing: normal; color: #395BD2; text-transform: none; margin: 30px 0 10px; } .ti-docs-belowarticle { margin: 0; } .ti-docs-belowarticle a { margin-top: 20px; } .ti-docs-belowarticle a span { display: block; margin-top: 10px; } .ti-docs-belowarticle a:hover { text-decoration: none !important; } /*end*/ footer { margin: 50px auto; } footer p { color: #B2B2B2; font-size: 14px; line-height: 25px; text-align: center; } /*responsive*/ @media (max-width: 1366px) { #searchBar { width: 70%; } } @media (max-width: 1220px) { .navbar-inner { padding: 0 20px; } } @media (max-width: 1024px) { section.threeCol { column-count: 2; } } @media (max-width: 768px) { .navbar .btn-navbar { margin-top: 20PX; } .navbar .btn-navbar .icon-bar { background: #4268CF; } .navbar .btn-navbar:hover .icon-bar { background: #ff7f66; } #main-content { margin-top: 0; box-shadow: none; } .contentWrapper { padding: 20px; } section.threeCol { column-count: 1; } #docsSearch { height: auto; } #docsSearch h1 { padding-top: 0; } .threeCol .collection { padding: 0; } .twoCol .collection:first-child, .threeCol .collection:first-child { padding-top: 35px; } #searchBar button { padding: 18px 40px 20px; } #searchBar { width: 90%; } } @media (max-width: 767px) { #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { font-size: 16px; } #fullArticle h1.title { font-size: 30px; } #fullArticle .printArticle { top: 10px; } #docsSearch h1, .contentWrapper h1 { font-size: 30px; line-height: 40px; } } @media (max-width: 600px) { .contentWrapper h1 { word-wrap: break-word; } .one-half { width: 100%; } .one-half img { margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 370px) { #scrollTop { right: 80px; } } @media (max-height:740px) { #scrollTop { right: 80px; bottom: 20px; } } /* RESPONSIVE */ @media (max-width: 768px) { .navbar .btn-navbar { margin-top: 25px; right: -10px; } .related { padding: 30px 25px 25px; } .related ul { margin-left: 0; } .related h3 { padding-left: 0; } .related ul > li a { margin-left: 0; } .twoCol .collection:first-child .collection-head, .threeCol .collection:first-child .collection-head { padding-top: 0px; } } @media (max-width: 920px) { .navbar .nav li a { padding: 14px 5px; } .navbar .nav li a, .navbar .icon-private-w { font-size: 12px; } } .icon-search:before { color: #fff; } /*end*/ /* end */ </style> <style> .floatingTable { position: fixed!important; left: 9%!important; top: 20px!important; width: 23%!important; background-color: #fff!important; box-shadow: 0 2px 80px 0 rgb(0 0 0 / 10%)!important; max-width: 240px; } .floatingTable td { border: none!important; } .floatingTable td { display: block; } #multi-pages-generator{ display:none; } </style> <script> document.addEventListener('DOMContentLoaded', function () { // Scroll to Top Button const fullArticle = document.getElementById('fullArticle'); if(fullArticle) { fullArticle.insertAdjacentHTML('beforeend', '<a id="scrollTop"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"></rect><g><path d="M15 14l-5-5-5 5-2-1 7-7 7 7z"></path></g></svg></a>'); const scrollTopBtn = document.getElementById('scrollTop'); window.addEventListener('scroll', () => { if (window.scrollY > 300) { scrollTopBtn.classList.add('show'); } else { scrollTopBtn.classList.remove('show'); } }); scrollTopBtn.addEventListener('click', (e) => { e.preventDefault(); window.scrollTo({top: 0, behavior: 'smooth'}); }); } // Append to Sidebar const sidebar = document.getElementById('sidebar'); sidebar && sidebar.insertAdjacentHTML('beforeend', '<div class="ti-docs-sidebar"><h3>Popular Blog Articles</h3></div>'); const tiDocsSidebar = document.querySelector('.ti-docs-sidebar'); // Fetch Articles [ 'https://themeisle.com/blog/wp-json/wp/v2/posts?tags=4064&per_page=3&orderby=modified', 'https://www.codeinwp.com/wp-json/wp/v2/posts?tags=1653&per_page=3' ].forEach(url => { fetch(url) .then(response => response.json()) .then(data => { data.forEach(item => { const article = `<a href="${item.link}" target="_blank">${item.title.rendered}</a>`; tiDocsSidebar && tiDocsSidebar.insertAdjacentHTML('beforeend', article); }); }) .catch(error => console.error('Error:', error)); }); // Fetch and Display Latest Blog Articles Below Each Doc Article fetch('https://themeisle.com/blog/wp-json/wp/v2/posts?per_page=3&_embed') .then(response => response.json()) .then(data => { let renderBelowArticle = '<div class="ti-docs-belowarticle"><h3>Latest Blog Articles</h3>'; data.forEach(item => { const title = item.title.rendered; const link = item.link; const mediaURL = item._embedded['wp:featuredmedia'][0].media_details.sizes.authorloop.source_url; renderBelowArticle += mediaURL ? `<a href="${link}" target="_blank"><img src="${mediaURL}" alt="${title}"><span>${title}</span></a>` : `<a href="${link}" target="_blank"><span>${title}</span></a>`; }); renderBelowArticle += '</div>'; const relatedSection = document.querySelector('section.related'); relatedSection && relatedSection.insertAdjacentHTML('beforeend', renderBelowArticle); }) .catch(error => console.error('Error:', error)); // Fetch and Display Posts on the Homepage fetch('https://themeisle.com/blog/wp-json/wp/v2/posts?per_page=5') .then(response => response.json()) .then(data => { let renderBlogArticles = ` <section id="ti_blog_articles" class="collection"> <div class="collection-head"> <h2><a href="https://themeisle.com/blog/" target="_blank">Latest Blog Posts</a></h2> <p>Stay updated with blog posts</p> </div> <div class="collection-body"> <ul class="popArticles">`; data.forEach(item => { const title = item.title.rendered; const link = item.link; renderBlogArticles += `<li><a href="${link}">${title}</a></li>`; }); renderBlogArticles += ` </ul> <a class="browse" href="https://themeisle.com/blog/" target="_blank">Go to Blog</a> </div> </section>`; const threeColSection = document.querySelector('section.threeCol'); threeColSection && threeColSection.insertAdjacentHTML('beforeend', renderBlogArticles); }) .catch(error => console.error('Error:', error)); }); </script> <style> #docsSearch { padding: 50px 0 210px; } #docsSearch h1 { display:none; } .popArticles, .collection-body { display: none; } .browse { display: none !important; } .twoCol .collection, .threeCol .collection { min-height: unset; } .threeCol .collection .collection-head { position: absolute; margin-top: 65px; padding: 0; width: 100%; } .threeCol .collection .collection-head:after { border-bottom:none; margin-bottom:20px; } .threeCol p, .threeCol h2, threeCol h2 a { text-align: center; } .twoCol h2, .threeCol h2, .twoCol h2 a, .threeCol h2 a { font-weight: 500; text-align: center; } .threeCol.row-fluid .collection, section.collection { background-repeat: no-repeat; background-position: center top 40px; background-size: 80px; padding-top: 60px; min-height: 160px; border-radius: 10px; } .nav #visualizer-charts-and-graphs, .nav #otter---page-builder-blocks-extensions, .nav #neve, .nav #feedzy-rss-feeds, .nav #orbit-fox, .nav #internal-workarounds, .nav #hestia, .nav #multiple-pages-generator, .nav #bundled-products, .nav #sparks, .nav #themes-plugins, .nav #old-wordpress, .nav #multi-pages-generator, .nav #wordpress, .nav #product-option-manager, .nav #raft, .nav #wp-full-pay, .nav #fse-themes, #redirection-for-contact-form-7 { display: none; } section#collection-2079 { background-image: url(https://themeisle.com/wp-content/uploads/2024/11/wp_full_pay.svg); background-size: 200px; } section#collection-1751 { background-image: url(https://themeisle.com/wp-content/uploads/2022/12/Raft-logo.svg); } section#collection-1557 { background-image: url(https://s30246.pcdn.co/wp-content/uploads/2019/05/themeisle-header-neve-logo.png); } section#collection-1566 { background-image: url(https://ps.w.org/themeisle-companion/assets/icon-128x128.png); } section#collection-1560 { background-image: url(https://s30246.pcdn.co/wp-content/uploads/2019/03/visualizer-logo.svg); } section#collection-1569 { background-image: url(https://s30246.pcdn.co/wp-content/uploads/2019/03/feedzy-logo.svg); } section#collection-1563 { background-image: url(https://ps.w.org/otter-blocks/assets/icon-256x256.png); } section#collection-1546 { background-image: url(https://s30246.pcdn.co/wp-content/uploads/2019/05/themeisle-header-hestia-logo.png); } section#collection-1572 { background-image: url(https://ps.w.org/multiple-pages-generator-by-porthas/assets/icon-256x256.png); } section#collection-1578 { background-image: url(https://pbs.twimg.com/profile_images/1128920402128977920/5Fpfewf7_400x400.png); } section#collection-1775 { background-image: url(https://themeisle.com/wp-content/uploads/2023/01/FSE-themes.png); background-size: 160px; } section#collection-1575 { background-image: url(https://themeisle.com/wp-content/uploads/2022/07/WordPress-logo-1.png); } section#collection-959 { background-image: url(https://themeisle.com/wp-content/uploads/2023/03/bill.png); } section#ti_blog_articles { background-image: url(https://themeisle.com/wp-content/uploads/2022/07/blog_posts.png); } section#collection-2014 { background-image: url(https://s3.amazonaws.com/helpscout.net/docs/assets/55192029e4b0221aadf23f55/images/6660d2125940934e140f4614/file-2YVRxoqeqp.png) } section#collection-92 { background-image: url(https://themeisle.com/wp-content/uploads/2022/07/faq.png); } section#collection-1626 { background-image: url(https://themeisle.com/wp-content/uploads/2022/07/sparks-logo-transparent.svg); background-size: 100px; } section#collection-1695 { background-image: url(https://themeisle.com/wp-content/uploads/2022/08/ppom-logo.jpeg); } #sidebar .nav-list li { list-style: square; margin-left: 15px; color: #395BD2; } #sidebar .nav-list a { font-size: 17px; font-weight: 700; } @media only screen and (min-width: 1025px) { section.threeCol { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 15px; } .threeCol.row-fluid:before, threeCol.row-fluid:after { display: none; content: ""; line-height: 0; } #contentArea.container-fluid:before, #contentArea.container-fluid:after { display: none; content: ""; line-height: 0; } } </style> <script> function setFloatingTable(tableHeight) { let screenWidth = window.innerWidth; let sidebar = document.getElementById('sidebar'); let sidebarHeight = sidebar ? sidebar.offsetHeight : 0; let fullArticle = document.getElementById('fullArticle'); if (fullArticle) { let menuTable = document.querySelector('.table-bordered.menu-table'); function onScroll() { let value = document.documentElement.scrollTop || document.body.scrollTop; if (value >= sidebarHeight) { menuTable.classList.add('floatingTable'); fullArticle.style.paddingTop = tableHeight + 'px'; } else { menuTable.classList.remove('floatingTable'); fullArticle.style.paddingTop = '0'; } } if (menuTable) { if (screenWidth > 1200) { window.addEventListener('scroll', onScroll); } else { menuTable.classList.remove('floatingTable'); } } } } document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { let menuTable = document.querySelector('.table-bordered.menu-table'); let tableHeight = menuTable ? menuTable.offsetHeight : 0; setFloatingTable(tableHeight); }, 200); }); window.addEventListener('resize', function() { let menuTable = document.querySelector('.table-bordered.menu-table'); let tableHeight = menuTable ? menuTable.offsetHeight : 0; setFloatingTable(tableHeight); }); </script> </head> <body> <header id="mainNav" class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="https://themeisle.com/"> <img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/55192029e4b0221aadf23f55/images/5cdd067c2c7d3a6d82bd86c4/logo.png" alt="Themeisle Docs" width="229" height="75"> </a> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse collapse"> <nav role="navigation"> <ul class="nav"> <li id="home"><a href="/">Home <b class="caret"></b></a></li> <li id="wordpress"><a href="/collection/1575-wordpress">WordPress <b class="caret"></b></a></li> <li id="wp-full-pay"><a href="/collection/2079-wp-full-pay">WP Full Pay <b class="caret"></b></a></li> <li id="fse-themes"><a href="/collection/1775-fse-themes">FSE Themes <b class="caret"></b></a></li> <li id="neve"><a href="/collection/1557-neve">Neve <b class="caret"></b></a></li> <li id="hestia"><a href="/collection/1546-hestia">Hestia <b class="caret"></b></a></li> <li id="feedzy-rss-feeds"><a href="/collection/1569-feedzy-rss-feeds">Feedzy RSS Feeds <b class="caret"></b></a></li> <li class="active" id="visualizer-charts-and-graphs"><a href="/collection/1560-visualizer-charts-and-graphs">Visualizer: Charts and Graphs <b class="caret"></b></a></li> <li id="multiple-pages-generator"><a href="/collection/1572-multiple-pages-generator">Multiple Pages Generator <b class="caret"></b></a></li> <li id="otter---page-builder-blocks-extensions"><a href="/collection/1563-otter---page-builder-blocks-extensions">Otter - Page Builder Blocks & Extensions <b class="caret"></b></a></li> <li id="product-option-manager"><a href="/collection/1695-product-option-manager">Product Option Manager <b class="caret"></b></a></li> <li id="sparks"><a href="/collection/1626-sparks">Sparks <b class="caret"></b></a></li> <li id="orbit-fox"><a href="/collection/1566-orbit-fox">Orbit Fox <b class="caret"></b></a></li> <li id="redirection-for-contact-form-7"><a href="/collection/2014-redirection-for-contact-form-7">Redirection for Contact Form 7 <b class="caret"></b></a></li> <li id="faqs"><a href="/collection/92-faqs">FAQs <b class="caret"></b></a></li> <li id="billing"><a href="/collection/959-billing">Billing <b class="caret"></b></a></li> <li id="bundled-products"><a href="/collection/1578-bundled-products">Bundled Products <b class="caret"></b></a></li> <li id="themes-plugins"><a href="/collection/96-themes-plugins">Themes & Plugins <b class="caret"></b></a></li> <li id="contact"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> <li id="contactMobile"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> </ul> </nav> </div> </div> </div> </header> <section id="contentArea" class="container-fluid"> <div class="row-fluid"> <section id="main-content" class="span9"> <div class="contentWrapper"> <article id="fullArticle"> <h1 class="title">Visualizer: How to populate chart series and data dynamically</h1> <a href="javascript:window.print()" class="printArticle" title="Print this article" aria-label="Print this Article"><i class="icon-print"></i></a> <p> From version 1.1.0 Visualizer plugin allows users to write their own hooks for chart series and data filters. The global filter is applied for each chart, each time when a chart is prepared to be rendered. If you want to create a hook for the global filter, you should use <strong style="background-color: initial;">visualizer-get-chart-series</strong> and <strong style="background-color: initial;">visualizer-get-chart-data</strong> filters for series and data accordingly. Each hook, for these filters, receives three arguments: data or series array, chart ID, and chart type variable.</p> <h3>Series global filter</h3> <p> To create a hook for the global series filter you need to write the following function:</p> <pre>add_filter( 'visualizer-get-chart-series', 'myplugin_filter_charts_series', 10, 3 ); function myplugin_filter_charts_series( $series, $chart_id, $type ) { // do your stuff here return $series; } </pre> <p> The $series array contains the actual series of the chart and has the following structure:</p> <pre>$series = array( // the first series array( 'label' => 'The name', // the label of the series 'type' => 'string', // the type of the series ), // the second series array( ... ), // and so on... ); </pre> <h3>Data global filter</h3> <p> To create a hook for global data filter you need to write the following function:</p> <pre> add_filter( 'visualizer-get-chart-data', 'myplugin_filter_charts_data', 10, 3 ); function myplugin_filter_charts_data( $data, $chart_id, $type ) { // do your stuff here return $data; } </pre> <p> The $data array contains actual data of the chart and has the following structure:</p> <pre>$data = array( // the first row of data array( 'Something', // the value of the first series 165, // the value of the second series 32, // the value of the third series ), // the second row of data array( ... ), // and so on... ); </pre> <h3>Settings global filter</h3> <p> To create a hook for the global settings filter you need to write the following function:</p> <pre> add_filter( 'visualizer-get-chart-settings', 'myplugin_filter_charts_data', 10, 3 ); function myplugin_filter_charts_data( $data, $chart_id, $type ) { // do your stuff here return $data; } </pre> <p> </p> </article> <div class="articleRatings" data-article-url="https://docs.themeisle.com/article/605-how-can-i-populate-chart-series-and-data-dynamically"> <span class="articleRatings-question">Did this answer your question?</span> <span class="articleRatings-feedback"> <span class="articleRatings-feedback-tick"> <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"> <path d="m8 14a.997.997 0 0 1 -.707-.293l-2-2a.999.999 0 1 1 1.414-1.414l1.293 1.293 4.293-4.293a.999.999 0 1 1 1.414 1.414l-5 5a.997.997 0 0 1 -.707.293" fill="#2CC683" fill-rule="evenodd"/> </svg> </span> <span class="articleRatings-feedback-message">Thanks for the feedback</span> </span> <span class="articleRatings-failure">There was a problem submitting your feedback. Please try again later.</span> <div class="articleRatings-actions"> <button class="rateAction rateAction--positive" data-rating="positive"> <span class="sr-only">Yes</span> <span class="rating-face"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <path fill-rule="evenodd" d="M5.538 14.026A19.392 19.392 0 0 1 12 12.923c2.26 0 4.432.388 6.462 1.103-1.087 2.61-3.571 4.436-6.462 4.436-2.891 0-5.375-1.825-6.462-4.436zm1.847-3.872a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692zm9.23 0a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692z"/> </svg> </span> </button> <button class="rateAction rateAction--negative" data-rating="negative"> <span class="sr-only">No</span> <span class="rating-face"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <path fill-rule="evenodd" d="M7.385 13.846a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692zm9.23 0a1.846 1.846 0 1 1 0-3.692 1.846 1.846 0 0 1 0 3.692zm-.967 4.95a.992.992 0 0 1-.615-.212c-1.701-1.349-4.364-1.349-6.065 0a.998.998 0 0 1-1.36-.123.895.895 0 0 1 .127-1.3A6.897 6.897 0 0 1 12 15.692c1.555 0 3.069.521 4.266 1.467.41.326.467.909.127 1.3a.982.982 0 0 1-.745.335z"/> </svg> </span> </button> </div> </div> <section class="articleFoot"> <i class="icon-contact"></i> <p class="help">Still need help? <a id="sbContact" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> <a id="sbContactMobile" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> </p> <time class="lu" datetime=2022-11-29 >Last updated on November 29, 2022</time> </section> </div> </section> <aside id="sidebar" class="span3"> <form action="/search" method="GET" id="searchBar" class="sm" autocomplete="off"> <input type="hidden" name="collectionId" value="62866f658bf21a2e2b6d5c4b"/> <input type="text" name="query" title="search-query" class="search-query" placeholder="Search" value="" aria-label="Search" /> <button type="submit"> <span class="sr-only">Toggle Search</span> <i class="icon-search"></i> </button> <div id="serp-dd" style="display: none;" class="sb"> <ul class="result"> </ul> </div> </form> <h3>Categories</h3> <ul class="nav nav-list"> <li ><a href="/category/1636-installation-basic-setup">Visualizer Installation & Setup <i class="icon-arrow"></i></a></li> <li ><a href="/category/1583-faq">Visualizer Chart Settings <i class="icon-arrow"></i></a></li> <li ><a href="/category/1634-data-sources-for-creating-charts">Visualizer Data Sources <i class="icon-arrow"></i></a></li> <li class="active" ><a href="/category/1635-manual-configuration">Visualizer Manual Configuration <i class="icon-arrow"></i></a></li> <li ><a href="/category/1667-charts-actions">Visualizer Charts Actions <i class="icon-arrow"></i></a></li> <li ><a href="/category/1638-common-errors">Common Errors <i class="icon-arrow"></i></a></li> <li ><a href="/category/1637-custom-codes">Custom Codes <i class="icon-arrow"></i></a></li> </ul> </aside> </div> <div id="noResults" style="display:none;">No results found</div> <footer> <p>© <a href="https://themeisle.com/">Vertigo Studio SA</a> 2024. <span>Powered by <a rel="nofollow noopener noreferrer" href="https://www.helpscout.com/docs-refer/?co=Vertigo+Studio+SA&utm_source=docs&utm_medium=footerlink&utm_campaign=Docs+Branding" target="_blank">Help Scout</a></span> </p> </footer> </section> <script id="beaconLoader" type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script> <script type="text/javascript">window.Beacon('init', 'a69940e8-43f6-4f74-a45b-7a08674d42b4')</script> <script type="text/javascript"> function hashChanged() { var hash = window.location.hash.substring(1); if (hash === 'contact') { window.Beacon('open') } } if (window.location.hash) { hashChanged() } window.onhashchange = function () { hashChanged() } window.addEventListener('hashchange', hashChanged, false); </script> <script src="//d3eto7onm69fcz.cloudfront.net/assets/javascripts/app3.min.js"></script> <script> // keep iOS links from opening safari if(("standalone" in window.navigator) && window.navigator.standalone){ // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)){ event.preventDefault(); document.location.href = noddy.href; } },false); } </script> </body> </html>

CINXE.COM

Visualizer: How to populate chart series and data dynamically - Themeisle Docs