Загрузка данных из URL и построить другой граф в Amcharts

Question

Я использую биржевые диаграммы в Amcharts и построения графика, как показано ниже: Working Pen

Теперь вместо того, чтобы дать данные в сценарии я хотел, чтобы загрузить из URL. Так что вместо

"dataSets": [{ 


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

я заменил его

"dataSets": [{ 

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

     "categoryField": "time" 
    }] 

Но это не сработало.

1. Как загрузить данные в этом сценарии?

2. Я также хочу построить значения foo3 вместе с foo1.Как я могу это сделать?

Любая помощь приветствуется.

Answer 1

Мини-плагин, который вы используете, не поддерживает загрузчик данных. Вы можете увеличить его, но, вероятно, проще просто создать диаграмму в обратном вызове AJAX.

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

По умолчанию плагин только принимает один seriesField и одного seriesValueField, то есть вы можете отображать только foo1. Вы можете изменить его так, что он принимает массив seriesValueFields для создания того, что вы хотите:

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