i have implemented highcharts working good. highcharts getting live data @ every 1 minute , add points doing expected. have problem likes highcharts having 2 series first line type series , second area type series. first series 2 points , second more 200 points. told data live, data start coming on 7 line , blank data area until 9 @ exact 9 new data start coming @ every 1 minute until 12.30 pm happens @ 9 chart goes stop , on new next day 7 chart stop
but if refresh browser new data , start working needed.
my code follows
$(function () { $('#container').highcharts({ credits: { enabled: 0 }, title: { text: null }, xaxis: { type: 'datetime', datetimelabelformats: { minute: '%h:%m' }, max: <%= millitimestamp(_closingtime) %> , min: <%= millitimestamp(_openingtime) %> , tickinterval: 0.5 * 3600 * 1000, minortickinterval: 0.1 * 3600 * 1000, title: { text: null }, linewidth: 1, minorgridlinewidth: 1, endontick: true, showlastlabel: true, gridlinewidth: 1, labels: { style: { font: '7.5pt trebuchet ms' } }, reversed: <%= isarabic %> // true arabic layout , false english layout }, yaxis: { title: { text: null }, max: <%= maxy %> , min: <%= miny %> , endontick: true, showlastlabel: true, labels: { style: { font: '7.5pt trebuchet ms' } }, opposite: <%= isarabic %> // true arabic layout , false english layout }, 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')] ] }, linewidth: 1, marker: { enabled: false }, shadow: false, states: { hover: { linewidth: 1 } }, threshold: null }, line: { linewidth: 1, marker: { enabled: false }, shadow: false, states: { hover: { linewidth: 1 } }, threshold: null } }, tooltip: { formatter: function () { return '<span style="font-size:7.5pt;">' + highcharts.dateformat('%a, %e %b, %h:%m', this.points[0].x) + '</span><br><span style="color:' + this.points[0].series.color + ';">' + this.points[0].series.name + '</span>: <b>' + highcharts.numberformat(this.points[0].y, 0) + '</b>'; }, usehtml: true, shared: true }, series: [{ type: 'area', data: [] }, { type: 'line', color: 'red', data: [] }] }); <% if (isarabic == "true") { %> highcharts.setoptions({ lang: { months: <%= months %> , weekdays: <%= days %> } }); <% } %> $.ajaxsetup({ cache: false }); recievedata(); }); function recievedata() { var patharray = window.location.pathname.split('/'); var chart = $('#container').highcharts(); $.ajax({ url: '/' + patharray[1] + '/homepagechartdata.aspx', datatype: 'json', cache: false, data: { 'time': new date().getseconds() }, success: function (data) { chart.yaxis[0].setextremes(data.miny, data.maxy, true, true); chart.series[1].setdata([]); chart.series[1].name = data.lineseriesname; chart.series[0].setdata([]); chart.series[0].name = data.areaseriesname; (var x in data.lineseriesdata) { chart.series[1].addpoint([data.lineseriesdata[x][0], data.lineseriesdata[x][1]]); } (var x in data.areaseriesdata) { chart.series[0].addpoint([data.areaseriesdata[x][0], data.areaseriesdata[x][1]]); } settimeout(recievedata, 60000); } } }); } my json data @ 7
{"maxx":"1367843400000","minx":"1367830800000","maxy":"7912","miny":"7511","tickintervaly":"80","lineseriesname":"open","areaseriesname":"price index","lineseriesdata":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaseriesdata":[]} my json data after 9 am
{"maxx":"1367843400000","minx":"1367830800000","maxy":"7912","miny":"7511","tickintervaly":"80","lineseriesname":"open","areaseriesname":"price index","lineseriesdata":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaseriesdata":[[1367830831000,7740.01],[1367830897000,7735.61]]} and start getting new data in areaseriesdata every 1 minutes
@@update
i found problem @ 7 , 9 not getting data getting empty string, going error not handling, change below start removing series not getting series line @ 7 have data.can tells me missing or doing wrong on here.
function recievedata() { var patharray = window.location.pathname.split( '/' ); var chart = $('#container').highcharts(); $.ajax({ url: '/' + patharray[1] + '/_layouts/kse.sharepoint/homepagechartdata.aspx', datatype: 'json', cache: false, data:{'time': new date().getseconds() }, success: function (data) { chart.yaxis[0].setextremes(data.miny, data.maxy, true, true); chart.series[1].setdata([]); chart.series[1].name = data.lineseriesname; chart.series[0].setdata([]); chart.series[0].name = data.areaseriesname; (var x in data.lineseriesdata) { chart.series[1].addpoint([data.lineseriesdata[x][0], data.lineseriesdata[x][1]]); } (var x in data.areaseriesdata) { chart.series[0].addpoint([data.areaseriesdata[x][0], data.areaseriesdata[x][1]]); } settimeout(recievedata, 60000); }, error: function() { settimeout(recievedata, 60000); } }); }
you should parse json prepare separate data series. morever need use data, instead of "lineseriesdata" or "areaseriesdata". should looks like:
[{ data:[[1367830800000, 7715.35], [1367843400000, 7715.35]] },{ data:[[1367830831000, 7740.01], [1367830897000, 7735.61]] }]
Comments
Post a Comment