постройка графика из базы данных.

[xTODx]

Добрый день, нужно построить график из базы данных.
Есть 2 параметра:
1) дата
2) количество
нужно построить график
Как реализовать? какая библиотека нужна? и как её настроить?
p.s. графиков будет несколько.
p.s.s. и ещё, можно как-то, что бы брались те данные которые сервер передал по началу, при загрузке страницы.

[xTODx]

нашёл библиотеку moris с Raphaël, но не работает
help

<script>
new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value']
});
</script>
<div id="myfirstchart" style="height: 250px;"></div>

хром кричит
Uncaught TypeError: Cannot read property 'x' of undefined
на Raphaël

[xTODx]

ладно, продвинулся дальше, начал строить графики через гугловский скрипт, всё красиво, но!
он не принимает такой тип данных('03.06.2014') для оси x(

google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['data', 'Sales', 'Expenses'],
		  ['06.02.14','2','7'],	['07.02.14','2','3']
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Дата',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('stats'));
        chart.draw(data, options);
      }

[xTODx]

Всё порешал, осталось только найти как менять цвета графика

google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['data', 'Только с разным Ip', 'Все'],
		  ['03.06.14',1,2],	['',0,0]
        ]);

        var options = {
          title: 'Статистика',
          hAxis: {title: 'Дата',  
		  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0},
		  'legend':'top',
		  hAxis: {baselineColor : '#333'}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('stats'));
        chart.draw(data, options);
      }