Add support for { x, y } datasets

[niemyjski]

It's pretty common for labels and data to be in an object format for line charts. This doesn't to be currently supported at all from datasets:

Also, it would be nice if I could just push a dataset to have { label: 'test', value:20 } and have that picked up and used for a pie chart.. This would make it much easier to build out charts then pushing an array value for labels and data esp when the series data might not match up to the label..

https://github.com/chartjs/Chart.js/blob/master/samples/timeScale/line-time-point-data.html https://github.com/chartjs/Chart.js/blob/master/samples/line-x-axis-filter.html

This currently is not supported by this library.

[niemyjski]

I'm trying to create it in something like this:

        var config = {
            type: 'line',
            data: {
                datasets: [{
                    label: "Dataset with string point data",
                    data: [{
                        x: newDateString(0),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(2),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(4),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(5),
                        y: randomScalingFactor()
                    }],
                    fill: false
                }]
            }
}

I'm passing the data correctly but it's appearing like this (this is my scope):

{
          "title": "test",
          "options": {},
          "type": "line",
          "data": [{
            "label": "Average User",
            "data": [{
              "x": 1462856400,
              "y": 17962
            }, {
              "x": 1462863600,
              "y": 19660
            }]
          }],
          "series": ["Average User"]
        }

And this is what angular-chart passes to chartjs

{
            type: 'line',
            data: {
                datasets: [{
                    data: [{
                        label: 'Average User',
                        data: [{
                            x: 1462856400,
                            y: 17962
                        }, {
                            x: 1462863600,
                            y: 19660
                        }]
                    }],
                    backgroundColor: ['rgba(151,187,205,1)', 'rgba(220,220,220,1)', 'rgba(247,70,74,1)', 'rgba(70,191,189,1)', 'rgba(253,180,92,1)', 'rgba(148,159,177,1)', 'rgba(77,83,96,1)'],
                    hoverBackgroundColor: ['rgba(151,187,205,0.2)', 'rgba(220,220,220,0.2)', 'rgba(247,70,74,0.2)', 'rgba(70,191,189,0.2)', 'rgba(253,180,92,0.2)', 'rgba(148,159,177,0.2)', 'rgba(77,83,96,0.2)']
                }]
            },
            options: {}
        }

[blowsie]

I too am trying to create a chart using datasets. https://jsfiddle.net/k9L79ts0/3/

Is this possible at current with angular-charts?

[niemyjski]

I don't think it is.

[adrogon]

Hi @niemyjski,

You may use {x, y} data as long as the X axis is of linear type.

In your example, the "options" property is empty, the line chart then defaults the X axis to "category" scale, which only reads labels from "chart-labels" and data from the array of arrays of integers set in "chart-data".

To get a scatter line chart, change the X axis to a linear one.

options: {
  scales: {
    xAxes: [{
      type: 'linear',
      position: 'bottom'
    }]
  }
}

The "chart-data" property then expects an array of array of {x: xValue, y: yValue} objects.

data: [
  [ {x: 0, y: 10}, {x: 10, y: 3} ],
  [ {x: 0, y: 2}, {x: 5, y: 7} ]
]

This is only available from Chart.js 2.0, so make sure to use at least the 1.0.0-alpha version of angular-chart.js

There are a lot of other options for defining scales, so please refer to the Chart.js documentation to get more information.

[niemyjski]

@adrogon yes, I'll double check this but I'm sure my data was in the correct format, it's just that angular-chart.js 1.0-a builds it in the wrong format..

[adrogon]

Hello @niemyjski,

Please try the following scope:

angular.module("app", ["chart.js"]).controller("LineCtrl", ['$scope', function ($scope) {
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [ {x: 0, y: 10}, {x: 0, y: 1}, {x: 1, y: 6}, {x: 4, y: 2} ],
    [ {x: 0, y: 2}, {x: 5, y: 7}, {x: 4, y: 2}, {x: 2, y: 9} ]
  ];
  $scope.options = {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }]
    }
  };
}]);

With some basic HTML:

<body ng-controller="LineCtrl">
    <canvas class="chart chart-line" chart-data="data" chart-series="series" chart-options="options"></canvas>
</body>

It should give you the expected result.

In your first example, I am not sure what the "newDateString" function is, but if you are looking for a time scale, you might consider changing this example's X scale type from "linear" to "time".

[jtblin]

Thanks a ton for the great example @adrogon! I've added an example based on this.

[macrergate]

In Chart.js I can mix numeric and {x,y} datasets and it works with default type (category) But I can't make it working with angular-chart I've tried to do it this way:

$scope.labels = ["8:00", "8:05", ...., "19:55",  "20:00'];
$scope.series = ["Productivity", "Normative"];
var normativeData = [{x: "8:00", y: 50} , {x: "20:00", y: 50}] //horizontal const line
var productivityData = [40, 41, 45, 50, 55, ......, 60]; 
$scope.data = [productivityData, normativeData];
...

Anyway I can't see Normative line, but if I use type: "linear" I also don't see Productivity line too.

In Chart.js I make it without setting type to linear.

Any suggestions how to do it in angular-chart?

[macrergate]

Actually I've done it by moving to the latest Chart.js version: npm-shrinkwrap.json

"dependencies": {
    "angular-chart.js": {
      "version": "1.1.1",
      "from": "angular-chart.js@latest",
      "resolved": "https://registry.npmjs.org/angular-chart.js/-/angular-chart.js-1.1.1.tgz",
      "dependencies": {
        "chart.js": {
          "version": "2.6.0",
          "from": "chart.js@>=2.6.0 <2.7.0",
          "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.6.0.tgz"
        }
      }
    }
  }