I'm novice in D3.js. I'm trying to build area chart within dimple.js lib, here is my code:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script src="https://d3js.org/d3-time.v2.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.csv("Video_Game_Sales.csv", function (data) {
data = dimple.filterData(data, "Company", ["Microsoft", "Nintendo", "Sony"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 30, 340, 330);
var x = myChart.addCategoryAxis("x", ["Company","Year"]);
myChart.addPctAxis("y", "Global Sales");
var s = myChart.addSeries("Genre", dimple.plot.area);
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>
</html>
In consle output was: Error: <text> attribute x: Expected length, "Infinity".
So I mentioned that data in Year column looked like that: 1,996, 1,997... 2,016 etc. So I decided to convert into data format with this line of code:
x.dateParseFormat="%Y";
But I still have the same issue.
There were 2 problems, not in code but in csv-file itself:
,and I changed it to., so it worked!!! :)PS I didn't change anything with Years field data type.