How to use the ajax Json Web Method with amcharts in asp.net -
demo map//this chart fuctions..i want pass the country id chatdata on map //using ajax json web method. //error: uncaught typeerror: cannot read property '0' of undefined.
var chart; var map; var chartdata = {}; chartdata.world = [ { source: "oil", energy: 3882.1 }, { source: "natural gas", energy: 2653.1 }, { source: "coal", energy: 3278.3 }, { source: "nuclear", energy: 610.5 }, { source: "hydro", energy: 740.3 }]; chartdata.kh = [ { source: "oil", energy: 404.6 }, { source: "natural gas", energy: 79.8 }, { source: "coal", energy: 1537.4 }, { source: "nuclear", energy: 15.9 }, { source: "hydro", energy: 139.3 }]; chartdata.cn = [ { source: "oil", energy: 842.9 }, { source: "natural gas", energy: 588.7 }, { source: "coal", energy: 498 }, { source: "nuclear", energy: 190.2 }, { source: "hydro", energy: 62.2 }]; chartdata.my = [ { source: "oil", energy: 124.9 }, { source: "natural gas", energy: 350.7 }, { source: "coal", energy: 82.9 }, { source: "nuclear", energy: 37 }, { source: "hydro", energy: 39.8 }]; chartdata.ph = [ { source: "oil", energy: 148.5 }, { source: "natural gas", energy: 46.7 }, { source: "coal", energy: 245.8 }, { source: "nuclear", energy: 3.8 }, { source: "hydro", energy: 24 }]; chartdata.th = [ { source: "oil", energy: 148.5 }, { source: "natural gas", energy: 46.7 }, { source: "coal", energy: 245.8 }, { source: "nuclear", energy: 3.8 }, { source: "hydro", energy: 24 }]; chartdata.id = [ { source: "oil", energy: 197.6 }, { source: "natural gas", energy: 78.7 }, { source: "coal", energy: 108.8 }, { source: "nuclear", energy: 62.1 }, { source: "hydro", energy: 16.7 }]; chartdata.vn = [ { source: "oil", energy: 197.6 }, { source: "natural gas", energy: 78.7 }, { source: "coal", energy: 108.8 }, { source: "nuclear", energy: 62.1 }, { source: "hydro", energy: 16.7 }]; amcharts.ready(function () { // *** create chart ********************************************************* // pie chart chart = new amcharts.ampiechart(); // title of chart chart.addlabel("0", "!20", "world", "center", 16); chart.backgroundalpha = 0.4; chart.backgroundcolor = "#000000"; chart.dataprovider = chartdata.world; chart.titlefield = "source"; chart.valuefield = "energy"; chart.sequencedanimation = true; chart.starteffect = "elastic"; chart.labelsenabled = false; chart.labeltext = "[[title]]"; chart.startduration = 2; chart.labelradius = 10; // write chart.write("chartdiv"); // *** create map *********************************************************** var chartdata1 = generatechartdata(); alert(chartdata1); map = new amcharts.ammap(); map.pathtoimages = "http://www.ammap.com/lib/images/"; //map.paneventsenabled = true; // line enables pinch-zooming , dragging on touch devices var dataprovider = { mapvar: amcharts.maps.worldlow }; map.areassettings = { unlistedareascolor: "#dddddd", rolloveroutlinecolor: "#ffffff", rollovercolor: "#cc0000" }; dataprovider.areas = [ { title: "cambodia", id: chartdata1[0].id, selectable: true }, //{ title: "cambodia", id:"kh", selectable: true }, { title: "china", id: chartdata1[1].id, selectable: true }, { title: "indonesia", id: chartdata1[2].id, selectable: true }, { title: "malaysia", id: chartdata1[3].id, selectable: true }, { title: "philippines", id: chartdata1[4].id, selectable: true }, { title: "thailand", id: chartdata1[5].id, selectable: true }, { title: "vietnam", id: chartdata1[6].id, selectable: true } ]; map.dataprovider = dataprovider; map.write("mapdiv"); map.addlistener("clickmapobject", function (event) { if (event.mapobject.id != undefined && chartdata[event.mapobject.id] != undefined) { chart.dataprovider = chartdata[event.mapobject.id]; chart.clearlabels(); chart.addlabel("0", "!20", event.mapobject.title, "center", 16); chart.validatedata(); } }); }); //------this fuction im calling ..returning values-------
function generatechartdata() { debugger; var chartdata2 = []; var chartdataresults = new array(); $.ajax({ type: 'post', datatype: 'json', contenttype: 'application/json', url: 'varmap.aspx/getdataonload', data: {}, success: function (response) { var adata = response.d; (var = 0; < adata.length; i++) { var country = adata[i].costtype; alert(country); chartdataresults.push({ id: country }); } return chartdataresults; } }); }
the ajax requests in jquery asynchronous. means generatechartdata() function finishes before data loaded , proceeds create chart without data.
you need start creating chart in ajax call success handler function:
function createchart() { debugger; var chartdata2 = []; var chartdataresults = new array(); $.ajax( { type: 'post', datatype: 'json', contenttype: 'application/json', url: 'varmap.aspx/getdataonload', data: {}, success: function( response ) { var adata = response.d; ( var = 0; < adata.length; i++ ) { var country = adata[ ].costtype; alert( country ); chartdataresults.push( { id: country } ); } // create chart here // pie chart chart = new amcharts.ampiechart(); // title of chart chart.addlabel( "0", "!20", "world", "center", 16 ); chart.backgroundalpha = 0.4; chart.backgroundcolor = "#000000"; chart.dataprovider = chartdataresults; chart.titlefield = "source"; chart.valuefield = "energy"; chart.sequencedanimation = true; chart.starteffect = "elastic"; chart.labelsenabled = false; chart.labeltext = "[[title]]"; chart.startduration = 2; chart.labelradius = 10; // write chart.write( "chartdiv" ); } } ); } $( document ).ready( createchart );
Comments
Post a Comment