javascript - Indsæt data fra CSV-fil i JavaScript - Udvikleren.dk

Tags: javascript

Bruger #11199 @ 23.06.10 21:40

Hejsa,

Jeg har et stort problem idet jeg har en CSV-fil med nogle dataer ligesom følgende:

2010.05.01, 5,67
2010.05.02, 5,66
2010.05.03, 5,66
2010.05.04, 5,68
2010.05.05, 5,69
2010.05.06, 5,72
og så videre...

Det er dato og kurs på en valuta. Datoen og kursen skal jeg så have sat ind i et script (Master-detail chart fra Highcharts). Datoen skal indsætte i x-akslen, og kursen i y-akslen.

Koden som data fra CSV-filen skal bruges i ser sådan her ud:

Kode

var chart = new Highcharts.Chart({
  chart: {
      renderTo: 'container',
      zoomType: 'x',
      margin: [330, 30, 30, 80],
      events: {
        // on load of the master chart, add the detail chart
        load: function() {
            var detailContainer = jQuery('#container').prepend(
                  '<div id="details-chart"></div>'
              ),
              detailStart = Date.UTC(2008, 7, 1),
              detailData = [];
            
            // reverse engineer the last part of the data
            jQuery.each(this.series[0].data, function(i, point) {
              if (point.x >= detailStart) {
                  detailData.push(point.y);
              }
            });
            
            // create a detail chart referenced by a global variable
            detailChart = new Highcharts.Chart({
              chart: {
                  borderWidth: 0,
                  backgroundColor: null,
                  renderTo: 'details-chart',
                  height: 330,
                  margin: [80, 30, 20, 80],
                  style: {
                    position: 'absolute'
                  }
              },
              credits: {
                  style: {
                    top: '20px',
                    right: '30px'
                  }
              },
              title: {
                  text: 'Historical USD to EUR Exchange Rate'
              },
              subtitle: {
                  text: 'Select an area by dragging across the lower chart'
              },
              xAxis: {
                  type: 'datetime'
              },
              yAxis: {
                  title: null,
                  maxZoom: 0.1
              },
              tooltip: {
                  formatter: function() {
                    return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
                        Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>'+
                        '1 USD = '+ Highcharts.numberFormat(this.y, 2) +' EUR';
                  }
              },
              legend: {
                  enabled: false
              },
              plotOptions: {
                  series: {
                    marker: {
                        enabled: false,
                        states: {
                          hover: {
                              enabled: true,
                              radius: 3
                          }
                        }
                    }
                  }
              },
              series: [{
                  name: 'USD to EUR',
                  pointStart: detailStart,
                  pointInterval: 24 * 3600 * 1000,
                  data: detailData
              }]

            });
        },
        // listen to the selection event on the master chart to update the 
        // extremes of the detail chart
        selection: function(event) {
            var extremesObject = event.xAxis[0],
              min = extremesObject.min,
              max = extremesObject.max,
              detailData = [],
              xAxis = this.xAxis[0];
            
            // reverse engineer the last part of the data
            jQuery.each(this.series[0].data, function(i, point) {
              if (point.x > min && point.x < max) {
                  detailData.push({
                    x: point.x,
                    y: point.y
                  });
              }
            });
            
            // move the plot bands to reflect the new detail span
            xAxis.removePlotBand('mask-before');
            xAxis.addPlotBand({
              id: 'mask-before',
              from: Date.UTC(2006, 0, 1),
              to: min,
              color: 'rgba(0, 0, 0, 0.2)'
            });
            
            xAxis.removePlotBand('mask-after');
            xAxis.addPlotBand({
              id: 'mask-after',
              from: max,
              to: Date.UTC(2008, 11, 31),
              color: 'rgba(0, 0, 0, 0.2)'
            });
            
            
            detailChart.series[0].setData(detailData);
            
            return false;
        }
      }
  },
  title: {
      text: null
  },
  xAxis: {
      type: 'datetime',
      showLastTickLabel: true,
      maxZoom: 14 * 24 * 3600000, // fourteen days
      minPadding: 0.01,
      maxPadding: 0.01,
      plotBands: [{
        id: 'mask-before',
        from: Date.UTC(2006, 0, 1),
        to: Date.UTC(2008, 7, 1),
        color: 'rgba(0, 0, 0, 0.2)'
      }],
      title: {
        text: null
      }
  },
  yAxis: {
      gridLineWidth: 0,
      labels: {
        enabled: false
      },
      title: {
        enabled: false
      },
      min: 0.6,
      showFirstLabel: false
  },
  tooltip: {
      formatter: function() {
        return false;
      }
  },
  legend: {
      enabled: false
  },
  credits: {
      enabled: false
  },
  plotOptions: {
      series: {
        fillColor: {
            linearGradient: [0, 0, 0, 70],
            stops: [
              [0, highchartsOptions.colors[0]],
              [1, 'rgba(0,0,0,0)']
            ]
        },
        lineWidth: 1,
        marker: {
            enabled: false
        },
        shadow: false,
        states: {
            hover: {
              lineWidth: 1                  
            }
        }
      }
  },

  series: [{
      type: 'area',
      name: 'USD to EUR',
      pointInterval: 24 * 3600 * 1000,
      pointStart: Date.UTC(2006, 0, 01),
      data: [
        0.8446, 0.8445, 0.8444, 0.8451,  0.8418, 0.8264,  0.8258, 0.8232,  0.8233, 0.8258, 
        0.8283, 0.8278, 0.8256, 0.8292,  0.8239, 0.8239,  0.8245, 0.8265,  0.8261, 0.8269, 
        0.7407, 0.7288, 0.7074, 0.6927, 0.7083, 0.7191, 0.719, 0.7153, 0.7156, 0.7158, 
        0.714, 0.7119, 0.7129, 0.7129, 0.7049, 0.7095
      ]
  }]
});

