Используйте источник данных YUI для заполнения линейной диаграммы HighCharts - PullRequest
Новая
       10

Используйте источник данных YUI для заполнения линейной диаграммы HighCharts

0 голосов
/ 03 октября 2011

Я хочу преобразовать свои графики на основе YUI2 Flash в чистую реализацию javascript.У меня уже есть источник данных, определенный с помощью YUI DataSource, но я не смог извлечь из него нужные мне данные, чтобы заполнить мою диаграмму.Мой код выглядит следующим образом: 

function setupChart(e) {

var dataSource = new YAHOO.util.DataSource(document.location.href + '/index/charts');
dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
dataSource.responseSchema = {
fields: ['date', 'cust_view', 'cust_upd', 'notes', 'mydata_comp', 'mydata_not_completable'] };

var mychart = new Highcharts.Chart({
chart: {
  renderTo: 'chart',
  defaultSeriesType: 'line'
},
title: { text: null },
xAxis: {
  type: 'datetime',
  tickInterval: 7 * 24 * 3600 * 1000 // one week
},

yAxis: {
  title: { text: null }
},

series: [
  { name: 'Viewed', data: 'cust_view' }
  { name: 'Updated', data: 'cust_upd' }
  { name: 'Notes Created', data: 'notes' },
  { name: 'myData Completions', data: 'mydata_comp' },
  { name: 'myData marked as Incompletable', data: 'mydata_not_completable' } ]


});
}

Итак, я знаю, что dataSource содержит нужные значения, но я не знаю, как отформатировать синтаксис в HighCharts, чтобы получить его оттуда.

Первый вопрос по SO, извините, если не ясно.

1 Ответ

0 голосов
/ 03 октября 2011

Вам не хватает шага получения данных с вашего сервера.

Это делается с помощью вызова Ajax. Данные будут доступны в предоставленной вами функции callback . Вы создадите диаграмму в функции обратного вызова Не в основной строке. Например, 

        dataSource.sendRequest("get_data.php",
            { 
          success: function (req,res) { 
                    // res.results holds the results. Use
                        // firebug to see its format
                        // The format is an array of JS objects.
                        // Each element of the array is an object with 
                        // properties from your fields configuration.
                        // 
                        // Eg
          [
            { date: "xxx", cust_view: "red",      notes: "apples", ... },
            { date: "xxx", cust_view: "green",    notes: "vegetable", ... },
            { date: "xxx", cust_view: "cherries", notes: "fruit", ... },
            ...
          ]                            
                        // create the Highcharts.chart and add the data to it
                        // here 
                   }

              failure: function () {
                       alert("Couldn't contact server");
                       }
            });

См. Примеры из YUI docs

...