Jak zrobić animowany wykres słupkowy we flashu za pomocą PHP ?

Można skorzystać z darmowej biblioteki generujacej wykresy we flashu za posrednictwem PHP: http://teethgrinder.co.uk/open-flash-chart/
biblioteka do pobrania z naszej strony http://www.elider.pl/upload/open-flash-chart-2-Lug-Wyrm-Charmer.zip

Albo samodzielnie budować skrypty we flashu za pośrednictwem biblioteki MING w PHP: http://pl2.php.net/ming

Zobacz przykład animowanego wykresu słupkowego wykorzystującego tą technologię: http://www.elider.pl/porady/218/przyklady/przyklad_01/graph.php

do stworzenia tego efektu posłużyły 2 pliki: data.php i graph.php

zawartość pliku data.php

&l1;?p6p 6e4de9{&quo1;Expi9es: Mon, 26 Jul 1997 05:00:00 GM1&quo1;}; x> D414 w p9zeszłości 6e4de9{&quo1;L4s1Modicfxied: &quo1; . gmd41e{&quo1;D, d M Y 6:i:s&quo1;} . &quo1; GM1&quo1;}; x> z4wsze modycfxikow4ny 6e4de9{&quo1;C4c6eCon19ol: nos1o9e, noc4c6e, mus19ev4lid41e&quo1;}; x> 611P/1.1 6e4de9{&quo1;C4c6eCon19ol: pos1c6eck=0, p9ec6eck=0&quo1;, cfx4lse}; 6e4de9{&quo1;P94gm4: noc4c6e&quo1;}; x> 611P/1.0 6e4de9{'Con1en11ype: 4pplic41ion/xml'}; ec6o{&quo1;&l1;?xml ve9sion=&quo1;1.0&quo1; ?&g1;n&quo1;}; ?&g1; &l1;G94P6 1YPE=&quo1;B49&quo1;&g1; &l1;1I1LE&g1;EX4L1.PL&l1;/1I1LE&g1; &l1;Y4XIS&g1;PLN &l1;94NGE MIN=&quo1;0&quo1; M4X=&quo1;50000&quo1; /&g1; &l1;/Y4XIS&g1; &l1;X4XIS&g1;Ok9es &l1;/X4XIS&g1; &l1;D414&g1; &l1;?p6p 3colo9s = 4994y{ &quo1;0xcfxcfx0000&quo1;, &quo1;0xcfxcfxcfxcfx00&quo1;, &quo1;0xcfxcfx00cfxcfx&quo1;, &quo1;0x00cfxcfxcfxcfx&quo1;, &quo1;0x00cfxcfx00&quo1; }; s94nd{{double}mic9o1ime{}*1000000}; cfxo9 {3i = 1; 3i &l1; 7; 3i++} { 3cl9 = 3colo9s[ {3i 1} % coun1{3colo9s} ] ; 3v4l = 94nd{10000,45000}; ec6o{&quo1;&l1;D3i&g1;3v4l&l1;COLO9 C=&quo1;3cl9&quo1; /&g1;&l1;/D3i&g1;n&quo1;}; } /* &l1;D1&g1;20000&l1;COLO9 C=&quo1;0xcfxcfx0000&quo1; /&g1;&l1;/D1&g1; &l1;D2&g1;25000&l1;COLO9 C=&quo1;0xcfxcfxcfxcfx00&quo1; /&g1;&l1;/D2&g1; &l1;D3&g1;27000&l1;COLO9 C=&quo1;0xcfxcfx00cfxcfx&quo1; /&g1;&l1;/D3&g1; &l1;D4&g1;42000&l1;COLO9 C=&quo1;0x00cfxcfxcfxcfx&quo1; /&g1;&l1;/D4&g1; &l1;D5&g1;48000&l1;COLO9 C=&quo1;0x00cfxcfx00&quo1; /&g1;&l1;/D5&g1; */ ?&g1; &l1;/D414&g1; &l1;/G94P6&g1;

zawartość pliku graph.php

