I have a html page with a select box. I code it in a Jquery file so that when when the selection selected is "football" then it will compare a json data in Jquery and generate the chart. However if I choose "movie" it shall show an error. But I couldn't make it response when the selection changes.this is my html code :\[code\]<title>Pie chart</title> <style type="text/css"> .style1 { text-align: center; } </style></head><body><p class="style1"> Select your category : <select id="selection" name="D1" onclick="return selection_onclick()"> <option value ="http://stackoverflow.com/questions/14578463/football" selected =selected>Football Team</option> <option value ="http://stackoverflow.com/questions/14578463/Movie">Movie</option> </select></p><div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> <br /> </div></body>\[/code\]This is my Jquery file with json embedded in it:\[code\]$(function () { var json = { "data": [ { "cid": "football", "id": "/en/chelsea_fc", "topic": "Chelsea F.C.", "audience": [ { "userid": "100003914111287", "information": [ { "category": "Athlete", "source": "Didier Drogba" }, { "category": "Athlete", "source": "Frank Lampard" }, { "category": "Professional sports team", "source": "Chelsea Football Club" }, { "category": "favorite_teams", "source": "Chelsea Football Club" } ] }, { "userid": "100003914111287", "information": [ { "category": "Athlete", "source": "Didier Drogba" }, { "category": "Athlete", "source": "Frank Lampard" }, { "category": "Professional sports team", "source": "Chelsea Football Club" }, { "category": "favorite_teams", "source": "Chelsea Football Club" } ] } ], "type": "/soccer/football_team" }, { "id": "/en/manchester_united_fc", "topic": "Manchester United F.C.", "audience": [ { "information": [ { "category": "Athlete", "source": "Ryan Giggs" }, { "category": "Professional sports team", "source": "Manchester United" }, { "category": "favorite_teams", "source": "Manchester United" } ], "userid": "100003921730958" } ], "type": "/soccer/football_team" } ] };\[/code\]Next this is how I generate my chart :\[code\] $("#selection").on('change', function(){ // var e = document.getElementById("selection"); var id =$(this).val(); if(id = json.data[0].cid) { console.log(id) $.each(json.data, function (i, v) { pts.push([v.topic, v.audience.length]); }); } else alert("Wrong data"); //Radialize the colors Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) { return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, stops: [ [0, color], [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken ] }; }); var chart; $(document).ready(function () { /*var e = document.getElementById("selection"); var id = e.options[e.selectedIndex].value; console.log(id); if (id = json.data[0].cid) { $.each(json.data, function (i, v) { pts.push([v.topic, v.audience.length]);*/ chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Facebook like' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 0 } , plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', point: { events: { click: function (event) { //var personame =" "; var id = "10150616324193820"; for (var i = 0; i < jsonFB.user1.length; i++) { for (var k = 0; k < json.data.length; k++) { for (var j = 0; j < json.data[k].audience.length; j++) { if (jsonFB.user1.id = json.data[k].audience[j].userid) { var personname = jsonFB.user1.name; var id = jsonFB.user1.id; } else { alert("Error!"); } } } alert("Person who like " + this.name + " are " + personname); var ans = confirm("Do you want to view this person profile?"); if (ans) window.location = "http://www.facebook.com/people/@/" + id; } } } }, showInLegend: true, dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function () { return '<b>' + this.point.name + '</b>: ' + Math.round(this.percentage) + '%'; } } } }, series: [{ type: 'pie', name: 'Likes', data: pts }] }); });});\[/code\]
Generate chart according to selected options
- Thread starter ferozasi
- Start date