Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Google Chart API

google codeGoogle не перестаёт удивлять. Сегодня увидел в деле их новую Chart API, которая позволяет ну очень просто генерировать графики. Самое интересное, что не нужно ничего скачивать и устанавливать. Нужно всего лишь правильным образом написать ссылку в браузере и график готов.

Хотя звучит всё просто, у этого сервиса неплохие возможности. Есть 5 типов графиков: Line, Bar, Pie, Venn, Scatter, можно самому задавать цвет, бэкграунд, лэйблы. Вообщем всё что нужно. Сервер сгенерирует нужный график как картинку и чтобы вставить её у себя на сайте - достаточно написать тэг IMG. Так как картинки хранятся на сервере гугла, то даже за траффик не нужно платить.

Чтобы попробовать эту игрушку в деле - сделал небольшую статистику браузеров на AjaxRussia.

Вот так выглядит ссылка.

Ну а вот и сам график:

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

del.icio.us Забобрить!

2 Comments so far

  1. Spryt December 7th, 2007 17:56

    А как то не разобрался, как ему свои данные для рисования графика дать? Вот к примеру http://chart.apis.google.com/chart?chs=500×200&chd=s:HelloWorld&cht=lc&chxt=x,y&chxl=0:|Mar|Apr|May|June|July|

    как гугл генерирует значения для mar, apr, may и т.д. ? я что то не разобрался в этом, так много текста и объяснений визуализации, и все на буржуйском ((

  2. Aleksandr December 10th, 2007 22:14

    Нужно сконвертировать значения в String.

    Я воспользовался вот этой функцией

    var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    function simpleEncode(values,maxValue) {

    var chartData = ['s:'];
    for (var i = 0; i < values.length; i++) {
    var currentValue = values[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
    }
    else {
    chartData.push(’_');
    }
    }
    return chartData.join(”);
    }

Leave a reply