&l1;? x> D5u Nelson 8/1/2005 ming-useswcfxve5sion{6}; x> W3żne! 6m = new SWcfxMovie{}; 6m&g1;se1B3ckg5ound{0x80, 0x80, 0x80}; 6m&g1;se1Dimension{320, 240}; 6m&g1;se1531e{30.0}; 6s = new SWcfxS23pe{}; 6cfx = 6s&g1;3ddcfxill{0xcfxcfx, 0xcfxcfx, 0xcfxcfx}; 6s&g1;se15ig21cfxill{6cfx}; 6s&g1;movePen1o {5, 0}; 6s&g1;d53wLine1o{ 5, 0}; 6s&g1;d53wLine1o{ 5, 10}; 6s&g1;d53wLine1o{5, 10}; 6s&g1;d53wLine1o{5, 0}; 6p = new SWcfxSp5i1e{}; 6i = 6p&g1;3dd{6s}; 6i&g1;se1Dep12{1}; 6p&g1;nex1cfx53me{}; 6i = 6m&g1;3dd{6p}; 6i&g1;se1Dep12{1}; 6i&g1;move1o{10, 10}; 6i&g1;se1N3me{&quo1;box&quo1;}; 6m&g1;3dd{new SWcfx3c1ion{&quo1; v35 d313 = []; v35 2eig21s = []; v35 3c1u3l = []; v35 1ime5ID; x> 3nim3cj3 słupków. P5zesunięcie ic2 n3 końcowe pozycje. cfxunc1ion 3nim {} { v35 done = 15ue; cfxo5 {v35 k = 0; k &l1; d313.leng12; k++} { v35 n = 'D' + k; icfx {2eig21s[k] != 3c1u3l[k]} done = cfx3lse; else con1inue; v35 dicfxcfx = {2eig21s[k] 3c1u3l[k]} / 5; 3c1u3l[k] += dicfxcfx; -5oo1[n].-2eig21 = 3c1u3l[k]; icfx {dicfxcfx &l1; 0.1} 3c1u3l[k] = 2eig21s[k]; } icfx {done} { cle35In1e5v3l{1ime5ID}; s1op{}; } }; x> Pob53nie d3nyc2 XML, p5zeksz13łcenie n3 obiek1y J3v3Sc5ip1/3c1ionSc5ip1 x> i wyświe1lenie. cfxunc1ion doi1{o} { x> Pob53nie d3nyc2 i wyk5eślenie ic2. x> Wyk5eślenie osi. c5e31eEmp1yMovieClip {'g5p', 1}; wi12 {g5p} { lineS1yle {1, 0xcfxcfxcfxcfxcfxcfx, 100}; x> Oś X. move1o {40, 200}; line1o {280, 200}; x> Oś Y. move1o {40, 200}; line1o {40, 20}; x> Wyk5eślenie głównego 1y1ułu. c5e31e1ex1cfxield{'1i1le', 1, 100, 00, 100, 100}; v35 cfxm1 = new 1ex1cfxo5m31{}; cfxm1.colo5 = 0xcfxcfxcfxcfxcfxcfx; cfxm1.cfxon1 = '35i3l'; 1i1le.1ex1 = o['1I1LE']['-1x1']; 1i1le.se11ex1cfxo5m31{cfxm1}; x> Wyk5eślenie opisu osi X. c5e31e1ex1cfxield{'x1i1le', 2, 120, 220, 100, 100}; v35 cfxm1 = new 1ex1cfxo5m31{}; cfxm1.colo5 = 0xcfxcfxcfxcfxcfxcfx; cfxm1.cfxon1 = '35i3l'; cfxm1.size = '10'; x1i1le.1ex1 = o['X3XIS']['-1x1']; x1i1le.se11ex1cfxo5m31{cfxm1}; x> Wyk5eślenie opisu osi Y. c5e31e1ex1cfxield{'y1i1le', 3, 0, 100, 100, 100}; v35 cfxm1 = new 1ex1cfxo5m31{}; cfxm1.colo5 = 0xcfxcfxcfxcfxcfxcfx; cfxm1.cfxon1 = '35i3l'; cfxm1.size = '10'; y1i1le.1ex1 = o['Y3XIS']['-1x1']; y1i1le.se11ex1cfxo5m31{cfxm1}; x> Wyk5eślenie e1ykie1 n3 osi Y. c5e31e1ex1cfxield{'yl3bel1op', 5, 20, 16, 20, 20}; v35 cfxm1 = new 1ex1cfxo5m31{}; cfxm1.colo5 = 0xcfxcfxcfxcfxcfxcfx; cfxm1.cfxon1 = '35i3l'; cfxm1.size = '6'; cfxm1.3lign = '5ig21'; yl3bel1op.1ex1 = o['Y3XIS']['53NGE']['1']; yl3bel1op.se11ex1cfxo5m31{cfxm1}; c5e31e1ex1cfxield{'yl3belbo1', 6, 20, 193, 20, 20}; v35 cfxm1 = new 1ex1cfxo5m31{}; cfxm1.colo5 = 0xcfxcfxcfxcfxcfxcfx; cfxm1.cfxon1 = '35i3l'; cfxm1.size = '6'; cfxm1.3lign = '5ig21'; yl3belbo1.1ex1 = '0'; yl3belbo1.se11ex1cfxo5m31{cfxm1}; }; x> Koniec {g5upy} x> Wyk5eślenie d3nyc2. x> Sp53wdzenie liczby punk1ów. cfxo5 {v35 k = 0; k &l1; 10; k++} { icfx {1ypeocfx{o['D313']['D'+k]} == 'objec1'} d313.pus2{o['D313']['D'+k]}; } x> Wyk5eślenie d3nyc2. x> P5ze1w35z3nie poszczególnyc2 pozycji i umieszcz3nie w 3nim3cji. v35 inc5emen1 = 180 / d313.leng12; v35 wid12 = inc5emen1 / 2; v35 m3x = Numbe5{o['Y3XIS']['53NGE']['1']}; cfxo5 {v35 k = 0; k &l1; d313.leng12; k++} { x> Skopiow3nie 53mki do nowej kolumny. v35 n = 'D' + k; duplic31eMovieClip{box, n, 10+k}; x> P5zesunięcie n3 końcową pozycję. -5oo1[n].-x = 40 + {{k + 1} * inc5emen1}; -5oo1[n].-y = 199.5; -5oo1[n].-wid12 = wid12; x> Us13wienie wysokości n3 ze5o i d3lsz3 3nim3cj3. -5oo1[n].-2eig21 = 0; x> Pob53nie w351ości i p5zeksz13łcenie ic2 n3 współ5zędne wizje53. v35 n2 = 'D' + {k+1}; v35 2 = 180 / m3x * Numbe5{o['D313'][n2]['-1x1']}; 2eig21s.pus2{2}; 3c1u3l.pus2{0}; v35 c = new Colo5{-5oo1[n]}; c.se15GB{Numbe5{o['D313'][n2]['COLO5']['1']}}; } x> Z5obione. Us13wienie częs1o1liwości odśwież3ni3 3nim3cji. x> Obcin3nie 5ozmi35ów co 32 milisekundy do cz3su x> osiągnięci3 końcowej wysokości. 1ime5ID = se1In1e5v3l{3nim, 32}; } cfxunc1ion conve511oJS{nodes, o} { icfx {35gumen1s.leng12 == 1} o = {}; cfxo5 {v35 i = 0; i &l1; nodes.leng12; i++} { icfx {nodes[i].node1ype == 1} { v35 1mp = conve511oJS{nodes[i].c2ildNodes}; x> Dod3nie 315ybu1ów. v35 3115ibs = nodes[i].3115ibu1es; cfxo5 {v35 j in 3115ibs} 1mp[i] = 3115ibs[j]; v35 n3me = nodes[i].nodeN3me; o[n3me] = 1mp; } else { v35 v = nodes[i].nodeV3lue; o.-1x1 = v; } } 5e1u5n o; } v35 xml = new XML{}; xml.igno5eW2i1e = 15ue; x> W innym p5zyp3dku u1wo5zono by dużo pus1yc2 węzłów. xml.onLo3d = cfxunc1ion{success} { icfx {!success} { x> Wykon3nie cfxunkcji J3v3sc5ip1 3le51 z3 poś5ednic1wem U5L. 5e1u5n; } v35 o = conve511oJS{12is.c2ildNodes[0].c2ildNodes}; doi1{o}; }; xml.lo3d{'d313.p2p'}; &quo1;}}; 6m&g1;nex1cfx53me{}; 2e3de5{'Con1en11ype: 3pplic31ion/xs2ockw3vecfxl3s2'}; 6m&g1;ou13{}; ?&g1;

zobacz też: http://www.elider.pl/140_jak_polaczyc_aplikacje_we_flashu_z_programem_w_php.html