Show popup
I am using fusion chart to show popup with click bar-chart fusion, please help me, I am using json method to create chart here html:
<div id="chartContainerscoreConfidence" class="testseries-report-charts">
</div>
here is the json code
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
"type": "StackedColumn2DLine",
"renderAt": "chartContainerscoreConfidence",
"width": "100%",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Time Taken",
"bgcolor": "FFFFFF",
"plotgradientcolor": "",
"showalternatehgridcolor": "0",
"showplotborder": "0",
"divlinecolor": "CCCCCC",
"showvalues": "0",
"showcanvasborder": "0",
"pyaxisname": "Question No",
"syaxisname": "Time Taken (in minutes)",
"numberprefix": "",
"labeldisplay": "STAGGER",
"slantlabels": "1",
"canvasborderalpha": "0",
"legendshadow": "0",
"legendborderalpha": "0",
"showborder": "0"
},
"categories": [
{
"category": [
{
"label": "1"
},
{
"label": "2"
},
{
"label": "3"
},
{
"label": "4"
},
{
"label": "5"
},
{
"label": "6"
},
{
"label": "7"
},
{
"label": "8"
}
]
}
],
"dataset": [
{
"seriesname": "Time taken by you",
"color": "008ee4",
"data": [
{
"value": "3",
"link": " "
},
{
"value": "4"
},
{
"value": "1"
},
{
"value": "2"
},
{
"value": "1"
},
{
"value": "3"
},
{
"value": "4"
},
{
"value": "3"
}
]
},
{
"seriesname": "time taken by average student",
"parentyaxis": "S",
"renderas": "Line",
"color": "f8bd19",
"data": [
{
"value": "1"
},
{
"value": "2"
},
{
"value": "4"
},
{
"value": "3"
},
{
"value": "2"
},
{
"value": "3"
},
{
"value": "3"
},
{
"value": "4"
}
]
}
]
}
});
revenueChart.render();
})
I can redirect to any url but was unable to open the popup with jquery
js fiddle: http://jsfiddle.net/y3H2G/226/
+3
source to share
2 answers
There are many plugins. if you are using bootstrap you can use boostrap modal dialog or you can use bpopup jquery plugin , here's a demo (I updated your js fiddle): http://jsfiddle.net/y3H2G/227/
code:
<!-- Simple implementation of the Bar 2D chart -->
<div id="chartContainerscoreConfidence" class="testseries-report-charts">
</div>
<input type="button" id="btn" value="Show popup" name="btn" onclick="$('#chartContainerscoreConfidence').bPopup();" />
0
source to share
Wooo got the solution after a lot of effort i added a class in all bars and triggered a click event when clicking on any bar
$(window).load(function () {
//$('#raphael-paper-149').addClass('hhhhhhhhhhhhhhhhhhhhhhhhhhhh');
$("#raphael-paper-149 g").attr("class", "clickbleClass");
$('.clickbleClass').click(function(){
alert('hi');
});
});
0
source to share