javascript - highchart dynamically data display using xmlhttp -


i have made changes previous script, not sure if ok make changes here... anyway trying on clicking respective link, want load "highchart line graph", users dont have leave page.

my main.php body has

user2 -- <a href="#" onclick = "showgraph(2)"><img src="go.png"></a><br> user3 -- <a href="#" onclick = "showgraph(3)"><img src="go.png"></a> <script src="js/highcharts.js"></script> <div id="container"></div> 

head section contains [i have made new edits in javascript, compared last one]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> function showgraph(keyid,serid){             $.ajax({             type: "get",             url: "new_graph.php",             data: "id="+keyid+"&serid="+serid,             datatype: "json",                 success: function(data){                 drawgraph(data);                 }             });             return false;         }       function drawgraph(data){             alert(data);             var seriesdata = [];             var xcategories = [];             var i, cat, series, namedata;             for(i = 0; < data.length; i++){                 cat = data[i].ddate;                 series = data[i].dvalue;                 namedata = data[i].dname;                  //alert(cat);                  if(xcategories.indexof(cat) === -1){                     xcategories[xcategories.length] = cat;                     seriesdata[seriesdata.length] = series;                  }             }             //alert(xcategories);             alert(seriesdata);             //alert(namedata);     $(function () {          $('#container').highcharts({             chart: {                 type: 'line',                 marginright: 130,                 marginbottom: 25             },             title: {                 text: namedata,                 x: -20 //center             },             subtitle: {                 text: 'source: sitename.com',                 x: -20             },             xaxis: {                 categories: xcategories             },             yaxis: {                 title: {                     text: 'date'                 },                 plotlines: [{                     value: 0,                     width: 1,                     color: '#808080'                 }]             },             tooltip: {                 valuesuffix: '°c'             },             legend: {                 layout: 'vertical',                 align: 'right',                 verticalalign: 'top',                 x: -10,                 y: 100,                 borderwidth: 0             },             series: [{                 name: namedata,                 data: seriesdata             }]         });     });     } </script> 

new_graph.php file returns

i have used php json_encode($data) function.

echo json_encode($return_arr); 

returns

[{"dvalue":"25","ddate":"2013-07-25","dname":"samsung"},{"dvalue":"26","ddate":"2013-07-26","dname":"samsung"},{"dvalue":"25","ddate":"2013-07-27","dname":"samsung"},{"dvalue":"25","ddate":"2013-07-28","dname":"samsung"},{"dvalue":"24","ddate":"2013-07-29","dname":"samsung"},{"dvalue":"23","ddate":"2013-07-30","dname":"samsung"},{"dvalue":"21","ddate":"2013-07-31","dname":"samsung"},{"dvalue":"23","ddate":"2013-08-01","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-02","dname":"samsung"},{"dvalue":"28","ddate":"2013-08-03","dname":"samsung"},{"dvalue":"25","ddate":"2013-08-04","dname":"samsung"},{"dvalue":"26","ddate":"2013-08-05","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-06","dname":"samsung"},{"dvalue":"25","ddate":"2013-08-07","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-08","dname":"samsung"}] 

for reason graph not showing seriesdata, rest of data getting printed on graph such categories , name.

i followed thread had no luck how format json data stack column chart in highcharts

honestly i'm not in jquery , highchart. appreciate if helps me here, thank in advance

i see many potential problems in code don't know start without coding you.

here's helpful quick list:

1.) when posting stackoverflow take time format code. if real code formatted that, take time space , make readable.

2.) never create xmlhttprequest object myself these days. jquery's ajax capablities make life easier (and work in ie). start reading here.

3.) alert(val+date); supposed do? these 2 arrays, adding them , alerting not intend.

4.) this:

for(i = 0; < mysplitresult.length; i++) {      var eachval=mysplitresult[i].split("|");      val.push(eachval[0]);      date.push(eachval[1]); } draw_graph(val,date); 

is wrong. highcharts going want numbers values (parseint friend).

you going want fix php return proper ajax instead of manipulating strings.

5.) check categories: [date] , data: [val] (these arrays, why rewrap in in [])


Comments

Popular posts from this blog

java - JavaFX 2 slider labelFormatter not being used -

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -