javascript - Discrete Bar Chart using nvd3 library -
i implementing discrete bar chart using nvd3 library on click of button calling generatebarchart method here code :
generatebarchart = function(data, options) { if (!$.isarray(data)) { if (!$.isplainobject(data)) { data = $.makearray(data); } else { try { data = $.parsejson(data); } catch(err) { console.error(data, "generatebarchart error", err.message, err.stack); data = []; } } } var chart1; if (!$.isplainobject(options)) { options = {}; } options = $.extend(true, { container : "#svgchart", title : "", titlestyle : { x : 500, y : 200, fontfamily : "sans-serif", fontsize : "20px", fill : "black" } }, options); nv.addgraph(function() { chart1 = nv.models.discretebarchart().x(function(d) { return d.label || "" }).y(function(d) { return d.value || 0 }); var selectedchart = d3.select(options.container).datum(dataserver(data)).transition().duration(500); selectedchart = selectedchart.call(chart1); //d3.select(options.container).append("text").attr("x", options.titlestyle.x).attr("y", options.titlestyle.y).attr("font-family", options.titlestyle.fontfamily).attr("font-size", options.titlestyle.fontsize).attr("fill", options.titlestyle.fill).text(options.title); $(options.container).css({ }).parent().css("text-align", "center").prepend('<h5 class="text-center" >' + options.title + '</h5>'); nv.utils.windowresize(function() { chart1.update(); }); return chart1; }); return chart1; }; function dataserver(data) { ( = 0; < data.length; i++) {//todo var name = data[i].name; //todo var itemamount = data[i].itemamount; //todo } return [{ "color" : "#d62728", "values" : [{ "label" : name, "value" : itemamount }] }]; }
i referring following link ( http://nvd3.org/livecode/#codemirrornav ) generate discretebarchart kind of stuck in dataserver() method in loop can last value
looking other stuff discretebarchart arrived here.
hope have fixed problem now, if not... need this:
function dataserver(data) { values = []; ( = 0; < data.length; i++) { var name = data[i].name; var itemamount = data[i].itemamount; values.push({"label": name, "value": itemamount}); } return [{ "color" : "#d62728", "values" : values }]; }
in way, filling array of values (called "values" imagination have right now), , returning data graph.
Comments
Post a Comment