I am trying to use http://ift.tt/1qJcwAo library to generate piechart. i can create a chart using a static html. like the following
<code>
<!DOCTYPE html>
<!-- saved from url=(0038)http://ift.tt/1qJcwAo -->
<html>
<head>
</head>
<div class="container">
<h1 class="title">Pie Chart</h1>
<div class="chart">
<div id="chart" class="c3" style= "max-height: 280px; position: relative;">
</div>
</div>
</div>
<script src="./js2/d3-3.5.0.min-3b564392.js" type="text/javascript"></script>
<script src="./js2/c3.min-3c814909.js" type="text/javascript"></script>
<!--
<script src="./js2/chart_pie-bdaca3a4.js" type="text/javascript"></script>
-->
<script type="text/javascript">
var chart = c3.generate({
data: {
// iris data from R
columns: [
['data1', 30],
['data2', 120],
],
type : 'pie',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
}
});
setTimeout(function () {
chart.load({
columns: [
["Series1", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["series2", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["series3", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
</script>
</body></html>
</code>
now, i split the chart block into another php file . my intention is to generate and poulate the data for the chart from that file. however now chart goes not get drawn. no clue why its doing when split the code. any help are much appreciated.
now my code looks like this.
main html file
"
<!DOCTYPE html>
<!-- saved from url=(0038)http://ift.tt/1qJcwAo -->
<html>
<head>
<script>
function showUserAssignment(str)
{
if (str=="")
{
document.getElementById("compainsummaryReport").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("compainsummaryReport").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","generatechart.php?projectname="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div class="container">
<form action="index.htm#">
<div class="form-body">
<div class="form-group">
<label class="control-label">Select a CAMPAIGN</label>
<select name="campaign" onchange="showUserAssignment(this.value)" data-placeholder="Choose a Campaign" class="chosen-select mb-15" tabindex="2">
<option value="test">test</option>
<option value="test2">test2</option>
</select>
</div>
</div>
</form>
<h1 class="title">Pie Chart</h1>
<div class="row">
<div id="compainsummaryReport"></div>
</div><!-- /.row -->
</div>
</body>
</html>
"
and generatechart.php file as follows
"
<div class="chart">
<div id="chart" class="c3" style= "max-height: 280px; position: relative;"></div>
</div>
<script src="./js2/d3-3.5.0.min-3b564392.js" type="text/javascript"></script>
<script src="./js2/c3.min-3c814909.js" type="text/javascript"></script>
<!--
<script src="./js2/chart_pie-bdaca3a4.js" type="text/javascript"></script>
-->
<script type="text/javascript">
var chart = c3.generate({
data: {
// iris data from R
columns: [
['data1', 30],
['data2', 120],
],
type : 'pie',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
}
});
setTimeout(function () {
chart.load({
columns: [
["Series1", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["series2", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["series3", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);
</script>
"
Any help are much appreciated
Aucun commentaire:
Enregistrer un commentaire