Load data from URL and plot another graph in Amcharts

问题

I am using stock charts in Amcharts and plotting the graph as below: Working Pen

Now Instead of giving the data in the script I wanted to load from a URL.So I instead of

"dataSets": [{


        "dataProvider": sourceData,
        "categoryField": "time"
  }]

I replaced it with

"dataSets": [{

      "dataLoader": {
           "url": "http://localhost:8080/contacts?day=3&zone_id=3"
         },

        "categoryField": "time"
  }]

But it did not work.

1. How to load data in this scenario?

2. I also want to plot the values of foo3 along with foo1.How can I do that?

Any help is appreciated.

回答1:

The mini-plugin you're using doesn't support the dataLoader. You could augment it, but it's probably easier to just create the chart in your AJAX callback.

$.getJSON(
  'path/to/your/endpoint', 
  function(data) {
    AmCharts.makeChart('chartdiv', {
      // ...
      dataSets: [{
        dataProvider: data,
        categoryField: "time"
      }],
      // ...
    });
  }
);

By default, the plugin only takes a single seriesField and single seriesValueField, meaning you can only display foo1. You can modify it so that it takes an array of seriesValueFields to generate what you want:

AmCharts.addInitHandler(function(chart) {

  // do nothing if seriesField is not set and seriesValueField isn't set or is not an array
  if (chart.seriesField === undefined && (chart.seriesValueField === undefined || chart.seriesValueField.length === 0))
    return;

  // get graphs and dataProvider
  var graphs, dataSet;
  if (chart.type === "stock") {
    // use first panel
    if (chart.panels[0].stockGraphs === undefined)
      chart.panels[0].stockGraphs = [];
    graphs = chart.panels[0].stockGraphs;
    dataSet = chart.dataSets[0];

    // check if data set has fieldMappings set
    if (dataSet.fieldMappings === undefined)
      dataSet.fieldMappings = [];
  } else {
    if (chart.graphs === undefined)
      chart.graphs = [];
    graphs = chart.graphs;
    dataSet = chart;
  }

  // collect value fields for graphs that might already exist
  // in chart config
  var valueFields = {};
  if (graphs.length) {
    for (var i = 0; i < graphs.length; i++) {
      var g = graphs[i];
      if (g.id === undefined)
        g.id = i;
      valueFields[g.id] = g.valueField;
    }
  }

  // process data
  var newData = [];
  var dpoints = {};
  for (var i = 0; i < dataSet.dataProvider.length; i++) {
    // get row data
    var row = dataSet.dataProvider[i];
    var category = row[dataSet.categoryField];

    // create a data point
    if (dpoints[category] === undefined) {
      dpoints[category] = {};
      dpoints[category][dataSet.categoryField] = category;
      newData.push(dpoints[category]);
    }

    //add points and create graphs for each seriesField + seriesValueField combination
    chart.seriesValueFields.forEach(function(seriesValueField) {
      var series = chart.seriesField + ' ' + row[chart.seriesField] + ' ' + seriesValueField;

      // check if we need to generate a graph
      if (valueFields[series] === undefined) {
        // apply template
        var g = {};
        if (chart.seriesGraphTemplate !== undefined) {
          g = cloneObject(chart.seriesGraphTemplate);
        }
        g.id = series;
        g.valueField = series;
        g.title = series;

        // add to chart's graphs
        graphs.push(g);
        valueFields[series] = series;

        // add fieldMapping to data set on Stock Chart
        if (chart.type === "stock") {
          dataSet.fieldMappings.push({
            "fromField": series,
            "toField": series
          });
        }
      }

      // add series value field
      if (row[seriesValueField] !== undefined) {
        dpoints[category][series] = row[seriesValueField];
      }

    });
    // add the rest of the value fields (if applicable)
    for (var field in valueFields) {
      if (valueFields.hasOwnProperty(field) && row[field] !== undefined)
        dpoints[category][field] = row[field];
    }
  }

  // set data
  dataSet.dataProvider = newData;

  // function which clones object
  function cloneObject(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
  }

}, ["serial", "stock"]);

// ...
AmCharts.makeChart("chartdiv", {
  // ...
  "seriesField": "day",
  "seriesValueFields": ["foo1", "foo3"],
  "seriesGraphTemplate": {
    "lineThickness": 2,
    "type": "smoothedLine",
    "useDataSetColors": false,
    "bullet": "round"
  },
  // ...
});

Demo

来源：https://stackoverflow.com/questions/41098515/load-data-from-url-and-plot-another-graph-in-amcharts