Documentation v8.2.7

Suggestions:

Quick Setup Quick project setup Dark Mode Dark Mode Setup for Layout & Components Select2 Select2 and Bootstrap Integration Flatpickr Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker Datepicker Tempus Dominus Bootstrap Datepicker DataTables DataTables Ajax Server Side Examples Fullcalendar Overview Fullcalendar & Bootstrap Integration KeenIcons In-house Designed Icons In 3 Styles Duotune In-house Designed Duotune SVG Icon Set

Downloads Preview

Google chart tools are powerful, simple to use, and free. For more info see the official site.

Pie Chart Example

Here's an example of a Pie Chart. For more info, please visit the official website.

JAVASCRIPT
HTML

// GOOGLE CHARTS INIT
google.load('visualization', '1', {
    packages: ['corechart', 'bar', 'line']
});

google.setOnLoadCallback(function () {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);

    var options = {
        title: 'My Daily Activities',
        colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
    };

    var chart = new google.visualization.PieChart(document.getElementById('kt_docs_google_chart_pie'));
    chart.draw(data, options);
});

<div id="kt_docs_google_chart_column"></div>

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.2.7

Pie Chart Example

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.2.7

No result found

Pie Chart Example