CODEWITHSUNDEEP
d3.jsbar-chartdimple.js
user982
user982

Reputation: 189

Add colors to dimple.js bar chart based on value and add goal line

I have 3 queries. 1) How to add custom colors in a bar chart? In the attached image for example, I want to add different colors for Metric Pink and Blue. 2) I want to show a horizontal line as goal/target value for e.g. at 3.0k on y-axis. 3) The chart should render the x-axis values in order of Jan,Feb,Mar,Apr which is not happening now. Please advise.enter image description here <div class="row"> <div id="test" class="column"> <h2>&nbsp;&nbsp;Pink and Blue Distribution</h2> <script type="text/javascript"> var svg = dimple.newSvg("#test", 590,400); var json = JSON.parse('${rlog}'); var data = [ {"Month": "Jan", "Metric": "Pink", "Value": 200}, {"Month": "Feb", "Metric": "Pink", "Value": 320}, {"Month": "Mar", "Metric": "Pink", "Value": 200}, {"Month": "Apr", "Metric": "Pink", "Value": 320}, {"Month": "Jan", "Metric": "Blue", "Value": 1000}, {"Month": "Feb", "Metric": "Blue", "Value": 2500}, {"Month": "Mar", "Metric": "Blue", "Value": 1500}, {"Month": "Apr", "Metric": "Blue", "Value": 3001} ]; var chart = new dimple.chart(svg, data); chart.setBounds(80, 30, 480,330); var x = chart.addCategoryAxis("x",["Month","Metric"]); var y1 = chart.addMeasureAxis("y", "Value"); var bars = chart.addSeries("Metric", dimple.plot.bar, [x, y1]); bars.barGap = 0.5; chart.addLegend(65, 10, 510, 20, "right"); chart.draw(); </script> </div> </div>

Upvotes: 0

Views: 3306

Answers (2)

Chris Ubick
Chris Ubick

Reputation: 123

Try this out

http://jsfiddle.net/cmubick/n5x0gkdy/

1) custom colors:

chart.assignColor("Pink","pink");
chart.assignColor("Blue","blue");

2) horizontal line at Value = 3000:

var line = chart.addSeries("Line", dimple.plot.line);
    line.data = [
        { "Line" : "line", "Month": "Jan", "Metric": "Blue", "Value" : 3000  },
        { "Line" : "line", "Month": "Apr", "Metric": "Blue", "Value" : 3000  }
    ];

3) sort x-axis by month

x.addOrderRule(["Jan", "Feb", "Mar", "Apr"]);

Upvotes: 1

Supra
Supra

Reputation: 1652

For 2) you could use something like this below for adding horizontal line(s). I use the following code for generating rules (horizontal grid line)

            var rule = svg.selectAll("g.rule")
                .data(y.ticks(5)) 
                .enter().append("svg:g")
                  .attr("class", "rule")
                  .attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
            rule.append("svg:line")
                .attr("x2", width)
                .style("stroke", function(d) { return '#f00' })   //return my own color
                .style("stroke-width", 0.5)  
                .style("stroke-opacity", function(d) { return 1; });  //you could return 0 for ticks where you do not want rules, or some other condition

Upvotes: 0

Related Questions