Highcharts vykresleni hodnot v grafu

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

@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>

{! → |noescape

@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 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.

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 napsal(a):

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

http://imgur.com/

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)

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)

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

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