从Chart.js的动态ID获取数据

时间：2018-08-17 16:56:58

标签： javascript php sql ajax chart.js

我创建了一个简单的chart.js折线图，当提供了静态“ url”（例如localhost / test / data.php）时，它可以生成图。在data.php上有一串看起来像这样的数据：

[{"bdi":"4","date":"2018-07-11"},{"bdi":"1","date":"2018-07-21"},{"bdi":"5","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"3","date":"2018-07-22"},{"bdi":"2","date":"2018-07-23"},{"bdi":"12","date":"2018-07-23"},{"bdi":"3","date":"2018-07-24"},{"bdi":"2","date":"2018-07-25"},{"bdi":"12","date":"2018-07-30"},{"bdi":"3","date":"2018-07-30"},{"bdi":"4","date":"2018-07-30"},{"bdi":"11","date":"2018-07-30"}]

data.php的代码如下：

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'test');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
	die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = 21 ORDER BY created_at");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
	$data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data); ?>

请注意，treatment_fk是 21 。这意味着将为此特定客户生成图表。

我想做到这一点，以便每次您访问cutomer.php页面时，都会为该特定客户生成一个图表（根据他们的数据）。所以我重新编码了data.php。相反，我将代码作为准备好的语句放入customer.php中，其中treatment_fk将是一个变量：

        <?php
        
  $cid = htmlentities ($_GET['customer_id']);      
//query to get data from the table
$sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");

$stmt = mysqli_stmt_init($conn);
mysqli_stmt_prepare($stmt, $sql);
mysqli_stmt_bind_param($stmt, "i", $cid);
mysqli_stmt_execute($stmt);
$data = array();
mysqli_stmt_bind_result($stmt, $bdi, $date);
while(mysqli_stmt_fetch($stmt)) {
    $data[]['bdi'] = $bdi;
    $data[]['date'] = $date;
}
//free memory associated with result
$result->close();

//now print the data
print json_encode($data); ?>

因此，现在，每次您访问具有不同ID（在URL中）的唯一客户时，都会在customer.php页面上生成不同的数据字符串。

现在，我面临的问题是我无法基于此数据字符串（bdi与日期）成功生成折线图。

这是我的chart.js图形字段的代码： 

 
        $(document).ready(function(){
	$.ajax({
		url: "http://localhost/test/data.php",
		method: "GET",
		success: function(data) {
			console.log(data);
			var bdi = [];
			var date = [];

			for(var i in data) {
				date.push( data[i].date);
				bdi.push(data[i].bdi);
			}

			var chartdata = {
				labels: date,
				datasets : [
					{
						label: 'BDI',
						backgroundColor: 'rgba(239, 243, 255, 0.75)',
						borderColor: 'rgba(84, 132, 255, 0.75)',
						hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
						hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        
						data: bdi
					}
				]
			};

			var ctx = $("#mycanvas");

			var barGraph = new Chart(ctx, {
				type: 'line',
				data: chartdata,
                options: {
                    responsive: true,
        legend: {
            position: 'bottom',
            
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 20
                },
                gridLines: {
                    drawTicks: false,
                    drawBorder: false,
                    
                }
}],
            xAxes: [{
                gridLines: {
                    zeroLineColor: "transparent",
                    display: false
                        },
                ticks: {
                    padding: 20,
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold"
                }
            }]
        },
                    
            tooltips: {
                backgroundColor: 'rgba(255,255,255)',
                titleFontColor: 'rgb(184,189,201)',
                bodyFontColor: 'black',
                displayColors: false,
                borderColor: 'rgb(214,217,225)',
                borderWidth: 1,
                caretSize: 5,
                cornerRadius: 2,
                xPadding: 10,
                yPadding: 10
            }
        }
});
		},
		error: function(data) {
			console.log(data);
		}
	});
});

请注意，URL为http://localhost/test/data.php。 尽管这确实会生成图形，但它不是特定于客户的图形。我尝试用http://localhost/test/view_customer?customer_id=12&operation=edit替换url（以测试URL的更改是否可以工作）。但是，它仍然不会生成图形。请记住，当我在源代码中访问http://localhost/test/view_customer?customer_id=12&operation=edit时，有一串数据bdi vs. date。无论是否仍未生成图。

这是我的问题：

1。如何使URL动态化，以便根据customer.php的特定ID生成图形？ （有更好的方法吗？）

P.s。请记住，http://localhost/test/view_customer?customer_id=12&operation=edit在图表作为chart.js代码中的URL时并未生成。

1 个答案:

答案 0 :(得分：1)

您没有在customer.php上创建与data.php相同类型的数组。用以下内容替换客户中的while循环，您应该使用相同的JSON格式。

    known_args, pipeline_options = parse_args(sys.argv)
    pipeline = beam.Pipeline(options=pipeline_options)
    lines = pipeline | 'read' >> beam.io.ReadFromText(known_args.input)
    parsed_json = lines \
      | 'cut' >> beam.Map(lambda x: x[39:])\
      | 'jsonify' >> beam.Map(json_loads).with_outputs('invalid_input', main='main')

    keyed_lines = parsed_json['main']\
      | 'key_filter' >> beam.Filter(lambda x: u'key' in x)\
      | 'keyer' >> beam.Map(lambda x: (x['key'], x))\
      | 'log_processed_rows' >> beam.Map(log_processed_rows)

    window_trigger = trigger.DefaultTrigger()

    windowed_lines = keyed_lines\
       | 'timestamp' >> beam.ParDo(AddTimestampDoFn())\
       | 'window' >> beam.WindowInto(beam.window.SlidingWindows(size=3600+600, period=3600), trigger=window_trigger, 
                                     accumulation_mode=trigger.AccumulationMode.DISCARDING) # 1 hour steps with 10 minutes of overlap

    results = windowed_lines \
        | 'groupbykey' >> beam.GroupByKey()\
        | 'parse' >> beam.ParDo(ParseSendingsDoFn()).with_outputs('too_few_rows', 'invalid_rows', 'missing_recipients', main='main_valid')  

    output = results['main_valid'] \
        | 'format' >> beam.Map(output_format)\
        | 'write' >> beam.io.WriteToText(known_args.output, file_name_suffix=".gz")

相关问题
最新问题