Open Flash Chart — построение «чартов» или бесплатное решение «Активного графика» на PHP+ActionScript3

    На статью натолкнула соседний топик про pChart — pChart — строим графики и диаграммы на PHP
    Сразу опишу со своей стороны минусы:
    1) Он не активный — тоесть не кликабельный
    2) У некоторых как говорится «дизайн желает лучшего»
    3) Меньше нагрузка на сервер (график строится на клиентской части)
    4) Так как индексации нету, график всегда в РеалТайме

    Минусы ActionScript3 графика:
    1) Нельзя сделать snapshot (грубо говоря состояние графика, 2-3-4 часа назад или чтоб уменьшить нагрузку на сервере сделать импорт графика в image)


    Вот пример не «кликабельного» графика на примере pChart:
    pChart
    А вот пример Open Flash Chart'a:

    Живой пример — Индексация WMZ кошелька (для тех кому интересен как это было реализовано, будет описано если этот топик прокатит. У меня в написании статьей почти 0-лвл :) )


    Значит, почему именно Open Flash Chart? После 3часового выбора стартапа для своего проекта, я никак не мог закрыть свою мечту и сделать «Живой график» или «Активный график», ну или «Кликабельный график». Пересмотрев пару десятков сайтов графиков, даже платных — никак не мог найти подходящий — все они то или какие-то «стремные» или страшные:) и работать с ними через (извините) жопу.
    Вот мой выбор — Open Flash Chart

    На даный момент уже есть новая Альфа версия: Open Flash Chart 2

    Создаем свой график

    1) Скачаем саму библиотеку и swf файлик здесь

    2) Вставим это в html секцию -тега




    3) А это наш РНР скрипт который и будет генерировать сам график
    include '../php-ofc-library/open-flash-chart.php';

    // generate some random data
    srand((double)microtime()*1000000);

    $data_1 = array();
    $data_2 = array();
    $data_3 = array();
    for( $i=0; $i<9; $i++ )
    {
    $data_1[] = rand(1,6);
    $data_2[] = rand(7,13);
    $data_3[] = rand(14,19);
    }

    $line_dot = new line_dot();
    $line_dot->set_width( 4 );
    $line_dot->set_colour( '#DFC329' );
    $line_dot->set_dot_size( 5 );
    $line_dot->set_values( $data_1 );

    $line_hollow = new line_hollow();
    $line_hollow->set_width( 1 );
    $line_hollow->set_colour( '#6363AC' );
    $line_hollow->set_dot_size( 5 );
    $line_hollow->set_values( $data_2 );

    $line = new line();
    $line->set_width( 1 );
    $line->set_colour( '#5E4725' );
    $line->set_dot_size( 5 );
    $line->set_values( $data_3 );

    $y = new y_axis();
    $y->set_range( 0, 20, 5 );

    $chart = new open_flash_chart();
    $chart->set_title( new title( 'Three lines example' ) );
    $chart->set_y_axis( $y );
    //
    // here we add our data sets to the chart:
    //
    $chart->add_element( $line_dot );
    $chart->add_element( $line_hollow );
    $chart->add_element( $line );

    echo $chart->toPrettyString();

    4) А вот сама data — которая передается в график сгенерированная нами:
    { "title": { "text": "Mon Jul 28 2008" }, "elements": [ { "type": "line_hollow", "values": [ 7, 7.3774717285106, 7.7398948503864, 8.0728206994506, 8.3629765727091, 8.598794871135, 8.7708742633377, 8.8723544869781, 8.8991898457789, 8.8503104986686, 8.7276651109688, 8.5361431672572, 8.2833800430472, 7.9794526064608, 7.6364774852962, 7.2681280153137, 6.8890891274876, 6.514471906149, 6.1592111577398, 5.8374700072088, 5.5620752589149, 5.3440060324142, 5.1919560596099, 5.1119870930964, 5.1072872432119, 5.17804387814, 5.3214361541317, 5.5317474736436, 5.8005933880426, 6.1172558591139, 6.469110553422 ], "halo-size": 0, "width": 2, "dot-size": 5 }, { "type": "line_hollow", "values": [ 10, 10.377471728511, 10.739894850386, 11.072820699451, 11.362976572709, 11.598794871135, 11.770874263338, 11.872354486978, 11.899189845779, 11.850310498669, 11.727665110969, 11.536143167257, 11.283380043047, 10.979452606461, 10.636477485296, 10.268128015314, 9.8890891274876, 9.514471906149, 9.1592111577398, 8.8374700072088, 8.5620752589149, 8.3440060324142, 8.1919560596099, 8.1119870930964, 8.1072872432119, 8.17804387814, 8.3214361541317, 8.5317474736436, 8.8005933880426, 9.1172558591139, 9.469110553422 ], "halo-size": 1, "width": 1, "dot-size": 4 }, { "type": "line_hollow", "values": [ 4, 4.3774717285106, 4.7398948503864, 5.0728206994506, 5.3629765727091, 5.598794871135, 5.7708742633377, 5.8723544869781, 5.8991898457789, 5.8503104986686, 5.7276651109688, 5.5361431672572, 5.2833800430472, 4.9794526064608, 4.6364774852962, 4.2681280153137, 3.8890891274876, 3.514471906149, 3.1592111577398, 2.8374700072088, 2.5620752589149, 2.3440060324142, 2.1919560596099, 2.1119870930964, 2.1072872432119, 2.17804387814, 2.3214361541317, 2.5317474736436, 2.8005933880426, 3.1172558591139, 3.469110553422 ], "halo-size": 1, "width": 6, "dot-size": 4 } ], "y_axis": { "min": 0, "max": 15, "steps": 5 } }
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 10

      0
      Ай, графики сожрали всю правую часть хабра. Поправьте уж
        0
        хм) сек, разрешение по мне плачет :) у меня widescreen - не думал уж что хабра сама не редактит размеры имеджов :)
        –1
        хабракат по Вам плачет
          +2
          спасибо, исправил! ;)
          +3
          хабраюзеры, какие же вы всетаки привередливые, господи ну не нравится вам статья - ну не голосуйте, комуто возможно она пригодится. мне, например, было интересно, хотя подобные темы и не редкость. Спасибо автору.
            +1
            на данный момент рейтинг -4. Думаю ставить - (минус) только тогда, когда тот кто написал статью не хочет менять то что вы предлагает, и вообще игнорирует весь процес!
            После таких случаев у 99% людей просто кидают это не благодарное дело :(
              0
              понравилась "Индексация WMZ кошелька",ждём топика с описанием его работы :)
                0
                Интересное решение. Snapshot можно делать, просто фильтруя данные.
                Я сначал не врубился что как, потом дошло что график FlashBlock порезал. :)
                  0
                  Можно делать и скриншот :) Если нужно будет объясню во второй часте!;)
                  0
                  Отличная библиотека для построения графиков!
                  После долгих и мучительных раздумий тоже выбрал именно ее для проекта. Добавлю от себя такие преимущества:
                  1) опен сорс
                  2) интерактивность
                  3) есть нормальный антиалиасинг! Которого, кстати, вы не найдете не в одной PHP библиотеке.
                  4) не отвлекает сервер от основной работы :)

                  Only users with full accounts can post comments. Log in, please.