Koden kan også ses ved at trykke "View Options" HER. I ovenstående kode er data lagt ind manuelt og hentes ikke via en CSV-fil.

Grunden til at jeg vil benytte en CSV-fil er at den vil indeholde kurser/data for adskillige år, samt den vil blive opdateret daglig med dagens sidste kurs fra Nationalbankens XML-feed.

Håber jeg kan få lidt meget hjælp, da jeg simpelthen ikke forstår hvad jeg skal gøre.

I et andet sample på siden kan jeg se et andet chart hvor de henter data ind fra en CSV-fil. Men jeg er simpelthen ikke i stand til at "kopier" teknikken til det sample jeg skal bruge.

Kan godt trække mine dataer ind i samme sample, selvom det ser lidt underligt ud da mine dataer ikke er beregnet til den type chart. Men kan ikke dublikere det til den chart jeg vil benytte - muligvis alene fordi jeg ikke fatter hvordan jeg får defineret dataerne fra CSV-filen ud i x- og y-akslen.

Se HER hvor de trækker data ud fra en CSV-fil og ind i scriptet. Benyt evt. vis kode.

Jeg vil være evigt taknemmelig, hvis jeg kan få lidt hjælp her så jeg kan løse problemet. Det skal lige siges at jeg stort set intet aner om JavaScript og at det nok også derfor er at jeg endnu ikke har kunne løse problemet - har siddet med det 3 dage nu.

På forhånd mange tak.

Indlæg senest redigeret d. 23.06.2010 21:43 af Bruger #11199

Bruger #6565 @ 24.06.10 08:31

Hej Kim

Jeg tror din bedste mulighed er at gøre et af 2 ting.

1) Lav din "hovedside" i php/aspx/jsp (eller et andet serverside sprog) som så outputter din data i dit javascript.

2) Jeg har kigget lidt rundt på deres side med andre muligheder, og der er f.eks en der hedder "Ajax loaded data" som indeholder følgende property som du måske kan benytte dig af, dog kræver den også at du har noget serverside som kan sende output som JSON.

Kode

series: [{
      name: 'Tokyo',
      dataURL: 'tokyo.json'
}]

Bruger #11199 @ 24.06.10 18:25

Hejsa Anders,

Ok, jeg har siddet lidt og boret lidt i det du er inde på og tror jeg er blevet lidt klogere.

Jeg skulle bruge chartet på en php/mysql side til at vise den historiske kurs mellem kroner og en anden valuta.

Da der kommer en ny kurs fra nationalbanken hver hverdag (ikke lørdag, søndag og andre helligdage), så havde jeg den idé at lave et CRON-job som lagde kursen ind i database én gang dagligt, og så lave et udtræk til en JSON-fil. Som så skulle kunne læses ind i scriptet.

Hvordan vil du anbefale at jeg bygger tabellen op i database til en dato og kurs ?

