Всем привет!
В общем нужно строить график задавая период (от 1 часа до 1 месяца) и выводить значения на каждую точку, будет выводится курс валют, и график обновляться при каждом изменении курса либо 1 раз в день на 17:00 по МСК.
Выбрал для сей задачи плагин xCharts, все отлично и просто, как для стилизации так и для установки новых значений.
Но возникла проблема отдаю массив данных:
;(function () {
'use strict';
var tt = document.createElement('div'),
leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
topOffset = -32;
tt.className = 'chart-hint';
$('#example3').append(tt);
var data = {
"xScale": "time",
"yScale": "linear",
"main": [
{
"data": [
{
"x": "2012-11-1",
"y": 1000
},
{
"x": "2012-11-3",
"y": 1500
},
{
"x": "2012-11-4",
"y": 2000
},
{
"x": "2012-11-5",
"y": 1800
},
{
"x": "2012-11-10",
"y": 1600
},
{
"x": "2012-11-15",
"y": 3000
}
]
}
]
};
var opts = {
"dataFormatX": function (x) {
console.log(d3.time.format('%Y-%m-%d').parse(x));
return d3.time.format('%Y-%m-%d').parse(x);
},
"tickFormatX": function (x) {
var date = moment(x);
moment.locale('ru');
return date.format('dd, MMMM d, YYYY');
//return d3.time.format('%A')(x);
},
"mouseover": function (d, i) {
var date = moment(d.x);
moment.locale('ru');
var pos = $(this).offset();
var chartHint = '<label >Покупка</label><b>'+d.y+'</b><span>'+date.format('dd, MMMM d, YYYY')+'</span>';
$(tt).html(chartHint)
.css({top: topOffset + pos.top, left: pos.left + leftOffset + 10})
.show();
},
"mouseout": function (x) {
$(tt).hide();
}
};
var myChart = new xChart('line-dotted', data, '#example3', opts);
})();
График строится верно, но легенда по оси x почему то глючит, и
вместо вывода конкретного числа выводит 0, покопался но не нашел решения, может я, что то не верно делаю или это какой то баг плагина?
Или посоветуйте хороший плагин для этой задачи.