Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [MySQL][PHP] Wykres highcharts zmiana tekstu na ikonki
Forum PHP.pl > Forum > Przedszkole
brzanek
Witam stworzyłem wykres pobierający dane z bazy danych odnośnie temperatur na najbliższe 10 dni.
Tak on wygląda.
http://pogoda-zachodniopomorskie.pl/forecast_panel/index.php

Tak wygląda tabela bazy danych

Jak widać na wykresie na dole są dane z tabeli icon. Chciałbym ten tekst zastąpić odpowiednią ikoną z serwera ftp.
Czyli np. napis clear zastąpić ikoną http://pogoda-zachodniopomorskie.pl/fp-wea...ns/40/clear.png
Tak wyglądają pliki odpowiadające za wykres.
data5.php
  1. <?php
  2. $con=mysql_connect('localhost','brzanek_brzanek','dj4403dj');
  3. mysql_query("SET NAMES utf8");
  4. mysql_select_db("brzanek_weather", $con);
  5.  
  6. $query = mysql_query("
  7. SELECT * FROM wea_forecast WHERE city_id=1 LIMIT 0 , 30
  8. ");
  9. //$query = mysql_query("SELECT * FROM choszczno WHERE DAY(data) = DAY(CURRENT_DATE()) AND MONTH(data) = MONTH(CURRENT_DATE())");
  10. //$query = mysql_query("SELECT * FROM choszczno WHERE MONTH(data) = MONTH(CURRENT_DATE()) AND YEAR(data) = YEAR(CURRENT_DATE())");
  11. $category = array();
  12. $category['name'] = 'Data';
  13.  
  14. $series1 = array();
  15. $series1['name'] = 'Temp. max';
  16.  
  17. $series2 = array();
  18. $series2['name'] = 'Temp. min';
  19.  
  20. $series3 = array();
  21. $series3['name'] = 'Opady';
  22.  
  23.  
  24. while($r = mysql_fetch_array($query)) {
  25. $category['data'][] = $r['icon'];
  26. $series1['data'][] = $r['temp_high'];
  27. $series2['data'][] = $r['temp_low'];
  28. $series3['data'][] = $r['condition'];
  29. }
  30.  
  31. $result = array();
  32. array_push($result,$category);
  33. array_push($result,$series1);
  34. array_push($result,$series2);
  35. array_push($result,$series3);
  36.  
  37. print json_encode($result, JSON_NUMERIC_CHECK);
  38. ?>


setup5.js
  1. $(document).ready(function() {
  2. var options = {
  3. chart: {
  4. renderTo: 'sales5',
  5.  
  6. type: 'spline'
  7. },
  8. title: {
  9. text: 'Szczecin prognoza na 10 dni.',
  10. },
  11. subtitle: {
  12. text: '',
  13. },
  14. xAxis: {
  15. categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  16. },
  17. yAxis: {
  18. title: {
  19. text: ''
  20. },
  21. labels: {
  22. overflow: 'justify'
  23. }
  24. },
  25. tooltip: {
  26. formatter: function() {
  27. return '<b>'+ this.series.name +'</b><br/>'+
  28. this.x +': '+ this.y + '°C';
  29. }
  30. },
  31. legend: {
  32. borderWidth: 0
  33. },
  34. plotOptions: {
  35.  
  36. series: {
  37. cursor: 'pointer' + '°',
  38. marker: {
  39. lineWidth: 1
  40. }
  41. }
  42. },
  43. series: []
  44. }
  45.  
  46. $.getJSON("js/data5.php", function(json) {
  47. options.xAxis.categories = json[0]['data'];
  48. options.series[0] = json[1];
  49. options.series[1] = json[2];
  50. //options.series[2] = json[3];
  51. chart = new Highcharts.Chart(options);
  52. });
  53. });

Kombinowałem coś z tym
  1. $.getJSON("js/data5.php", function(json) {
  2. options.xAxis.categories = json[0]['data'];
  3. options.series[0] = json[1];
  4. options.series[1] = json[2];
  5. //options.series[2] = json[3];
  6. chart = new Highcharts.Chart(options);
  7. });

Ale nie wychodziło
Efekt końcowy chcę uzyskać coś podobnego do tego.

Z góry dziękuję za pomoc.
Kishin
http://stackoverflow.com/questions/2386993...s-in-highcharts

o to chodzi?
brzanek
Chyba nie. Tam zastosowane są ikonki stałe a ja nazwy ikon muszę pobierać z bazy danych w zależności od warunków i wyświetlić je pod wykresem tak jak pokazałem to na ostatnim obrazku.
nospor
Przeciez ten przyklad:
Kod
},
    labels: {
        useHTML: true,
        formatter: function () {
            return {
                'Google Plus': '<i class="icon-google-plus"></i>',
                    'Twitter': '<i class="icon-twitter"></i>',
                    'Facebook': '<i class="icon-facebook"></i>',
                    'Pinterest': '<i class="icon-pinterest"></i>',
                    'Youtube': '<i class="icon-youtube"></i>'
            }[this.value];
        }
    }

robi dokladnie co pottrzeebujesz... Jest ustawiony na sztywno to co? Przeciez to ty generujesz kod js. nikt ci nie broni wygenerowac go napodstawie danych z bazy
brzanek
nospor pewnie masz rację ale jak mam to użyć w moim przypadku i w jakim miejscu to wstawić?

Zamieniłem tą funkcję labels ale nic mi to nie dało. Zmieniałem też dane w xAxis ale też nic to nie dawało. Gdzie umieścić ten kod?

Zmieniłem to
  1. labels: {
  2. useHTML:true,
  3. formatter:function() {
  4. return '<img src="http://pogoda-zachodniopomorskie.pl/fp-weather/img/wea-icons/24/rain.png">';
  5. }
  6. }

Na wykresie oczywiście wyświetla się ikona ale nie wiem jak zrobić aby pobierało nazwę ikony z bazy danych. Czyli jak zastąpić rain nazwą ikony z bazy danych.

Takie zastosowanie nie działa.
  1. labels: {
  2. useHTML:true,
  3. formatter:function()
  4. $.getJSON("js/data5.php", function(json){
  5. return '<img src="http://pogoda-zachodniopomorskie.pl/fp-weather/img/wea-icons/24/'json[0]['data']'.png">';
  6. }
  7. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.