javascript - Highcharts showing ticks number, instead of date -
i'm trying create graph json received web api.
i had working, , decided start refactoring. after while noticed xaxis no longer shows dates, instead seems showing ticks. i'm quite inexperienced javascript , more highcharts cannot spot mistake.
high charts showing ticks. http://mortentoudahl.dk/images/highchartsbug.png
the change did making option object, , pass highcharts upon instantiation, according instructions found here: http://www.highcharts.com/docs/getting-started/how-to-set-options when compare code last code block in link, seems same, except options object.
var pm10 = []; var pm25 = []; var options = { chart: { zoomtype: 'x', renderto: 'container' }, title: { text: "compounds in air @ hcab" }, subtitle: { text: document.ontouchstart === undefined ? 'click , drag in plot area zoom in' : "pinch chart zoom in" }, xaxix: { type: 'datetime' }, yaxis: { title: { text: 'µg/m³' } }, series: [{ name: 'particles less 2.5 µm', data: pm25, pointstart: date.utc(2016, 5, 8), pointinterval: 86400 * 1000 // 1 day }, { name: 'particles less 10 µm', data: pm10, pointstart: date.utc(2016, 5, 8), pointinterval: 86400 * 1000 // 1 day }] }; function reverseandsetarrays(data) { $.each(data.reverse(), function(key, value) { if ("pm10b" in value) { pm10.push(value["pm10b"]); }; if (!("pm10b" in value)) { pm10.push(null); }; if ("pm25b" in value) { pm25.push(value["pm25b"]); }; if (!("pm25b" in value)) { pm25.push(null); }; }); }; var url = "super secret url"; $.getjson(url, function(data) { reverseandsetarrays(data); var chart = new highcharts.chart(options); });
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//code.highcharts.com/highcharts.js"></script> <div id="container"></div>
the following configuration in options object incorrect:
xaxix: { type: 'datetime' }
it should be:
xaxis: { type: 'datetime' }
Comments
Post a Comment