Imagine that I have the JSON data below:
[
{
month: "Jan",
cost: 80,
energy: 90
},
{
month: "Feb",
cost: 50,
energy: 80
},
{
month: "Mar",
cost: 90,
energy: 40
},
...
];
I want to display this data as a simple bar chart on my website. The Y axis should represent a scale of numbers for cost/energy, and the X axis should display the month.
I've attempted to create the bar chart using only CSS and Javascript following a guide, but the solution is very basic and only shows one bar of data at a time (either cost or energy in a month).
Here is an example of what I tried:
<ul class="chart" style="width:{{width}}px; height:{{height}}px;" >
<div class="y" style="width:{{height}}px;">{{yAxis}}</div>
<div class="x">{{xAxis}}</div>
<li ng-repeat="bar in data" class="bar" style="height:{{bar.cost / max * height}}px; width:{{width / data.length - 5}}px; left:{{$index / data.length * width}}px;"><span>{{bar.month}}:{{bar.cost}}</span></li>
</ul>
In my controller:
$scope.width = 600;
$scope.height = 400;
$scope.yAxis = "Amount";
$scope.xAxis = "Month";
$scope.data = dataService.usage;
$scope.max = dataService.max;
// Data service is a factory that returns the JSON mentioned above.
In the CSS:
.chart {
border-left: 1px solid black;
border-bottom: 1px solid black;
margin: 60px auto;
position: relative;
}
.y {
position: absolute;
transform: rotate(-90deg);
transform-origin: bottom left;
bottom: 0;
padding: 5px;
}
...
This current approach does not look good on the page and the Y Axis is not displayed correctly. Is there a better way to visualize my data in Angular?