krispo / angular-nvd3

AngularJS directive for NVD3 reusable charting library (based on D3). Easily customize your charts via JSON API.
http://krispo.github.io/angular-nvd3
MIT License
1.29k stars 377 forks source link

Read data from CSV file and Display Bar Chart #755

Open BearTi opened 6 years ago

BearTi commented 6 years ago

Hi,

I want to display some data as a Bar Chart like this here: https://krispo.github.io/angular-nvd3/#/historicalBarChart

My data come from a CSV file, which looks like this:

timestamp,value
1533581836000,177
1533581936000,100

I don´t know / I don´t get the data into the $scope.data object.

Here is my app.js:

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
            chart: {
                type: 'historicalBarChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 65,
                    left: 50
                },
                x: function(d){return d[0];},
                y: function(d){return d[1]/100000;},
                showValues: true,
                valueFormat: function(d){
                    return d3.format(',.1f')(d);
                },
                duration: 100,
                xAxis: {
                    axisLabel: 'X Axis',
                    tickFormat: function(d) {
                        return d3.time.format('%x')(new Date(d))
                    },
                    rotateLabels: 30,
                    showMaxMin: false
                },
                yAxis: {
                    axisLabel: 'Y Axis',
                    axisLabelDistance: -10,
                    tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }
                },
                tooltip: {
                    keyFormatter: function(d) {
                        return d3.time.format('%x')(new Date(d));
                    }
                },
                zoom: {
                    enabled: true,
                    scaleExtent: [1, 10],
                    useFixedDomain: false,
                    useNiceScale: false,
                    horizontalOff: false,
                    verticalOff: true,
                    unzoomEventType: 'dblclick.zoom'
                }
            }
        };

    d3.csv("energyConsumption_Poolpumpe.log", function(error, data) {
        console.log(data);
        console.log(error);
        $scope.data = data;
        $scope.$apply();
    });

Furthermore I want to read out the data from the file and do a calculation (second value minus first value, third value minus second value and so on).

How can I do this?

Thanks a lot!