CODEWITHSUNDEEP
javascriptjqueryjsond3.js
Meghna
Meghna

Reputation: 69

Can i passed date string directly to d3 bar chart data?

I have tried to build stackedBarChart using d3 js but whenever I passed data to variable its display nothing on chart div

here below is my jquery code:

var stackedBarChartData = [{key:"Facebook","color":"#348fe2",value:[{x:"2016-06-13",y:7},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17",y:2},{x:"2016-06-18",y:0},{x:"2016-06-19",y:1},{x:"2016-06-20"
            ,y:4},{x:"2016-06-21",y:4},{x:"2016-06-22",y:0},{x:"2016-06-23",y:0}]},{key:"Twitter","color":"#00acac"
            ,value:[{x:"2016-06-13",y:0},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17"
            ,y:0},{x:"2016-06-18",y:0},{x:"2016-06-19",y:0},{x:"2016-06-20",y:0},{x:"2016-06-21",y:0},{x:"2016-06-22"
            ,y:0},{x:"2016-06-23",y:0}]},{key:"Whatsapp","color":"#33bdbd",value:[{x:"2016-06-13",y:0},{x:"2016-06-14"
            ,y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17",y:0},{x:"2016-06-18",y:0},{x:"2016-06-19"
            ,y:0},{x:"2016-06-20",y:0},{x:"2016-06-21",y:0},{x:"2016-06-22",y:0},{x:"2016-06-23",y:0}]},{key:"Message"
            ,"color":"#c47d15",value:[{x:"2016-06-13",y:0},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16"
            ,y:0},{x:"2016-06-17",y:0},{x:"2016-06-18",y:0},{x:"2016-06-19",y:0},{x:"2016-06-20",y:0},{x:"2016-06-21"
            ,y:0},{x:"2016-06-22",y:1},{x:"2016-06-23",y:0}]},{key:"Email","color":"#ff5b57",value:[{x:"2016-06-13"
            ,y:0},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17",y:0},{x:"2016-06-18"
            ,y:0},{x:"2016-06-19",y:0},{x:"2016-06-20",y:1},{x:"2016-06-21",y:3},{x:"2016-06-22",y:1},{x:"2016-06-23"
            ,y:0}]}];

                nv.addGraph({
                    generate: function() {
                        var stackedBarChart = nv.models.multiBarChart()
                            .stacked(true)
                            .showControls(false);

                        var svg = d3.select('#nv-bar-chart-sharing').append('svg').datum(stackedBarChartData);
                        svg.transition().duration(0).call(stackedBarChart);
                        return stackedBarChart;
                    }
                });



  <div id="nv-bar-chart-sharing" class="height-400"></div>

I have already one example of stackedBarChart in which json value have all integer data in "value" key but here i passed date for x-axis so could i passed date there? If no then how can I display date on x-axis

Upvotes: 0

Views: 51

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

For this you need to tell nvd3 that expect date in x:

var stackedBarChart = nv.models.multiBarChart()
  .stacked(true)
  .showControls(false)
  .x(function (d){
  return new Date(d.x);//this will get the date
})

now while displaying show in this format 

stackedBarChart.xAxis
    .tickFormat(d3.time.format("%Y-%m-%d"));

working code here

Upvotes: 1

Related Questions