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

Hi,
This 3rd party code is out of the scope of this forum, so you probably won’t get an answer unless one of your post readers has used this particular solution (and especially that you didn’t ask any specific question).

However, there’s an example with Chart.js in case you wish to try it: