Material Charts

Getting Started

Download the JavaScript and CSS files from the css and js directories in the GitHub repository. Include them in your HTML project as:

<link rel="stylesheet" href="css/material-charts.css">

<script src="js/material-charts.js"></script>

jQuery must be included for this library to work.

Examples

Bar Charts

var exampleBarChartData = {
    "datasets": {
        "values": [5, 10, 30, 50, 20],
        "labels": [
            "Apples", 
            "Oranges", 
            "Berries", 
            "Peaches", 
            "Bananas"
        ], "color": "blue"
    },
    "title": "Example Bar Chart",
    "height": "300px",
    "width": "500px",
    "background": "#FFFFFF",
    "shadowDepth": "1"
};

MaterialCharts.bar("#bar-chart-example", exampleBarChartData)

Pie Charts

var examplePieChartData = {
    "datasets": {
        "values": [5, 30, 5, 20, 40],
        "labels": [
            "Apples", 
            "Oranges", 
            "Berries", 
            "Peaches", 
            "Bananas"
        ],
    },
    "title": "Example Pie Chart",
    "height": "300px",
    "width": "500px",
    "background": "#FFFFFF",
    "shadowDepth": "1"
};

MaterialCharts.pie("#pie-chart-example", examplePieChartData)