Først havde jeg jo tænkt på en opbygning ala denne:
2010.05.01, 5,67
2010.05.02, 5,66
2010.05.03, 5,66
2010.05.04, 5,68
2010.05.05, 5,69
2010.05.06, 5,72

Som jeg var inde på i indlæg 1, men det er måske en dum måde at gøre det på ? Vil det være bedre at gemme datoen med time eller microtime ?

Nu har jeg ikke rigtigt forstand på JSON, som er helt nyt for mig, så ved endnu ikke helt hvordan sådan en JSON-fil kan være opbygget - altså bortset fra det eksempel jeg har set HER.

Vil derfor også spørge om følgende kode som jeg har brugt til at lave CSV-filen kan omskrives nogenlunde let til at skrive en JSON-fil i stedet.

Kode

<?php
$conn = mysql_connect("Server", "User", "Password") or die(mysql_error());
mysql_select_db("Database") or die(mysql_error());

$sql = "SELECT * FROM dkkkurs ORDER BY kurs_id ASC";
$result = mysql_query($sql) or die(mysql_error());

$handle = fopen("filnavn.csv", "w");

while ($row = mysql_fetch_assoc($result))
{
    $line = $row["kurs_date"];
    $line .= "," . $row["kurs_kurs"];
    $line .= "\n";

    fwrite($handle, $line);
}

fclose($handle);

mysql_free_result($result);
?>

Undskyld de mange måske lidt tåbelige spørgsmål. Prøver at lære og forstå det samtidigt.

Indlæg senest redigeret d. 24.06.2010 18:26 af Bruger #11199

Bruger #6565 @ 25.06.10 08:51

Hej Kim

Efter at havde læst dit indlæg i forgårs lavede jeg følgende stykke kode, for at se hvor besværligt det var at bruge.

PHP kode

 <?php
 // Nationalbankens 5 dages feed
 $xml_url = 'http://www.nationalbanken.dk/dndk/valuta.nsf/valuta-hist.xml';
 
 // Hvilken valuta der skal hentes ud (f.eks. eur)
 $val = strtoupper($_GET['val']);
 
 // Loader XML dokumentet
 $xml = simplexml_load_file($xml_url);
 if ($xml) {
         $values_x = array();
         $values_y = array();
 
         // Gennemløb XML dokumentet og hente de korrekte værdier ud
         foreach ($xml->Cube->Cube as $feed_day) {
                 array_push($values_y, $feed_day['time']);
                 foreach ($feed_day->Cube as $currency) {
                         if ($currency['currency'] == $val) {
                                 array_push($values_x,  str_replace(',', '.', $currency['rate']));
                         }
                 }
         }
 
         // Udskriv resultatet som JSON
         echo join(',', array_reverse($values_y)) . "\n";
         echo join(',', array_reverse($values_x));
 } else {
         echo json_encode('Error loading xml feed');
 }

Jeg håber du måske kan bruge ovenstående til at blive lidt klogere, det kan også bruges som udgangspunkt til at lave dit cronjob som henter kurserne.

Mht. database struktur ville jeg nok vælge at lave en database der ser sådan ud:

Kode

CREATE TABLE  `demosites`.`kurser` (
        `id` INT NOT NULL ,
        `date` DATE NOT NULL ,
        `code` CHAR( 4 ) NOT NULL ,
        `desc` CHAR( 50 ) NOT NULL ,
        `rate` DECIMAL( 10,2 ) NOT NULL ,
PRIMARY KEY (  `id` )
) ENGINE = MYISAM

Når du så skal hente det ud af databasen ville jeg gøre det på følgende måde.

PHP kode

 <?php
 $conn = mysql_connect("Server", "User", "Password") or die(mysql_error());
 mysql_select_db("Database") or die(mysql_error());
 
 $sql = "SELECT date,rate FROM kurser WHERE `code` = '".mysql_real_escape_string($_GET['code'])."'";
 $result = mysql_query($sql) or die(mysql_error());
 
 $json = array();
 while ($row = mysql_fetch_assoc($result))
 {
     array_push($json, $row);
 }
 
 mysql_free_result($result);
 
 echo json_encode($json);
 ?>

Og du behøver skam ikke undskylde de mange spørgsmål, det er jo den eneste måde man kan lære noget nyt.

Indsæt data fra CSV-fil i JavaScript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler