[MySQL][PHP] Wykres highcharts zmiana tekstu na ikonki Opcje

[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

[PHP] pobierz, plaintext 
<?php
$con=mysql_connect('localhost','brzanek_brzanek','dj4403dj');
mysql_query("SET NAMES utf8");
mysql_select_db("brzanek_weather", $con);
 
$query = mysql_query("
SELECT * FROM wea_forecast WHERE city_id=1 LIMIT 0 , 30
");
//$query = mysql_query("SELECT * FROM choszczno WHERE DAY(data) = DAY(CURRENT_DATE()) AND MONTH(data) = MONTH(CURRENT_DATE())");
//$query = mysql_query("SELECT * FROM choszczno WHERE MONTH(data) = MONTH(CURRENT_DATE()) AND YEAR(data) = YEAR(CURRENT_DATE())");
$category = array();
$category['name'] = 'Data';
 
$series1 = array();
$series1['name'] = 'Temp. max';
 
$series2 = array();
$series2['name'] = 'Temp. min';
 
$series3 = array();
$series3['name'] = 'Opady';
 
 
while($r = mysql_fetch_array($query)) {
    $category['data'][] = $r['icon'];
    $series1['data'][] = $r['temp_high'];
    $series2['data'][] = $r['temp_low'];
    $series3['data'][] = $r['condition'];   
}
 
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
 
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?> 
[PHP] pobierz, plaintext 

setup5.js

[PHP] pobierz, plaintext 
$(document).ready(function() {
			var options = {
	            chart: {
	                renderTo: 'sales5',
 
	                type: 'spline'
	            },
	            title: {
				text: 'Szczecin prognoza na 10 dni.',
			},
			subtitle: {
				text: '',
			},
	            xAxis: {
	                categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
	            },
	            yAxis: {
	                title: {
	                    text: ''
	                },
	                labels: {
	                    overflow: 'justify'
	                }
	            },
	            tooltip: {
	                formatter: function() {
	                        return '<b>'+ this.series.name +'</b><br/>'+
	                        this.x +': '+ this.y + '°C';
	                }
	            },
	            legend: {
	                borderWidth: 0
	            }, 
	            plotOptions: {
 
                series: {
                    cursor: 'pointer' + '°',  
                    marker: {
                        lineWidth: 1
                    }
                }
            },
	            series: []
	        }
 
	        $.getJSON("js/data5.php", function(json) {
				options.xAxis.categories = json[0]['data'];
	        	options.series[0] = json[1];
	        	options.series[1] = json[2];
	        	//options.series[2] = json[3];
		        chart = new Highcharts.Chart(options);
	        });
	    });
[PHP] pobierz, plaintext 

Kombinowałem coś z tym

[PHP] pobierz, plaintext 
$.getJSON("js/data5.php", function(json) {
			options.xAxis.categories = json[0]['data'];
	        	options.series[0] = json[1];
	        	options.series[1] = json[2];
	        	//options.series[2] = json[3];
		        chart = new Highcharts.Chart(options);
	        });
[PHP] pobierz, plaintext 

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

Z góry dziękuję za pomoc.

Ten post edytował brzanek 4.03.2016, 09:58:48

[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

[PHP] pobierz, plaintext 
labels: {
            useHTML:true,
            formatter:function() {
                return '<img src="http://pogoda-zachodniopomorskie.pl/fp-weather/img/wea-icons/24/rain.png">';
            }
        }
[PHP] pobierz, plaintext 

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.

[PHP] pobierz, plaintext 
labels: {
            useHTML:true,
            formatter:function() 
			$.getJSON("js/data5.php", function(json){
                return '<img src="http://pogoda-zachodniopomorskie.pl/fp-weather/img/wea-icons/24/'json[0]['data']'.png">';
            }
        }
[PHP] pobierz, plaintext