Линейная диаграмма Javascript в barchart

Question

В проекте, который у меня есть в университете, я создал следующий график с помощью gRaphael, но я хочу изменить его на barchart, используя любую библиотеку, кроме Google Maps.

Я пытался сделать это с помощью gRaphael, но все примеры barchart, которые gRaphel имеет на своем сайте, не имеют оси!!! которые находят это очень странным.

Что мне нужно сделать, это показать точно такие же вещи, но с использованием линейной диаграммы вместо диаграммы. Я не думал, что это будет так сложно.

Я также видел библиотеку d3js, которая кажется действительно хорошей, но я не знаю, как конвертировать этот код, так как пользователь, когда наводит курсор на полосу, должен видеть ее значение. Я не нашел эту функцию при наведении курсора на d3js.

В общем, что делает эта линейная диаграмма, так это то, что она показывает дату на оси x и значения на оси y. Поскольку gRaphael не принимает дату в качестве значения, я вместо даты устанавливаю 1,2,3 и т. Д., Чтобы graphael создал диаграмму, а после этого я изменяю метки на оси x для отображения реальные даты. Кроме того, когда пользователь наводит курсор на точку, он должен видеть ее значение.

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

Кто-нибудь может дать мне какой-нибудь совет или помочь мне сделать это в Graphael Barchart или в любой другой бесплатной библиотеке графиков, такой как d3js?

<script>
        window.onload = function () {
            var r = Raphael("holder"),
                txtattr = { font: "20px sans-serif" };

            var lines = r.linechart(80, 30, 600, 400,[1,2,3,4,5],[1.34,3.43,2.52,2.63,3.12], {type:"soft", axisxstep : 13,nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: false }).hoverColumn(function () {
                this.tags = r.set();
                for (var i = 0, ii = this.y.length; i < ii; i++) {
                    this.tags.push(r.tag(this.x, this.y[i], Number(this.values[i]).toPrecision(5), 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
                }
            }, function () {
                this.tags && this.tags.remove();
            });
            var date = new Date(1356998400000);
            var someDate = new Date(date);

            //For the x axis
            $.each(lines.axis[0].text.items , function ( index, label ) {
                //Has all the initial x values we got from the beginning as a date
                //We get the corresponding date from the value x
                //i.e. for value 3 we get 3/6/2014
                //This function replaces the values we had (numbers 1,2,3...) with the corresponding date
                someDate = new Date(date);
                someDate.setDate(date.getDate() );
                var jan312009 = new Date(2009, 1-1, 31);
                var newDate = new Date(new Date(someDate).setMonth(jan312009.getMonth()+Number(label.attr("text"))));
                var dd = newDate.getDate();
                var mm = newDate.getMonth() + 1;
                var y = newDate.getFullYear();
                var someFormattedDate = mm + '-'+ y;
                label.attr({'text': someFormattedDate});
            });
            lines.symbols.attr({ r: 6 });
        };
    </script>

большое спасибо