CODEWITHSUNDEEP
javascriptarraysjsonhighcharts
user5283666
user5283666

Reputation:

Why does highchart not recognize my dates?

I am trying to implement HIghcharts on my site thats running on ASP.NET MVC.

I have a controller that returns an array of objects. I parse through the objects and create new objects that has a javascript-date and a property of the total sales.

While trying to follow this fiddle to create a similar Highcharts I have not been successfull. It seems Highcharts is not recognizing my DateTimes. Any ideas what Im doing wrong? This is what I get:

enter image description here

Im trying to get something like this:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/arearange/

Data from API:

[
  {
    "Date": "2017-04-01T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-02T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-03T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-04T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-05T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-06T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-07T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-08T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-09T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-10T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-11T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-12T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-13T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-14T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-15T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-16T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-17T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-18T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-19T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-20T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-21T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-22T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-23T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-24T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-25T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-26T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-27T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-28T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-29T00:00:00",
    "TotalSales": 0
  },
  {
    "Date": "2017-04-30T00:00:00",
    "TotalSales": 0
  }
]

The button action:

// The button action
    $('#btnGenerate').click(function() {
        var uri2 = '/api/SalesPerDay/?startDate=2017-01-01&endDate=2017-12-31';
        $.getJSON(uri2,
            {
                startDate: $("#from").val(),
                endDate: $("#to").val()
            },

            function (data1) {
                var values = [];
                for (var i = 0; i < data1.length; i++) {
                    var item = {};
                    item.y = data1[i].TotalSales;
                    item.x = new Date(data1[i].Date);
                    values.unshift(item);
                }
                values.sort(function(a, b) {
                    return a.x - b.x;
                });
                chart.series[0].setData(values);
                chart.xAxis[0].setCategories(values);
            });
    });

My Chart:

var chart = new Highcharts.Chart('salesChart', {
            chart: {
                type: 'arearange',
                zoomType: 'x'
            },
            title: {
                text: 'Monthly sales'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Total sold SEK'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
            series: [
                {
                    type: 'area',
                    name: 'Total Sold',
                    data: []
                }
            ]
        });

Upvotes: 0

Views: 254

Answers (1)

Vladimir M
Vladimir M

Reputation: 4489

The problem is here:

chart.xAxis[0].setCategories(values);

remove it.

Since each of your data points have X value set, you dont need categories. It is only needed if you have some data where x and y values are separate. (such as multiple series of y-values data and a single set of categories for all of them)

Upvotes: 1

Related Questions