JSFiddle - React, Tailwind, and code Playground
by HemalathaThanigaivel
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="//d3js.org/d3.v4.min.js">
</script>
<div id="agent-profit-chart" style="width:100%; height : 400px;">
</div>
JavaScript
var n = 10, // number of samples
m = 5; // number of series
var data = d3.range(m).map(function() {
return d3.range(n).map(Math.random);
});
let newData =
[
{
"yearmonth": "2020-Jan",
"yearwithmonth": "2020-01",
"overhead_expenses": "0",
"income": "0",
"cumulative_expense": "0",
"cumulative_income": "0"
},
{
"yearmonth": "2020-Feb",
"yearwithmonth": "2020-02",
"overhead_expenses": "100",
"income": "0",
"cumulative_expense": "100",
"cumulative_income": "0"
},
{
"yearmonth": "2020-Mar",
"yearwithmonth": "2020-03",
"overhead_expenses": "622.222222222221",
"income": "940",
"cumulative_expense": "722.222222222221",
"cumulative_income": "940"
},
{
"yearmonth": "2020-Apr",
"yearwithmonth": "2020-04",
"overhead_expenses": "100",
"income": "0",
"cumulative_expense": "822.222222222221",
"cumulative_income": "940"
},
{
"yearmonth": "2020-May",
"yearwithmonth": "2020-05",
"overhead_expenses": "100",
"income": "0",
"cumulative_expense": "922.222222222221",
"cumulative_income": "940"
},
{
"yearmonth": "2020-Jun",
"yearwithmonth": "2020-06",
"overhead_expenses": "100",
"income": "0",
"cumulative_expense": "1022.22222222222",
"cumulative_income": "940"
},
{
"yearmonth": "2020-Jul",
"yearwithmonth": "2020-07",
"overhead_expenses": "100",
"income": "0",
"cumulative_expense": "1122.22222222222",
"cumulative_income": "940"
},
{
"yearmonth":...