CODEWITHSUNDEEP
javascriptlaravel
16_018_RHR
16_018_RHR

Reputation: 417

laravel/javascript Pie chart using condition

I am trying to make a pie chart using laravel. I have a table named "account_charts". Now I want to show a pie chart showing the account names of 3 different account types("income","expense","Cost of Good Sold "). There are other account types too. But I don't want to show them in chart. My table look like this--

id AccountType AccountName Balance
1 Assests Eve Mcka 40
2 Cost of Good Sold Hamish Stuart 35
3 Expenses Chandler Baird 95
4 Income Ivana Guerra 25
5 Cost of Good Sold Carly Ingram 65
6 Expenses Ralph Rasmussen 85
7 Income Cassidy Huffman 15
8 Income Kyle Salazar 5

From this table I don't want "Assets" in the pie chart. I want to make a pie chart using 3 different account types("income","expense","Cost of Good Sold"). Inside account types the account names will be shown.

I cound't find any appropriate tutorial for this. Is there any way to do this?

I have drawn a chart in powerpoint to show what I want-- Pie chart using power point

update--

I have done this--

<html>
  <head>
  <script type = "text/javascript"
src = "https://www.gstatic.com/charts/loader.js">
</script> 
<script type="text/javascript">
google.charts.load('current', {
    'packages': ['corechart']
  });
google.charts.setOnLoadCallback(drawChart);

var dbData = [{
    "AccountType": "Cost of Good Sold",
    "AccountName": "Kyle Salazar",
    "Balance": 100
  },
  {
    "AccountType": "Cost of Good Sold",
    "AccountName": "Cassidy Huffman",
    "Balance": 42
  },
  {
    "AccountType": "Expenses",
    "AccountName": "Eve Mckay",
    "Balance": 92
  },
  {
    "AccountType": "Expenses",
    "AccountName": "Hamish Stuart",
    "Balance": 90
  },
  {
    "AccountType": "Expenses",
    "AccountName": "Chandler Baird",
    "Balance": 72
  },
  {
    "AccountType": "Income",
    "AccountName": "Ivana Guerra",
    "Balance": 52
  },
  {
    "AccountType": "Income",
    "AccountName": "Ralph Rasmussen",
    "Balance": 86
  }
]
var AccountTypeFieldName = "AccountType";
var AccountNameFieldName = "AccountName";
var BalanceFieldName = "Balance";


function createPieChartData(data, keyTitle, valueTitle) {
  var AccountTypeGroups = {};
  var result = [];
  result.push([keyTitle, valueTitle]);

  var AccountType = null;
  //summing Balance of records in each AccountType grouped by AccountType ()
  for (var i = data.length - 1; i >= 0; i--) {
    AccountType = data[i][AccountTypeFieldName];
    if (typeof AccountType === "number" || typeof AccountType === "string") {
      if (typeof AccountTypeGroups[AccountType] === "undefined") {
        AccountTypeGroups[AccountType + ""] = 0;
      }

      AccountTypeGroups[AccountType] += data[i][BalanceFieldName];
    } else {
      //do whatever here, for example:
      //throw new Error("some bad data type of 'AccountType' field passed from DB");
    }
  }

  for (var y in AccountTypeGroups) {
    result.push([y, AccountTypeGroups[y]]);
  }

  return result;
}

function drawChart() {

  var data = google.visualization.arrayToDataTable(createPieChartData(dbData, "AccountType", "Sum of Balance"));

  var options = {
    title: 'Balance for each AccountType:'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);
} 
</script>
   </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

But how do I show the accountNames instead of percentage?

Upvotes: 1

Views: 603

Answers (1)

ElPepito
ElPepito

Reputation: 91

If you're problem is fetching the data, two ways are possible :

  • Exclude "assets" : if you're using eloquent ORM the "where" method ->where('AccountType', "!=" , "Assets") or if you're writing full query use a WHERE clause WHERE AccountType != "Assets" in your query
  • Include only the others : if you're using eloquent ORM the "whereIn" method ->whereIn('AccountType', ["income","expense","Cost of Good Sold"]) or if you're writing full query use a WHERE clause WHERE AccountType IN ("income","expense","Cost of Good Sold") in your query

The way you choose depends on what you will do if you add a new AccountType value. Do you want to add it to the pie (use exclude way) or you will always want only the 3 others value (use include only way)

If your question is about rendering the chart. It all depends on which library you use

Upvotes: 1

Related Questions