How to Use sql queries to draw dynamic chart in NV D3?

问题

The below code for horizontal bar chart works well but now i need to retrieve data from sql database accordingly the chart should change dynamically, so where could i insert sql queries in this code and what is the format please help me guys.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link href="Scripts/nv.d3.css" rel="stylesheet" type="text/css">
<script src="Scripts/d3.v3.js"></script>
<script src="Scripts/nv.d3.js"></script>
<script src="Scripts/utils.js"></script>
<script src="Scripts/tooltip.js"></script>
<script src="Scripts/models/axis.js"></script>
<script src="Scripts/models/multiBarHorizontal.js"></script>
<script src="Scripts/models/multiBarHorizontalChart.js"></script>
<script src="Scripts/bar.js"></script>

</head>

<body>

<div id="chart" style="height:700px">
<svg>
</svg>
</div>



<script>

d3.json("data.json",function(error,data){
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
  .margin({top: 30, right: 20, bottom: 50, left: 175})
  .showValues(true)
  .tooltips(false)
  .showControls(false);

  chart.yAxis
  .tickFormat(d3.format(',.0f'));

  d3.select('#chart svg')
  .datum(data)
  .transition().duration(500)
  .call(chart);

 nv.utils.windowResize(chart.update);

 chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

 return chart;
 });
 });

</script>
</body>
</html>

Here is my data.json

{"values":[
{"label":"Alaska","value":3},
{"label":"Alabama","value":4},
{"label":"Arkansas","value":5},
{"label":"Arizona","value":7},
{"label":"California","value":8},
{"label":"Colorado","value":9},
{"label":"Missouri","value":31}]}

回答1:

OK, what I have done is gone back to the original example file that is included in the nvd3 downloaded zip file. Starting with the multiBarHorizontalChart.html file that is the examples folder. I was able to edit that file so that it looked like this;

<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">

<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

#chart1 {
  margin: 10px;
  min-width: 100px;
  min-height: 100px;
}

#chart1 svg {
  height: 500px;
}

</style>
<body>

  <div id="chart1">
    <svg></svg>
  </div>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBarHorizontal.js"></script>
<script src="../src/models/multiBarHorizontalChart.js"></script>
<script src="stream_layers.js"></script>
<script>

d3.json('data.json', function(data) {

var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .margin({top: 30, right: 20, bottom: 50, left: 175})
      .showValues(true)
      .tooltips(false)
      .barColor(d3.scale.category20().range())
      .showControls(true);

  chart.yAxis
      .tickFormat(d3.format(',.2f'));

  d3.select('#chart1 svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});
});

</script>

You should be able to note the d3.json('data.json', function(data) { line in there which will load your JSON file which is called data.json.

[
  {"values":
    [
      {"label":"Alaska","value":3},
      {"label":"Alabama","value":4},
      {"label":"Arkansas","value":5},
      {"label":"Arizona","value":7},
      {"label":"California","value":8},
      {"label":"Colorado","value":9},
      {"label":"Missouri","value":31}
    ]
  }
]

It is possible that this is where you were striking problems as you will see that there is an extra set of square brackets [] outside the data. If you have a look at the sample data that was included with the example, they are in there too (otherwise I wouldn't have known either).

Hopefully that set's you a little further along.

You will want to now check out how to use a php script to query your database, return the data in correctly formatted JSON and then call that script from the point where you initially called the data.json file.

Good luck.

来源：https://stackoverflow.com/questions/15061047/how-to-use-sql-queries-to-draw-dynamic-chart-in-nv-d3

标签

d3.js

nvd3.js