Highcharts vykresleni hodnot v grafu

parti
Člen | 117
+
0
-

Ahoj nemate nekdo nejakou zkusenost z grafama? Potreboval bych poradit jak vykreslit data do grafu. Data tam mam ale nevim jak je vykreslit.

Promnena data obsahuje data ale nevi jak si je tam predat dal.

<script>
//			jQuery(function(){
		var data = {$data};
		//console.log(data["labels"]);
		var chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container',
				type: 'line'
			},
			title: {
				text: 'Monthly Average Temperature'
			},
			subtitle: {
				text: 'Source: WorldClimate.com'
			},
			xAxis: {
				type: "datetime"
			},
			yAxis: {
				title: {
					text: 'Temperature (°C)'
				}
			},
			plotOptions: {
				line: {
					dataLabels: {
						enabled: true
					},
					enableMouseTracking: false
				}
			},
			series: [
				{
					name: 'Count',
					data: data
				},
				{
					name: 'test',
					data: data
				}]
		});
		// });
	</script>

Dekuji za radu.

CZechBoY
Člen | 3608
+
0
-

Ja si ukladam cely pole series a predavam ho rovnou do javascriptu.

parti
Člen | 117
+
0
-

Ahoj @CZechBoY a nemuzes mi prosim ukazat jak to myslis?

CZechBoY
Člen | 3608
+
0
-

Konkrétně nevim co bych ti měl ukázat, tak ti ukážu třeba presenter a šablonu.

public function renderDefault()
{
	$this->template->series = [
		(object)[
			'name' => 'test',
			'data' => [0, 1, 2, 3]
		]
	];
}
<script>
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                type: "datetime"
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: JSON.parse({json_encode($series)});
        });
        // });
    </script>
parti
Člen | 117
+
0
-

@CZechBoY No nevim vyzkousel jsem uz tolik moznosti.Ty data tam jsou ale se jenom nevykresli. Posilam vypis jak to mam.
Ale zase chapu ze to neni jednodchy poradit pokud si nato nemuzes sahnout atd..

var data = "{\"labels\":[\"2009-06-16\",\"2009-06-17\",\"2009-06-23\",\"2009-06-24\",\"2009-06-25\",\"2009-06-26\",\"2009-06-30\",\"2009-07-03\",\"2009-07-08\",\"2009-07-15\",\"2009-07-24\",\"2009-08-06\",\"2009-08-07\",\"2009-08-20\",\"2009-08-21\",\"2009-08-27\",\"2009-10-14\",\"2009-10-15\",\"2009-10-16\",\"2009-10-19\",\"2009-10-20\",\"2009-10-28\",\"2009-11-12\",\"2009-11-19\",\"2009-12-16\",\"2009-12-17\",\"2009-12-18\",\"2010-01-07\",\"2010-02-12\",\"2010-02-15\",\"2010-02-26\",\"2010-03-01\",\"2010-03-09\",\"2010-03-15\",\"2010-03-17\",\"2010-03-18\",\"2010-04-08\",\"2010-04-20\",\"2010-05-07\",\"2010-05-12\",\"2010-05-28\",\"2010-06-01\",\"2010-06-03\",\"2010-06-04\"],\"datasets\":[{\"data\":{\"test\":[149,73,111,32,1,7,21,2,60,25,1,34,4,2,2,3,27,16,5,1,5,12,10,32,13,14,2,22,4,1,2,13,5,14,29,4,17,1,13,2,25,1,19,7]},\"bakcgroundColor\":[\"rgba(75 192 192 0.4)\"]}]}";
		//console.log(data["labels"]);
		var chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container',
				type: 'line'
			},
			title: {
				text: 'Monthly Average Temperature'
			},
			subtitle: {
				text: 'Source: WorldClimate.com'
			},
			xAxis: {
				type: "datetime"
			},
			yAxis: {
				title: {
					text: 'Temperature (°C)'
				}
			},
			plotOptions: {
				line: {
					dataLabels: {
						enabled: true
					},
					enableMouseTracking: false
				}
			},
			series: JSON.parse("\"{\\\"labels\\\":[\\\"2009-06-16\\\",\\\"2009-06-17\\\",\\\"2009-06-23\\\",\\\"2009-06-24\\\",\\\"2009-06-25\\\",\\\"2009-06-26\\\",\\\"2009-06-30\\\",\\\"2009-07-03\\\",\\\"2009-07-08\\\",\\\"2009-07-15\\\",\\\"2009-07-24\\\",\\\"2009-08-06\\\",\\\"2009-08-07\\\",\\\"2009-08-20\\\",\\\"2009-08-21\\\",\\\"2009-08-27\\\",\\\"2009-10-14\\\",\\\"2009-10-15\\\",\\\"2009-10-16\\\",\\\"2009-10-19\\\",\\\"2009-10-20\\\",\\\"2009-10-28\\\",\\\"2009-11-12\\\",\\\"2009-11-19\\\",\\\"2009-12-16\\\",\\\"2009-12-17\\\",\\\"2009-12-18\\\",\\\"2010-01-07\\\",\\\"2010-02-12\\\",\\\"2010-02-15\\\",\\\"2010-02-26\\\",\\\"2010-03-01\\\",\\\"2010-03-09\\\",\\\"2010-03-15\\\",\\\"2010-03-17\\\",\\\"2010-03-18\\\",\\\"2010-04-08\\\",\\\"2010-04-20\\\",\\\"2010-05-07\\\",\\\"2010-05-12\\\",\\\"2010-05-28\\\",\\\"2010-06-01\\\",\\\"2010-06-03\\\",\\\"2010-06-04\\\"],\\\"datasets\\\":[{\\\"data\\\":{\\\"test\\\":[149,73,111,32,1,7,21,2,60,25,1,34,4,2,2,3,27,16,5,1,5,12,10,32,13,14,2,22,4,1,2,13,5,14,29,4,17,1,13,2,25,1,19,7]},\\\"bakcgroundColor\\\":[\\\"rgba(75 192 192 0.4)\\\"]}]}\"");
		});
		// });
	</script>
