HistogramModule.js

[SedarOlmez94]

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

[EwoutH]

@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.

[SedarOlmez94]

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});
};

}; `