# Adding graphs and charts to my website pages


**URL:** <https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [December 12, 2021, 7:40pm UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733 "2021-12-12T19:40:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kariem-ryad](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/kariem-ryad/32/27480_2.png) [@kariem-ryad](https://forum.wixstudio.com/u/kariem-ryad)\
**Post date:** [December 12, 2021, 7:40pm UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/1 "2021-12-12T19:40:44Z")

</div>

hi, all am building my startup website and I want your continued support to go live fiirst i want to add graphs and charts to my website pages based on my dataset numbers and numbers.  
I want to use [anycharts.com](http://anycharts.com/) products first if you can help me to add a sunburst chart here are link for it [https://www.anychart.com/products/anychart/gallery/Sunburst\_Charts/The\_Population\_of\_the\_Europe.php](https://www.anychart.com/products/anychart/gallery/Sunburst_Charts/The_Population_of_the_Europe.php)

here are the source code

```javascript
                     <html><head><script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-sunburst.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script><link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet"><link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet"><style type="text/css">html,
    body,
    #container {width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><div id="container"></div><script>

    anychart.onDocumentReady(function () {// The data used in this sample can be obtained from the CDN// https://cdn.anychart.com/samples/sunburst-charts/the-population-of-the-europe/data.json
      anychart.data.loadJsonFile('https://cdn.anychart.com/samples/sunburst-charts/the-population-of-the-europe/data.json',function (data) {// makes tree from the data for the samplevar dataTree = anychart.data.tree(data, 'as-table');// create sunburst chartvar chart = anychart.sunburst(dataTree);// set calculation mode
          chart.calculationMode('parent-independent');// set chart title
          chart.title('Europe Population');// set custom palette
          chart.palette(['#0288d1', '#d4e157', '#ff6e40', '#f8bbd0']);// format chart labels
          chart
            .labels().format('{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}');// format chart tooltip
          chart
            .tooltip().format('Population: {%Value}{scale:(1000000)(1)|( mln)}');// the fill specified in the data has priority// set point fill
          chart.fill(function () {return anychart.color.darken(this.parentColor, 0.15);});// set container id for the chart
          chart.container('container');// initiate chart drawing
          chart.draw();});});</script></body></html>

```

---

<div class="post-metadata">

**Author:** ![chris-derrell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/chris-derrell/32/1774_2.png) [@chris-derrell](https://forum.wixstudio.com/u/chris-derrell)\
**Post date:** [December 13, 2021, 12:19am UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/2 "2021-12-13T00:19:24Z")

</div>

How far have you gotten with the above code? Have you added it to an HTML Embed (iFrame) component as yet, and if you have, what’s next?

---

<div class="post-metadata">

**Author:** ![kariem-ryad](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/kariem-ryad/32/27480_2.png) [@kariem-ryad](https://forum.wixstudio.com/u/kariem-ryad)\
**Post date:** [December 13, 2021, 2:24am UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/3 "2021-12-13T02:24:58Z")

</div>

yes I tried and didn’t work also I want to connect to dataset

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [December 13, 2021, 5:45am UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/4 "2021-12-13T05:45:04Z")

</div>

Please observe the [community guidelines](https://www.wix.com/corvid/forum/community-discussion/forum-policies-and-guidelines) and refrain from multiple posts on the same topic or question.

---

<div class="post-metadata">

**Author:** ![kariem-ryad](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/kariem-ryad/32/27480_2.png) [@kariem-ryad](https://forum.wixstudio.com/u/kariem-ryad)\
**Post date:** [December 13, 2021, 7:24am UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/5 "2021-12-13T07:24:29Z")

</div>

oh ok I got it, am just new here and enthusiastic about my project :),  
if you can guide me that will be great

thanks for the community guides

Best Regards,

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [December 13, 2021, 7:47am UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/6 "2021-12-13T07:47:40Z")

</div>

@kariem-ryad  
Create a HTML-Component (iFrame) on your page.  
Copy & Paste the following code into the new created HTML-Component…

```javascript
<html><head><script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-sunburst.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script><script src="https://cdn.anychart.com/releases/v8/themes/light_earth.min.js"></script><link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet"><link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet"><style type="text/css">html, body, #container {width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><div id="container"></div><script> anychart.onDocumentReady(function () {// set chart theme anychart.theme('lightEarth');// The data used in this sample can be obtained from the CDN// https://cdn.anychart.com/samples/sunburst-charts/the-population-of-the-europe/data.json anychart.data.loadJsonFile('https://cdn.anychart.com/samples/sunburst-charts/the-population-of-the-europe/data.json',function (data) {// makes tree from the data for the samplevar dataTree = anychart.data.tree(data, 'as-table');// create sunburst chartvar chart = anychart.sunburst(dataTree);// set calculation mode chart.calculationMode('parent-independent');// set chart title chart.title('Europe Population');// set custom palette chart.palette(['#0288d1', '#d4e157', '#ff6e40', '#f8bbd0']);// format chart labels chart .labels().format('{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}');// format chart tooltip chart .tooltip().format('Population: {%Value}{scale:(1000000)(1)|( mln)}');// the fill specified in the data has priority// set point fill chart.fill(function () {return anychart.color.darken(this.parentColor, 0.15);});// set container id for the chart chart.container('container');// initiate chart drawing chart.draw();});});</script></body></html>

```

Take a look onto the following API:

> **[postMessage - Velo API Reference - Wix.com](https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage)**
>
> Sends a message to the HTML Component. The postMessage() function sends a message from your page code to the HTML Component. To receive the message sent from ...

Try to combine/connect the two CODES together.

---

<div class="post-metadata">

**Author:** ![kariem-ryad](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/kariem-ryad/32/27480_2.png) [@kariem-ryad](https://forum.wixstudio.com/u/kariem-ryad)\
**Post date:** [December 13, 2021, 8:59am UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/7 "2021-12-13T08:59:36Z")

</div>

@russian-dima hi thanks for your continues support actually the first html code worked but as among expert at coding if you can just guide me on how to connect the charts with my data at the data sets will be great

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [December 13, 2021, 9:05am UTC](https://forum.wixstudio.com/t/adding-graphs-and-charts-to-my-website-pages/1733/8 "2021-12-13T09:05:19Z")

</div>

@kariem-ryad  
First you will have to create a data transfer-function between HTML-Component and your page.

How to do that, you will find here…

> **[Not receiving data from postMessage in embedded iframe | Velo by Wix](https://community.wix.com/velo/forum/coding-with-velo/not-receiving-data-from-postmessage-in-embedded-iframe)**
>
> I am trying to use the postMessage API to receive and send data to an embedded iframe in my wix site. The desired end result is being able to pass utm params from wixLocation to the iframe. I am receiving data on other sites using this iframe so the...

Once you have stabilyzed communication between iFrame and page, you can pass DATA → **forth (to html)** ← and → **back (from html)** ←
