HighCharts Загрузка из файла CSV со многими точками данных

Question

После долгих поисков и желаний ударить головой по моему столу, я отправляю свой первый вопрос о stackoverflow.

У меня есть веб-приложение ASP.NET, которое генерирует некоторые данные на стороне сервера и создает CSV-файл на сервере.

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

Проблема возникает, когда есть много точек данных. Посмотрите на ось X, и вы поймете, что я имею в виду. Нужно ли «группировать» их там, где они не показывают каждую точку на оси Х?

Даты находятся в произвольных интервалах.

Я создал JSFiddle с кодом моей клиентской стороны и содержимым моего CSV-файла в переменной JavaScript.

Вот мой код:

function parseDate(dateStr) { 
    var matches = dateStr.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})/) 
    return Date.UTC(matches[3], matches[1]-1, matches[2]); 
} 

var csv = 'Chart,3/4/2007,3/24/2007,4/13/2007,4/25/2007,9/19/2007,9/28/2007,11/5/2007,1/7/2008,1/14/2008,1/21/2008,1/27/2008,2/3/2008,2/10/2008,2/17/2008,2/24/2008,3/2/2008,3/23/2008,3/30/2008,4/5/2008,4/21/2008,5/3/2008,5/10/2008,5/17/2008,5/24/2008,5/31/2008,6/8/2008,6/15/2008,6/29/2008,7/4/2008,7/18/2008,7/25/2008,8/1/2008,8/8/2008,9/17/2010,11/25/2010,8/16/2012,1/17/2013,1/27/2013\nDates,180.00,175.50,167.00,166.50,170.00,171.50,174.00,163.00,162.50,164.00,166.50,166.50,167.50,170.00,170.00,171.00,169.00,166.50,166.00,166.50,162.00,160.00,160.50,162.50,164.00,164.00,165.00,165.50,166.00,169.00,171.00,170.00,171.00,165.00,165.00,189.00,177.00,175.50'; 

var options = { 
     chart: { 
      renderTo: 'chart', 
      defaultSeriesType: 'line' 
     }, 
     title: { 
      text: 'Test Chart' 
     }, 
     xAxis: { 
      type: 'datetime', 
      categories: [] 
     }, 
     yAxis: { 
      title: { 
       text: 'Pounds' 
      } 
     }, 
     series: [] 
    }; 
    // Split the lines 
     var lines = csv.split('\n'); 
     $.each(lines, function(lineNo, line) { 
      var items = line.split(','); 
      if (lineNo == 0) { 
       $.each(items, function(itemNo, item) { 
        if (itemNo > 0) options.xAxis.categories.push(parseDate(item)); 
       }); 
      } 
      else { 
       var series = { 
        data: [] 
       }; 
       $.each(items, function(itemNo, item) { 
        if (itemNo == 0) { 
         series.name = item; 
        } else { 
         series.data.push(parseFloat(item)); 
        } 
       }); 
       options.series.push(series); 
      } 
     }); 

     var chart = new Highcharts.Chart(options); 

Вот ссылка на JSFiddle:

http://jsfiddle.net/Q2hyF/6/

Заранее спасибо,

Роберт

Answer 1

В итоге я получил эту работу и никогда не писал ответ ... Вот ответ.

Присмотритесь на:

series.data.push ([parseDate (точки [0]), parseFloat (точки [1])]);

в коде ниже ...

function parseDate(dateStr) { 
    var matches = dateStr.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})/) 
    return Date.UTC(matches[3], matches[1] - 1, matches[2]); 
} 

var csv = 'Chart,11/1/2013|6,11/2/2013|4,11/3/2013|6,11/4/2013|3,11/5/2013|5,11/6/2013|5,11/7/2013|5,11/8/2013|6,11/9/2013|4,11/10/2013|13,11/11/2013|12,11/12/2013|3,11/13/2013|5,11/14/2013|7,11/15/2013|9,11/16/2013|0,11/17/2013|2,11/18/2013|3,11/19/2013|2,11/20/2013|16,11/21/2013|6,11/22/2013|9,11/23/2013|9,11/24/2013|20,11/25/2013|10,11/26/2013|10,11/27/2013|4,11/28/2013|9,11/29/2013|7,11/30/2013|7'; 

var options = { 
    chart: { 
     renderTo: 'chart', 
     type: 'line' 
    }, 
    title: { 
     text: 'Sales' 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    series: [] 
}; 

var lines = csv.split('\n'); 
    $.each(lines, function (lineNo, line) { 
     var items = line.split(','); 
     var series = { 
      data: [] 
     }; 
     $.each(items, function (itemNo, item) { 
      if (itemNo == 0) { 
       series.name = item; 
      } else { 
       var points = item.split('|'); 
       series.data.push([parseDate(points[0]), parseFloat(points[1])]); 
      } 
     }); 
     options.series.push(series); 
    }); 
    var chart = new Highcharts.Chart(options); 

http://jsfiddle.net/rswilley601/gtsLatyr/

Answer 2

Заканчивать HighStocks и его Функция DataGrouping:

http://www.highcharts.com/stock/demo/data-grouping

Он может обрабатывать гораздо большие наборы данных, чем Highcharts может. Однако есть недостатки, так как новейшие функции HighCharts не всегда находятся сразу в HighStocks. Обычно для синтаксиса HighStocks требуется только незначительные изменения, если вы хотите его протестировать.