automation of dimple.js charts with a configuration file

问题

I wanted to be able to change the type of charts made with dimple.js using variables. I am able to do it using local variables, set up manually, thanks to this post: change chart type in dimple.js to automate chart production

However, when I am trying to go a step further and place all my variables in a configuration file, it does no longer work anymore. I'm pretty sure I'm missing something with the "objects", but can't figure what.

Sorry, it might be an obvious thing I'm missing, but I'm a data analyst, not a developer and quite a rookie concerning d3.js and dimple.js.

My code: (see below) http://plnkr.co/McEDMkovXaQpsn5z9mmV I have put 2 html pages : "Manual" is where it works with local variables declared manually. "Dynamic" is the same code except I've put the variables in a configuration file and I read the configuration file using D3.csv function (a line par chart). It does not work.

Thank you for your help!

Code : http://plnkr.co/McEDMkovXaQpsn5z9mmV

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
        <script type="text/javascript" src="script.js"</script>
    </head>


<body>



<div id="chartContainer">
  <script type="text/javascript">


    var chartType1 = "bar";
    var chartDimple1 = dimple.plot[chartType1];
    var chartSerie1 = "Channel";
    var chartGroup1 = ["Month", "Channel"];
    var chartMeasure1 = "Unit Sales";
    var filterField1 = "Owner";
    var filterValues1 = ["Aperture", "LexCorp"];

    var svg1 = dimple.newSvg("#chartContainer", 590, 400);
    d3.csv("data.csv", function (data1) { //d3.tsv("data/example_data.tsv", function (data) {
    var data1 = dimple.filterData(data1, filterField1, filterValues1) // dataFiltered = dimple.filterData(data, "Owner", ["Aperture", "LexCorp"])
      var myChart1 = new dimple.chart(svg1, data1);
      myChart1.setBounds(60, 30, 510, 305)
      var x1 = myChart1.addCategoryAxis("x", chartGroup1); // var x = myChart.addCategoryAxis("x", ["Channel" , "Month"]);
      x1.addOrderRule("Date");
      var y1 = myChart1.addMeasureAxis("y", chartMeasure1);
      myChart1.addSeries(chartSerie1, chartDimple1); // myChart.addSeries("Channel", dimple.plot.bar);
      myChart1.addLegend(60, 10, 510, 20, "right");
      myChart1.draw();
    });


  </script>
</div>


<div id="chart2"></div>
<div id="chart3"></div>

  <script type="text/javascript">

    pageLayout(configFile);

  </script>

</body>
</html>

回答1:

I'm having a tough time getting the example working, lots of files doing lots of things. I think the basic problem is that when you import the dsv config file, your group still comes back as a string like "["Month", "Channel"]". When you pass this to chart.addCategoryAxis it's going to look at it like a string rather than an array. You should be able to do

chart.addCategoryAxis(JSON.parse(d.chartGroup));

and have it correctly set it as an array. This only works if you know it's going to be an array, if it may only be one string you would need to check beforehand to know if you need to parse it or not.

Also some of the code I don't think works on that site because it's still looking for the static dsv/csv files in a data/ directory that isn't there, but I think the string/array issue is probably the one holding you up.

来源：https://stackoverflow.com/questions/26181687/automation-of-dimple-js-charts-with-a-configuration-file

标签

dimple.js