Add a chart to website

Get Help
#1

please help me How to add all kinds of charts to my website
example:
bar chart or circle chart

#2

I am sure there are plenty of packages out there which can help you to build charts.

A simple search (query: css charts) with google gives plenty of results, from pre-made easy to use packages to entire tutorials on how to build your own charts

#3

I know how to create a chart but I do not know how to add it to my website

#4

Then you really need to provide more information. Do you use word-press? Wix? do you have a custom website? All that information and anything else you can think of that might be useful should be included. This way, we can help you much better.

#5

I want to build a website for Self-assessment and I write my codes in Atom Then I open it in Firefox

#6

What is then the problem? That means you build from scratch, so you can include whatever you need

#7

My problem is that when I add my chart code to my website code in Atom, the chart does not run in Firefax

#8 
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EWBroadcast</title>
    <link href="./resources/css/azade.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div id="bar">Analysis and training of financial markets by experienced professors</div>

    <header>
      <form action="/action_page.php" id="form">
        <label for="name"> search:</label>
        <input type="search" id="name" name="name" placeholder="search Name of symbol or company">
        <br>
        <input type="button" value="log in">
        <input type="button" value="Membership">
      </form>
        <nav id="nav" class="item">
            <ul>
                <li><a href="">Market maps</a></li>
                <li><a href="">Indicators</a></li>
                <li><a href="">Filter</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Clients</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">Education</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="banner">
            <div id="banner1" class='ban'>
             <a href="#" class='button' id="start" >Start</a>
            </div>
            <div id="banner2" class='ban'>
            <a href="#" class='button' id="run" >Run</a>
            </div>
        </div>
    </main>
    <svg width="600" height="500"></svg>
    <script>
      var svg= d3.select("svg"),
      margin = 100,
      width = svg.attr("width") - margin,
      height = svg.attr("height") - margin;
      var xscale= d3.scaleBand().range([0 ,width]).padding(1.0),
      yscale= d3.scaleLinear().range([height,0]);
      var g = svg.append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")");
      d3.csv("/data/xyz.csv", function(data) {
        for (var i = 0; i < data.length; i++) {
            console.log(data[i].year);
            console.log(data[i].value);
        }
        xScale.domain(data.map(function(d) { return d.year; }));
        yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
    });
    g.append("g")
       .attr("transform", "translate(0," + height + ")")
       .call(d3.axisBottom(xScale));

      g.append("g")
       .call(d3.axisLeft(yScale).tickFormat(function(d){
           return "$" + d;
       }).ticks(10))
       .append("text")
       .attr("y", 6)
       .attr("dy", "0.71em")
       .attr("text-anchor", "end")
       .text("value");
    });
    </script>
    <footer>
        <div class="left">
            <h3>EWbroadcast</h3>
            <p>Address: Ma'ali Abad, Alley 9, Unique Building, Unit 30</p>
        </div>
        <div class="right">
        <div>
            <h2>Contacts</h2>
        <div class="phone">
            <i class="fa fa-phone"></i>
            <a href="tel:09362952770">09362952770</a>
        </div>
        <div class="email">
            <i class="fa fa-envelope"></i>
            <a href="email:azadesohrabi9170@gmail">azi.sohrabi70@gmail.com</a>
        </div>
        <div class="instagram">
            <i class="fa fa-instagram"></i>
            <a href="instagram:azadesohrabi">@azadesohrabi</a>
        </div>
        <div class="telegram">
            <i class="fa fa-telegram"></i>
            <a href="https://t.me/EWbroadcast">@EWbroadcast</a>
        </div>
        </div>
        </div>
    </footer>
</body>
</html>
#9

In firefox, open your console (f12 or right click -> inspect element -> console tab)

the console gives you your JavaScript errors, you have a JavaScript (syntax) error.

#10

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.