CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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

16:00

Ugen i tech: Her er den nye kandidat til at blive Europas billigste elbil / Skræddersy din egen AI-bot med Google

30/08

Test af Tesla Model 3 Performance: Aldrig har man fået så meget sportsvogn til så få penge

30/08

Dell vil frasælge cybersikkerhedsfirma efter flere forfejlede forsøg

30/08

Danmarks to store it-styrelser skal reduceres markant: Skal samlet sige farvel til hver fjerde stilling i de kommende år

30/08

Nørgaards kæmpe-comeback: ENDELIG får vi et ministerium for civilforsvar - og et ægte digitaliseringsministerium UDEN ligestilling

30/08

Du kan score op til 1,7 millioner kroner på at finde en enkelt sårbarhed

30/08

Nu når en af Danmarks helt store GDPR-retssager til vejs ende: Står over for bødekrav på 800.000 kroner

30/08

CrowdStrike med første regnskab efter globalt nedbrud: Har kostet selskabet 800 millioner kroner

30/08

Regeringen vil reducere bevilling til Datatilsynet med millioner: Skal bruge væsentligt færre penge på løn og tilsyn

30/08

Selskab med 40.000 ansatte dropper VMware efter ballade - vælger anden løsning

30/08

Politiet klar til at skrive kontrakt på nyt dansk fingeraftrykssystem frem til 2035: Leverandøren er fundet - nu mangler blot pengene

Vis flere artikler

IT-JOB

Rigsadvokaten

Digitaliseringskonsulent til digitalisering af straffesagskæden

Danoffice IT

Hybrid Cloud Infrastructure Architect, Managed Services

Euro Accident

Technical requirement specialist (forsikringsområdet)

Wahlgreen IT ApS

Vi er på udkig efter en dygtig og selvstændig IT-konsulent i Bagsværd

Domstolsstyrelsen

Service Delivery Manager til styring af stor it-driftkontrakt

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 19:51	Hvordan slukker man tastatur lys på en PC (AMD Ryzen 5 3550H) Af Philip Kuhlmann i PC
I går 14:35	eftersøger pinnacle14 ultimate Af Janove i Foto & video
I går 13:45	Langsom forbindelse gennem ethernetkabel Af Esben i LAN/WAN
31/0823:37	Poe strøm Af lurup i LAN/WAN
31/0814:46	GIF-EDITOR Af snestrup2000 i Billedbehandling