javascript - Highcharts.js DateTime on x axis coming from JSON only displays number -
i'm struggling simple line graph highcharts.js. have json data coming in asp.net mvc controller:
public jsonresult getsensorlinedata(string sensorname) { list<sensormeasurement> result= this.sqlsensormeasuresrepository.findallmeasurements(sensorname).tolist(); list<string> days = new list<string>(); list<decimal> values = new list<decimal>(); foreach (var item in result) { values.add(item.value); days.add(item.datetime.tostring()); } dynamic data = new { categories=days, values = values }; return json(data, jsonrequestbehavior.allowget); }
in cshtml file i'm doing this:
homedataservice.init('@this.baseurl()'); homedataservice.gettemperaturelinedata("roomtemperature", function myfunction(data) { var datacategories=[]; (var = 0; < data.categories.length; i++) { var strval = data.categories[i]; var datetimeparts = strval.split(" "); var datepart = datetimeparts[0]; var timepart = datetimeparts[1]; var dateparts = datepart.split("."); var timeparts = timepart.split(":"); //german datetime string coming asp.net var date = new date(dateparts[2], (dateparts[1] - 1), dateparts[0], timeparts[0], timeparts[1]); data.categories[i]=(date.gettime()); } var chart; $('#temperature-line').highcharts({ chart: { type: 'line' }, title: { text: '' }, subtitle: { text: '' }, xaxis: { type: 'datetime', categories:data.categories, minortickinterval: 10, mintickinterval:10, }, yaxis: { min: 0, title: { text: 'temperature' } }, plotoptions: { column: { pointpadding: 0.2, borderwidth: 0 } }, series: [{ name: 'temperature', data: data.values }] }); });
as can see i'm transforming german datetime highcharts can interpret it. doesn't. output:
update: ok i'm returning controller:
and changed chart code (see below) when run browser hangs. doing wrong?
var chart; $('#temperature-line').highcharts({ chart: { type: 'line' }, title: { text: '' }, subtitle: { text: '' }, xaxis: { type: 'datetime' }, yaxis: { min: 0, title: { text: 'temperature' } }, plotoptions: { column: { pointpadding: 0.2, borderwidth: 0 } }, series: [{ name: 'temperature', data: data }] }); });
you can't use datetime axis , categories - it's strictly 1 or other axis type.
you need either remove categories, , send timestamps data x values, or format dates way want them displayed , use them categories.
if displaying time series data, makes more sense use datetime values instead of categories.
Comments
Post a Comment