Open SedarOlmez94 opened 2 years ago
@SedarOlmez94 Thanks for filing an issue. Can you share a ZIP with your code, including the HistogramModule.js
?
I just tested my version of the tutorial on the latest Mesa version (0.9.0) and it works as expected.
Hi thanks for responding @EwoutH
I also implemented the example and it works, however, I am trying to use this graph for my own model which runs a simulation of house prices.
I am trying to create the histogram for the distribution of house prices but when I run the code the axes values change but the bars are not drawn like the tutorial example. I don't understand why it won't show.
Also histogram = HistogramModule(list(range(1000000)), 200, 500)
as house prices go up to a million.
I printed the return [int(x) for x in hist]
and just keep getting all zeros.
Please help.
The code in my visualisation.py: `class HistogramModule(VisualizationElement): package_includes = ["Chart.min.js"] local_includes = ["HistogramModule.js"]
def __init__(self, bins, canvas_height, canvas_width):
self.canvas_height = canvas_height
self.canvas_width = canvas_width
self.bins = bins
new_element = "new HistogramModule({}, {}, {})"
new_element = new_element.format(bins,
canvas_width,
canvas_height)
self.js_code = "elements.push(" + new_element + ");"
def render(self, model):
house_vals = [i.get_sale_price() for i in model.schedule.agents if i.agent_type=="House"]
hist = np.histogram(house_vals, bins=self.bins)[0]
return [int(x) for x in hist]`
and my HistogramModule.js `// HistogramModule.js var HistogramModule = function(bins, canvas_width, canvas_height) { // Create the elements
// Create the tag:
var canvas_tag = "<canvas width='" + canvas_width + "' height='" + canvas_height + "' ";
canvas_tag += "style='border:1px dotted'></canvas>";
// Append it to body:
var canvas = $(canvas_tag)[0];
$("#elements").append(canvas);
// Create the context and the drawing controller:
var context = canvas.getContext("2d");
// Prep the chart properties and series:
var datasets = [{
label: "Data",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: []
}];
// Add a zero value for each bin
for (var i in bins)
datasets[0].data.push(0);
var data = {
labels: bins,
datasets: datasets
};
var options = {
scaleBeginsAtZero: true
};
// Create the chart object
var chart = new Chart(context,{'type': 'bar', 'data': data, 'options': options});
// Now what?
this.render = function(data) {
for (var i in data)
chart.data.datasets[0].data[i] = data[i];
chart.update();
};
this.reset = function() {
chart.destroy();
chart = new Chart(context,{'type': 'bar', 'data': data, 'options': options});
};
}; `
Describe the bug
The HistogramModule.js advanced tutorial does not display the bars. The data does refresh the axes values but the bars themselves do not show so a blank canvas is displayed.
Expected behavior
A histogram presented at the end of the advanced tutorial.
To Reproduce
Tutorial used for reproducibility can be found here