samedi 4 février 2017

how to differentiate chart with colors

I want to differentiate "Men" and "Women" from this chart with colors. maybe we can make men chart with green colors and women chart with pink colors. here is my code

//data.php

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

//database
define('DB_HOST', '127.0.0.1');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'dbintegrasi');

//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 JenisKelaminID, COUNT(JenisKelaminID) as jumlah FROM tahunmasukmagister GROUP BY JenisKelaminID");

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

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

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

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

//new print the data
print json_encode($data);

//app.js

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

            for(var i in data)
            {
                //Gender.push("Gender " + data[i].JenisKelaminID);
                if(data[i].JenisKelaminID == 1)
                {
                    Gender.push("Men");
                } 
                else if(data[i].JenisKelaminID == 2)
                {
                    Gender.push("Women");
                } 
                else 
                {
                Gender.push("Other");
                }

                jumlah.push(data[i].jumlah);
            }

            var chartdata = {
                labels: Gender,
                datasets: [
                    {
                        label : 'Gender',
                        backgroundColor: 'rgba(250, 300, 100, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: jumlah
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata

            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});

could you please help me to solve those codes? thanks in advance




Aucun commentaire:

Enregistrer un commentaire