Холст JS в yii2 - PullRequest
       80

Холст JS в yii2

0 голосов
/ 17 апреля 2020

Я работаю над проектом yii2. Я установил библиотеку и затем, следуя примеру, пытаюсь просмотреть графики

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 

<div id="chartContainer1" style="width: 45%; height: 300px;display: inline-block;"></div>

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        //'id',
        'cust_id',
        'msn',
        'voltage_p1',
        'voltage_p2',
        'voltage_p3',
        'current_p1',
        'current_p2',
        'current_p3',
        //'device_id',
        'kwh',


        'data_date_time',

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

<?PHP
  $script = <<< JS
  var chart = new CanvasJS.Chart("chartContainer1",
{
    animationEnabled: true,
    title: {
        text: "Spline Area Chart"
    },
    axisX: {
        interval: 10,
    },
    data: [
    {
        type: "splineArea",
        color: "rgba(255,12,32,.3)",
        dataPoints: [
            { x: new Date(1992, 0), y: 2506000 },
            { x: new Date(1993, 0), y: 2798000 },
            { x: new Date(1994, 0), y: 3386000 },
            { x: new Date(1995, 0), y: 6944000 },
            { x: new Date(1996, 0), y: 6026000 },
            { x: new Date(1997, 0), y: 2394000 },
            { x: new Date(1998, 0), y: 1872000 },
            { x: new Date(1999, 0), y: 2140000 },
            { x: new Date(2000, 0), y: 7289000 },
            { x: new Date(2001, 0), y: 4830000 },
            { x: new Date(2002, 0), y: 2009000 },
            { x: new Date(2003, 0), y: 2840000 },
            { x: new Date(2004, 0), y: 2396000 },
            { x: new Date(2005, 0), y: 1613000 },
            { x: new Date(2006, 0), y: 2821000 }
        ]
    },
    ]
});
chart.render();
JS;
$this->registerJs($script);
?>

Диаграмма отображается. Теперь я хочу, чтобы некоторые реальные данные отображались на chart. т.е. данные, которые находятся на gridview. Я пытался найти решение, но ничего не нашел для yii2.

Контроллер

public function actionData()
{
    try {
        $cust_met_data = Yii::$app->db->createCommand(
            "SELECT m.`meter_id` , m.`msn` , 
                  m.`cust_id` , m.`device_id` FROM `mdc_meter_cust_rel` m ")->queryAll();
    } catch (Exception $e) {
    }

    $slave_id = $cust_met_data[0]['device_id'];
    $address = 0;
    $count = 14;
    $msn = $cust_met_data[0]['msn'];
    $cust_id = $cust_met_data[0]['cust_id'];

    // my base URL
    $api_url = 'https://localhost:44337/api/rtu/GetData/' . $slave_id . '/' . $address . '/' . $count;


    $curl = curl_init($api_url);

    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 1000);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);

    $curl_response = curl_exec($curl);

    $json = json_decode($curl_response);



    $vol_1 = $json->{0};
    $vol_2 = $json->{1};
    $vol_3 = $json->{2};
    $curr_1 = $json->{3};
    $curr_2 = $json->{4};
    $curr_3 = $json->{5};
    $kwh = $json->{6};
    $dt = date('Y-m-d H:i:s');

    $model = new MdcmetersData();
    $model->load(Yii::$app->request->post());
    $model->device_id = $slave_id;
    $model->msn = $msn;
    $model->cust_id = $cust_id;
    $model->voltage_p1 = $vol_1;
    $model->voltage_p2 = $vol_2;
    $model->voltage_p3 = $vol_3;
    $model->current_p1 = $curr_1;
    $model->current_p2 = $curr_2;
    $model->current_p3 = $curr_3;
    $model->kwh = $kwh;

    if($model->save())
    {
        return $this->redirect(['index', 'model' => $model]);
    }
    else
    {
        return $this->redirect(['index']);

    }

Как передать мои данные в Canvas JS?

Любая помощь будет высоко ценится

...