Michal Hlávka
Člen | 190
+
-1
-

{!=json_encode($series, JSON_PRETTY_PRINT)}

Pavel Kravčík
Člen | 1180
+
0
-

{!|noescape

CZechBoY
Člen | 3608
+
0
-

Ty tam dáváš nějaký nesmyslný položky.
Zkus do těch dát to co je v demu
http://jsfiddle.net/…/line-basic/

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
parti
Člen | 117
+
0
-

@CZechBoY tohle co jsi mi poslal funguje. Ale problem nastane pokud chci vykreslit moje data z DB. Je to jenom pocet-(osa x) a datumu-(osa y).

CZechBoY
Člen | 3608
+
0
-

@parti ukaž jak to z tý databáze taháš a vytváříš to pole series.

parti
Člen | 117
+
0
-

@CZechBoY nevim jestli inofrmace ktere ti dam budu stacit ale vynasnazim se.

Dotaz do DB

public function loadCountTester($params) {
        if (!$this->api->checkFunctionParameters(
                        $this->api->checkParam($params, true, 'team_id', 'int')
                )) {
            return FALSE;
        }
        $where = array();

        $query = "SELECT DISTINCT date (rundatetime) date, tester_name, count( tester_name ) AS count
                    FROM oat_run_archive
                    LEFT JOIN oat_check_archive ON oat_run_archive.id = oat_check_archive.oat_run_id WHERE 1=1 ";

        if (isset($params['tester_name'])) {
            $query .= "AND tester_name IN (?) ";
            $where[] = $params['tester_name'];
        }
        if (isset($params['from'])) {
            $query .= "AND rundatetime >= CONVERT_TZ(?, ?, '" . self::DEFAULT_TIMEZONE . "') ";
            $where[] = $params['from'];
            $where[] = $params['user_timezone'];
        }
        if (isset($params['to'])) {
            $query .= "AND rundatetime <= CONVERT_TZ(?, ?, '" . self::DEFAULT_TIMEZONE . "') ";
            $where[] = $params['to'];
            $where[] = $params['user_timezone'];
        }

        $query .= "GROUP BY date(rundatetime) ORDER BY tester_name, rundatetime ";

        try {
            $countTester = [];
            $result = $this->opsweb_database->queryArgs($query, $where);
            foreach ($result as $row) {
                foreach ($row as $key => $value) {
                    if ($value instanceof \DateTime) {
                        $row[$key] = $value->format(\DateTime::ATOM);
                    }
                }
                $countTester[] = $row;
            }
        } catch (\Exception $e) {
            $this->api->setError($e->getCode(), $e->getMessage());
            return false;
        }
        //dump($countTester);exit;
        return !empty($countTester) ? $countTester : array();
    }
public function loadReportingData($from, $to, $tester_name) {
        $params['team_id'] = $this->user->identity->data['ticket_manager_team']['team_id'];
        $params['from'] = $from;
        $params['to'] = $to;
        $params['tester_name'] = $tester_name;
        $params['user_timezone'] = $this->user->identity->data['timezone'];
        $result = $this->sendRequest("ReportManager", "loadCountTester", $params);
        //$result = array();
        $result = $result['data'];
        //dd($result);
        $labels = array();
        $datasets = array();
        //$result = array();

        foreach ($result as $item) {
            $date = (new \DateTime($item['date']))->format('Y-m-d');
            $labels[] = $date;
            $datasets[$item['tester_name']][] = $item['count'];
        }
        // $params['count']= $item['count'];
//         dd($params);
        if ($this->getErrors()) {
            throw new ApiException($this->getErrors());
        }
        //dd($datasets, $labels);
        return json_encode(array('labels' => $labels,
            'datasets' => array(array('data' => $datasets, 'bakcgroundColor' => array('rgba(75 192 192 0.4)')))));
    }
<div class="panel-body">
                       <div id="container" style="width:100%; height: 400px;" data-data="{$data}"></div>
                       {*<canvas id="dsh-oat-history-chart" height="300px" data-data="{$data}"></canvas>*}
                   </div>

snad jsem tam dal vsechno.

parti
Člen | 117
+
0
-

@CZechBoY jenom pro informaci udelal jsem si concole.log(data) a vratilo mi tohle

console.log(data)
VM1229:1 {"labels":["2009-02-13","2009-02-16","2009-02-27","2009-03-03","2009-03-05","2009-03-10","2009-03-11","2009-03-12","2009-03-13","2009-03-16","2009-03-17","2009-03-20","2009-03-23","2009-03-24","2009-03-25","2009-03-26","2009-03-27","2009-03-30","2009-04-02","2009-04-03","2009-04-06","2009-04-07","2009-04-08","2009-04-10","2009-04-17","2009-04-20","2009-04-22","2009-04-23","2009-04-24","2009-04-28","2009-04-30","2009-05-04","2009-05-11","2009-05-12","2009-05-15","2009-05-18","2009-05-21","2009-05-22","2009-05-25","2009-05-27","2009-05-28","2009-05-29","2009-06-02","2009-06-04","2009-06-08","2009-06-09","2009-06-10","2009-06-11","2009-06-12","2009-06-16","2009-06-17","2009-06-23","2009-06-24","2009-06-25","2009-06-26","2009-06-30","2009-07-03","2009-07-08","2009-07-15","2009-07-24","2009-08-06","2009-08-07","2009-08-20","2009-08-21","2009-08-27","2009-10-14","2009-10-15","2009-10-16","2009-10-19","2009-10-20","2009-10-28","2009-11-12","2009-11-19","2009-12-16","2009-12-17","2009-12-18"],"datasets":[{"data":{"test":[2,3,2,1,2,1,64,6,2,4,8,2,7,4,2,13,3,41,15,15,6,16,1,2,13,1,5,6,13,13,9,11,6,6,2,2,18,5,2,5,2,1,16,33,1,4,35,16,11,149,73,111,32,1,7,21,2,60,25,1,34,4,2,2,3,27,16,5,1,5,12,10,32,13,14,2]},"bakcgroundColor":["rgba(75 192 192 0.4)"]}]}

ale pokud si dam vypsat console.log(dataset) tak mi to vrati Uncaught ReferenceError: datasets is not define dat <anonymous>:1:13.
respektive nemuzu vypsat nic krome $data.

CZechBoY
Člen | 3608
+
0
-

Jo, ty totiž už totiž převádíš to pole do jsonu. A pak ho převádíš nejspíš znovu do jsonu jak jsem radil.
Nemůžeš si poslat jen ty datasets? Případně poslat jen pole a přeformátovat to do formátu, kterýmu Highcharts rozumí? Vracet json je celkem hnus a měla by to, podle mě, dělat až prezentační vrstva.

parti
Člen | 117
+
0
-

jj presne jak rikas.
Takze to muze byt duvod proc nemuzu vypsat do console nic jineho jenom data?
Jinak ted jsem si ty data vypsal do webu ale predpokladam ze problem bude v tom ze Highchart tomu formatu nerozumim, protoze ten vypis je nejaky zvlastny.
Skoda ze se tady nedaji vlozit obrazky aby si videl to co vidim ja.
Uz jsem vyzkousel c3.js pak chart.js a ted tady mam higchart a nic.

Pavel Kravčík
Člen | 1180
+
0
-

parti napsal(a):

Skoda ze se tady nedaji vlozit obrazky aby si videl to co vidim ja.

http://imgur.com/

parti
Člen | 117
+
0
-

@CZechBoY http://imgur.com/a/LZnid
tady jsem naharal foto co jsem dostal na vystupu.

a vsutp je klasika jak jsem tady psal.

labels":["2009-02-13","2009-02-16","2009-02-27","2009-03-03","2009-03-05","2009-03-10","2009-03-11","2009-03-12","2009-03-13","2009-03-16","2009-03-17","2009-03-20","2009-03-23","2009-03-24","2009-03-25","2009-03-26","2009-03-27","2009-03-30","2009-04-02","2009-04-03","2009-04-06","2009-04-07","2009-04-08","2009-04-10","2009-04-17","2009-04-20","2009-04-22","2009-04-23","2009-04-24","2009-04-28","2009-04-30","2009-05-04","2009-05-11","2009-05-12","2009-05-15","2009-05-18","2009-05-21","2009-05-22","2009-05-25","2009-05-27","2009-05-28","2009-05-29","2009-06-02","2009-06-04","2009-06-08","2009-06-09","2009-06-10","2009-06-11","2009-06-12","2009-06-16","2009-06-17","2009-06-23","2009-06-24","2009-06-25","2009-06-26","2009-06-30","2009-07-03","2009-07-08","2009-07-15","2009-07-24","2009-08-06","2009-08-07","2009-08-20","2009-08-21","2009-08-27","2009-10-14","2009-10-15","2009-10-16","2009-10-19","2009-10-20","2009-10-28","2009-11-12","2009-11-19","2009-12-16","2009-12-17","2009-12-18"],"datasets":[{"data":{"test":[2,3,2,1,2,1,64,6,2,4,8,2,7,4,2,13,3,41,15,15,6,16,1,2,13,1,5,6,13,13,9,11,6,6,2,2,18,5,2,5,2,1,16,33,1,4,35,16,11,149,73,111,32,1,7,21,2,60,25,1,34,4,2,2,3,27,16,5,1,5,12,10,32,13,14,2]}
CZechBoY
Člen | 3608
+
0
-

hele zkus si nějakej jednoduchej příklad s pevnýma databa bez databáze a zbytečnýma vrstavama… Potom až to rozjedeš tak přídávej vrstvy.
Ten příklad nahoře co jsem ti psal tak ti funguje?

Jinak já používám nvd3 (nadstavba nad d3) a vypadá to cca podobně. Ty máš jen problém předat správně data do javascriptu.

Editoval CZechBoY (24. 4. 2017 17:46)

parti
Člen | 117
+
0
-

@CZechBoY Ano ten priklad s pevnymi datama mi funguje.
Javascript moc neumim a ucim se ho zajizdy a suhlasim,ze je problem pri predani dat.
Ale nevim jak to vyresit.

CZechBoY
Člen | 3608
+
0
-

No když jsem si přečetl ten zdroják tak jsem vlastně zjistil, že nechápu o jakej graf se snažíš :-)
Ty chceš pro každýho testera (tester_name) zobrazit počet záznamů za každej měsíc (nebo jiný časový interval)? To bys vypisoval 3 hodnoty do 2d grafu a to asi nepůjde jinak než přes stackovanej/multi-line graf (příklad https://www.highcharts.com/…e-plot-bands).

Sranda s těma highcharts je, že si an azčátku musíš nadefinovat ty hodnoty pro X a potom sypat hodnoty do series.data postupně jako obyčejnej list floatů. Pro vysvětlení se mrkni do zdrojáku toho příkladu – zajímají tě xAxis: {type: 'datetime'} a potom ty series: [{data: [1,2,3,4,5,6]}] a taky ještě ty plotOptions.
Případně jsem ještě našel druhej příklad s časovým grafem: https://www.highcharts.com/…-time-series, tady je k tomu json https://www.highcharts.com/…-time-series.

Editoval CZechBoY (24. 4. 2017 22:29)

parti
Člen | 117
+
0
-

Ano kazdy tester ma udelat nejaky pocet testu.Vystup bude od-do(cas) osa y a pocet testu osa x.
A typ grafu o ktery se snazim je line graf.
Ok a co by jsi mi doporucil, jaky graf pouzit? Zustat u tech Highchart nebo zkus neco jineho?

Editoval parti (25. 4. 2017 8:18)

CZechBoY
Člen | 3608
+
0
-

Takze chces ten multiline nebo stackovanej? nebo chces ten graf pro jednoho testera?
Highcharts to urcite zvladne…

parti
Člen | 117
+
0
-

Potreboval bych multiline aby byla moznost zobrazit vic testru.
https://www.highcharts.com/…e-plot-bands

CZechBoY
Člen | 3608
+
0
-

jj tak mrkni jak tam davaji hodnoty. chce to trochu projit dokumentaci…

parti
Člen | 117
+
0
-

ok jasne kazdopadne dekuji