I have the code snippet shown below in my application . What I am trying to accomplish is this: anytime a checkbox is clicked, the bar chart should be updated.
In my error console I'm getting:
"Error: TypeError: values is undefined Source file:hit.js Line: 11017.
I tried assigning the JSON directly in the function (var json = ...) and it works as it should but I can't get it to work by loading the JSON from the file. What am I doing wrong?
$(':checkbox').click(function () {
init();
function init()
{
var request = new XMLHttpRequest( );
request.open("GET", "GetGenes.php", false);
request.send(null);
var json = request.response;
console.log(request.response);
var barChart = new $jit.BarChart({
//id of the visualization container
injectInto: 'infovis',
//whether to add animations
animate: true,
//horizontal or vertical barcharts
orientation: 'horizontal',
//bars separation
barsOffset: 0.5,
//visualization offset
Margin: {
top: 5,
left: 5,
right: 5,
bottom: 5
},
//labels offset position
labelOffset:5,
//bars style
type:'stacked',
//whether to show the aggregation of the values
showAggregates:true,
//whether to show the labels for the bars
showLabels:true,
//label styles
Label: {
type: 'HTML', //Native or HTML
size: 9,
family: 'Arial',
color: 'black'
},
//tooltip options
Tips: {
enable: true,
onShow: function(tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
}
}
});
barChart.loadJSON(json);
}
})
genes.php contains:
echo "{'label': ['label 1', 'label 2', 'label 3', 'label 4'],'values': [{'label': 'date A','values': [20, 40, 15, 5]}, {'label': 'date B','values': [30, 10, 45, 10]}, {'label': 'date E','values': [38, 20, 35, 17]}, {'label': 'date F','values': [58, 10, 35, 32]}, {'label''date D','values': [55, 60, 34, 38]}, {'label': 'date C','values': [26, 40, 25, 40]}]};";
There is an error in your returned JSON :
'label''date D'
There is a missing colon there. Don´t know if that solves anything.