{"id":7535,"date":"2015-07-26T05:11:37","date_gmt":"2015-07-26T05:11:37","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/nvd3-stacked-bar-chart-with-discrete-values-open-source-projects-novus-nvd3\/"},"modified":"2015-07-26T05:11:37","modified_gmt":"2015-07-26T05:11:37","slug":"nvd3-stacked-bar-chart-with-discrete-values-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/nvd3-stacked-bar-chart-with-discrete-values-open-source-projects-novus-nvd3\/","title":{"rendered":"nvd3 Stacked Bar Chart with discrete values-open source projects novus\/nvd3"},"content":{"rendered":"<p>I am trying to use nvd3 to create a vertical stacked bar chart. I will be using discrete data values, as opposed to randomly generated values as the example on their website.<\/p>\n<p>I have tried to play around with the live code example of the Group \/ Stacked Bar Chart and put in JSON data containing my own values. What I tried to do was take the JSON data from the horizontal bar chart and put it in as the data for the vertical bar chart.<\/p>\n<p>This is the data I used on the live code example in place of the data in the Group \/ Stacked Bar Chart:<\/p>\n<pre><code>[\n  {\n    \"key\": \"Series1\",\n    \"color\": \"#d62728\",\n    \"values\": [\n      { \n        \"label\" : \"Group A\" ,\n        \"value\" : -1.8746444827653\n      } , \n      { \n        \"label\" : \"Group B\" ,\n        \"value\" : -8.0961543492239\n      } , \n      { \n        \"label\" : \"Group C\" ,\n        \"value\" : -0.57072943117674\n      } , \n      { \n        \"label\" : \"Group D\" ,\n        \"value\" : -2.4174010336624\n      } , \n      {\n        \"label\" : \"Group E\" ,\n        \"value\" : -0.72009071426284\n      } , \n      { \n        \"label\" : \"Group F\" ,\n        \"value\" : -0.77154485523777\n      } , \n      { \n        \"label\" : \"Group G\" ,\n        \"value\" : -0.90152097798131\n      } , \n      {\n        \"label\" : \"Group H\" ,\n        \"value\" : -0.91445417330854\n      } , \n      { \n        \"label\" : \"Group I\" ,\n        \"value\" : -0.055746319141851\n      }\n    ]\n  },\n  {\n    \"key\": \"Series2\",\n    \"color\": \"#1f77b4\",\n    \"values\": [\n      { \n        \"label\" : \"Group A\" ,\n        \"value\" : 25.307646510375\n      } , \n      { \n        \"label\" : \"Group B\" ,\n        \"value\" : 16.756779544553\n      } , \n      { \n        \"label\" : \"Group C\" ,\n        \"value\" : 18.451534877007\n      } , \n      { \n        \"label\" : \"Group D\" ,\n        \"value\" : 8.6142352811805\n      } , \n      {\n        \"label\" : \"Group E\" ,\n        \"value\" : 7.8082472075876\n      } , \n      { \n        \"label\" : \"Group F\" ,\n        \"value\" : 5.259101026956\n      } , \n      { \n        \"label\" : \"Group G\" ,\n        \"value\" : 0.30947953487127\n      } , \n      { \n        \"label\" : \"Group H\" ,\n        \"value\" : 0\n      } , \n      { \n        \"label\" : \"Group I\" ,\n        \"value\" : 0 \n      }\n    ]\n  }\n]\n<\/code><\/pre>\n<p>I replaced the function call to data() in the javascript to data:<\/p>\n<pre><code>nv.addGraph(function() {\n    var chart = nv.models.multiBarChart();\n\n    chart.xAxis\n        .tickFormat(d3.format(',f'));\n\n    chart.yAxis\n        .tickFormat(d3.format(',.1f'));\n\n    d3.select('#chart svg')\n        .datum(data)\n      .transition().duration(500).call(chart);\n\n    nv.utils.windowResize(chart.update);\n\n    return chart;\n});\n<\/code><\/pre>\n<p>The graph properly labels my series but does not show the bars. Can this graph not take this type of data? I got my data working with the horizontal bars, but I would like to use vertical bars if possible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I am trying to use nvd3 to create a vertical stacked bar chart. I will be using discrete data values, as opposed to randomly generated values as the example on their website. I have tried to play around with the live code example of the Group \/ Stacked Bar Chart and put in JSON data [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7535","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7535"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7535\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}