Adding graphs and charts to my website pages

Ask the community
,
1

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 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

here are the source code

                     <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>
2

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?

3

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

4

Please observe the community guidelines and refrain from multiple posts on the same topic or question.

5

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,

6

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

<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:

Try to combine/connect the two CODES together.

7

@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

8

@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…

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