please help me How to add all kinds of charts to my website
example:
bar chart or circle chart
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
I know how to create a chart but I do not know how to add it to my website
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.
I want to build a website for Self-assessment and I write my codes in Atom Then I open it in Firefox
What is then the problem? That means you build from scratch, so you can include whatever you need
My problem is that when I add my chart code to my website code in Atom, the chart does not run in Firefax
<!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>
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.
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.