Notifikationer

Markér alle som læst Log ud

angelenglen Nybegynder

16. november 2012 - 14:56 Der er 8 kommentarer og
1 løsning

Javascript grafer (jQuery?)

Jeg har et datasæt, som jeg har brug for at få visualiseret på to måder.

Jeg har lavet et lille mockup af hvordan jeg ca. tænker der skal se ud, her: http://angel.thespirit.dk/graf1.jpg

Datasættet dækker 4 afdelinger over 3 uger: sidste uge, denne uge og næste uge.

I datasættet har jeg følgende data tilgængelige for hver afdeling:

For hver af de 21 datoer:
Antal solgte varer (heltal)
Antal solgte ordrer (heltal)
Omsætning (decimal tal)
Ugenummer (fx 46)
Ugedag (1 = mandag, osv)
Årstal (fx 2012)

Den øverste graf viser de fire afdelinger sammenlignet, med hver sin farve pr. afdeling.

Den nederste graf viser det sammmenlagte tal for sidste uge og næste uge for alle afdelinger.

Alle de tre søjler der viser sidste uge skal være grå.
Søjlerne for næste uge skal være grønne hvis værdien overstiger tilsvarende søjle i sidste uge, ellers røde.

Jeg har haft kigget på FLOT: https://github.com/flot/flot/wiki/Plugin-Repository
- men jeg kan ikke rigtigt finde ud af at bruge det, og kan ikke overskue hvordan jeg skal opsætte datasættet for at få det ønskede resultat.

Så jeg håber nogen kan hjælpe lidt - det behøver ikke være lavet i FLOT, det er bare et forslag.

Det behøver heller ikke nødvendigvis være det endelige resultat, men nogle skub i den rigtige retning værdsættes også.

Synes godt om

angelenglen Nybegynder

16. november 2012 - 14:59 #1

Beskrivelsen af graf nummer to var lidt forkert.
Den skal i virkeligheden sammenligne en dags tal med samme dag sidste år.

Men det er egentligt irrelevant hvilke datoer der sammenlignes, eftersom der jo er tale om fiktive data i dette eksempel.

Synes godt om

jokkejensen Novice

16. november 2012 - 22:26 #2

Kender du til:

https://developers.google.com/chart/interactive/docs/examples#customized_branding

/J

Synes godt om

angelenglen Nybegynder

16. november 2012 - 22:45 #3

Det ser umiddelbart ret fint ud - kan den bruges uden forbindelse til internettet?

Det er ikke et krav, men at foretrække, nemlig.

Synes godt om

jokkejensen Novice

16. november 2012 - 23:25 #4

nej kig på

http://www.filamentgroup.com/examples/jqueryui-visualize/
/J

Synes godt om

angelenglen Nybegynder

20. november 2012 - 15:43 #5

Uha de ser interessante ud!

Dem prøver jeg lige om jeg kan få til at spille med mine data :-D

Synes godt om

angelenglen Nybegynder

21. november 2012 - 11:01 #6

Hmm jeg løb ind i lidt problemer, jeg kan ikke få den vandrette beskrivelse til at se ud som jeg ønsker.

Herunder er det eksempel jeg er kommet frem til, og neden under er et eksempel på hvad jeg ønsker at opnå (photoshoppet)

http://angel.thespirit.dk/filament/ (html side)

Alle filer der er nødvendige for at kunne reproducere dette lokalt, er her:
http://angel.thespirit.dk/filament/filament.zip (zip)

Håber nogen kan hjælpe med at få det opstillet korrekt :-)

Mit foreløbige datagrundlag:

<table>
    <caption>Solgte varer - Uge 44, 45, 46</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col" colspan="1">Uge 44</th>
            <th scope="col" colspan="1">Uge 45</th>
            <th scope="col" colspan="1">Uge 46</th>
            <th scope="col" colspan="1">Uge 44</th>
            <th scope="col" colspan="1">Uge 45</th>
            <th scope="col" colspan="1">Uge 46</th>
            <th scope="col" colspan="1">Uge 44</th>
            <th scope="col" colspan="1">Uge 45</th>
            <th scope="col" colspan="1">Uge 46</th>
            <th scope="col" colspan="1">Uge 44</th>
            <th scope="col" colspan="1">Uge 45</th>
            <th scope="col" colspan="1">Uge 46</th>
            <th scope="col" colspan="1">Uge 44</th>
            <th scope="col" colspan="1">Uge 45</th>
            <th scope="col" colspan="1">Uge 46</th>
            <th scope="col" colspan="1">Uge 44</th>
            <th scope="col" colspan="1">Uge 45</th>
            <th scope="col" colspan="1">Uge 46</th>
            <th scope="col" colspan="1">Uge 44</th>
            <th scope="col" colspan="1">Uge 45</th>
            <th scope="col" colspan="1">Uge 46</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">København</th>
            <td>84</td>
            <td>61</td>
            <td>49</td>
            <td>48</td>
            <td>67</td>
            <td>56</td>
            <td>73</td>
            <td>109</td>
            <td>132</td>
            <td>134</td>
            <td>170</td>
            <td>194</td>
            <td>171</td>
            <td>185</td>
            <td>201</td>
            <td>212</td>
            <td>194</td>
            <td>170</td>
            <td>166</td>
            <td>174</td>
            <td>202</td>
        </tr>
        <tr>
            <th scope="row">Odense</th>
            <td>754</td>
            <td>725</td>
            <td>727</td>
            <td>720</td>
            <td>728</td>
            <td>710</td>
            <td>740</td>
            <td>728</td>
            <td>699</td>
            <td>702</td>
            <td>721</td>
            <td>706</td>
            <td>691</td>
            <td>665</td>
            <td>622</td>
            <td>602</td>
            <td>590</td>
            <td>584</td>
            <td>609</td>
            <td>625</td>
            <td>616</td>
        </tr>
        <tr>
            <th scope="row">Slagelse</th>
            <td>243</td>
            <td>228</td>
            <td>209</td>
            <td>192</td>
            <td>220</td>
            <td>210</td>
            <td>204</td>
            <td>167</td>
            <td>183</td>
            <td>177</td>
            <td>182</td>
            <td>165</td>
            <td>168</td>
            <td>158</td>
            <td>135</td>
            <td>148</td>
            <td>148</td>
            <td>142</td>
            <td>122</td>
            <td>155</td>
            <td>142</td>
        </tr>
        <tr>
            <th scope="row">Århus</th>
            <td>388</td>
            <td>380</td>
            <td>412</td>
            <td>427</td>
            <td>425</td>
            <td>421</td>
            <td>383</td>
            <td>377</td>
            <td>371</td>
            <td>370</td>
            <td>394</td>
            <td>416</td>
            <td>446</td>
            <td>458</td>
            <td>452</td>
            <td>462</td>
            <td>487</td>
            <td>463</td>
            <td>478</td>
            <td>517</td>
            <td>539</td>
        </tr>
    </tbody>
</table>

Synes godt om

montago Praktikant

20. december 2012 - 11:56 #7

du kan bruge jqPlot : www.jqplot.com

bladre igennem samples og styk dine data sammen til Arrays... så de lige til at smide ind i plot-maskineriet...

Synes godt om

angelenglen Nybegynder

20. december 2012 - 12:01 #8

Nice, det vil jeg prøve.

I må gerne lægge nogle svar, for jeg vil gerne lukke dette spørgsmål snart :-)

Synes godt om

montago Praktikant

20. december 2012 - 12:07 #9

hubidut

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS