I am working with d3 js and dimpel js I have a line chart code here it works great but when I want to change the color of point in the this line chart it wont change what's wrong here!!any help would be grateful
html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="chartContainer"></div>
</body>
<script src="js/d3.js" charset="utf-8"></script>
<script src="js/dimple.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 600, 400),
data = [
{ "Value" : 100000, "Year" : 2009 },
{ "Value" : 110000, "Year" : 2010 },
{ "Value" : 100, "Year" : 2011 },
{ "Value" : 140000, "Year" : 2012 },
{ "Value" : 120000, "Year" : 2013 },
{ "Value" : 140000, "Year" : 2014 }
];
var chart = new dimple.chart(svg, data);
var x = chart.addCategoryAxis("x", "Year");
x.addOrderRule("Year");
var y = chart.addCategoryAxis("y", "Value");
//this line have dosen't work!!!!
chart.addColorAxis("Value", ["green", "yellow", "red"]);
var lines = chart.addSeries(null, dimple.plot.line);
lines.lineWeight = 5;
lines.lineMarkers = true;
chart.draw();
</script>
</html>
The issue you're having stems from the fact that you are adding a y-axis as a
categoryAxisinstead of ameasureAxis. If you changeyto ameasureAxis, then your code works perfectly:Here's a screenshot of the result: