local-binding.md

title	page_title	description	slug	position
Local Binding	Local Binding | Chart PHP Class	Bind Kendo UI Chart PHP class to an array of data.	localbinding_chart_uiforphp	2

Local Binding

This article shows how to bind Kendo UI Chart for PHP to a PHP array.

Approaches

This PHP array can be populated from a database or declared inline (in the page).

Bind to PDO-Returned Arrays

PHP Data Objects (PDO) is an interface for accessing various databases in PHP.

Below are listed the steps for you to follow when binding the Kendo UI AutoComplete for PHP to an array returned by PDO.

Important

The following demo is using the sample SQLite database shipped with the Telerik UI for PHP demos (/wrappers/php/sample.db).

Step 1 Make sure you followed all the steps from the [introductory article on Telerik UI for PHP]({% slug overview_uiforphp %})—include the autoloader, JavaScript, and CSS files.

Step 2 Create a PDO connection.

    <?php
    $db = new PDO('sqlite:../sample.db');
    ?>

Step 3 Retrieve all records from the Weather table.

    <?php
    $statement = $db->prepare('SELECT Date, TMax FROM Weather LIMIT 10');
    $statement->execute();
    $weather = $statement->fetchAll(PDO::FETCH_ASSOC);
    ?>

Step 4 Create a dataSource and set its data and schema. Setting the schema is required to specify the model fields. Those fields are required for filtering and editing.

    <?php
    // Create the schema model
    $model = new \Kendo\Data\DataSourceSchemaModel();

    // Create a field for the 'Date' column of the 'Weather' table
    $dateField = new \Kendo\Data\DataSourceSchemaModelField('Date');
    $dateField->type('date');

    // Create a field for the 'TMax' column of the 'Weather' table
    $tmaxField = new \Kendo\Data\DataSourceSchemaModelField('TMax');
    $tmaxField->type('number');

    $model->addField($dateField, $tmaxField);

    // Create the schema
    $schema = new \Kendo\Data\DataSourceSchema();

    // Set its model
    $schema->model($model);

    // Create the data source
    $dataSource = new \Kendo\Data\DataSource();

    // Specify the schema and data
    $dataSource->data($weather)
               ->schema($schema);
    ?>

Step 5 Create a Chart, configure its series, categoryAxis and set its dataSource.

    <?php
    $chart = new \Kendo\Dataviz\UI\Chart('chart');

    $tmaxSeries = new \Kendo\Dataviz\UI\ChartSeriesItem();
    $tmaxSeries->field('TMax');

    $categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
    $categoryAxis->field('Date');

    $chart->addSeriesItem($tmaxSeries)
          ->addCategoryAxisItem($categoryAxis)
          ->dataSource($dataSource);
    ?>

Step 6 Output the Chart by echoing the result of the render method.

    <?php
    echo $chart->render();
    ?>

See Also

• [Overview of the Chart PHP Class]({% slug overview_chart_uiforphp %})
• [Remote Binding of the Chart PHP Class]({% slug remotebinding_chart_uiforphp %})
• [Overview of the Kendo UI Chart Widget]({% slug overview_kendoui_charts_widget %})
• Telerik UI for PHP API Reference Folder
• [Telerik UI for PHP Classes Folder]({% slug overview_autocomplete_uiforphp %})