Search code examples
javascriptpythonflaskzingchart

How correctly plotting an histogram with ZingChart?

I'm currently building an application in which I want to display histograms. Problem is that I can't manage to properly render an histogram with zingchart... I want ticks of the scale-x to be place on each side of data points, not centered on them as they represent the bounds of histogram bins.

Below is the python function that computes data to create the histogram using the histogram function on numpy package.

from numpy import histogram

def graph(self):

    results = sorted(results, key=lambda x: mark)
    marks = [result.mark for result in results]

    maximum = 20
    divisor = maximum
    step = maximum / divisor

    data, bin_edges = histogram(a=marks, range=(0, maximum), bins=divisor)
    data = data.tolist()

    return {'data': data, 'divisor': divisor, 'maximum': maximum, 'step': step}

Then this histogram data are used in the view to render the zing chart graph (This is a Jinja2 template as I use Flask-framework) :

<script>
    var chartData = {
        "type": "bar",
        "plot": {
            "aspect": "histogram",
        },
        "plotarea": {
            "adjust-layout": true,
        },
        "series": [
            {"values": {{ graph['data'] }}},
        ],
        "scale-x": {
            "progression": "lin",
            "min-value": 0,
            "max-value": {{ graph['maximum'] }},
            "step": {{ graph['step'] }},
            "decimals": 1,
        },
    };

    zingchart.render({
        "id": "graph1",
        "data": chartData,
        "width": "100%",
        "height": "400px",
        });
</script>
Solution

  • EDIT

    To offset the scale-x number position, you just add the offsetX attribute to the scaleX.item. Here's an example...

    scaleX: {
  item: {
    offsetX: 20
  }
}

    The default behavior of ZingChart histograms is to have the tick marks placed on each side of the data point. I placed some dummy data in your chart JSON and rendered it out. This is what it shows.

    histogram demo chart

    You can view the chart here: http://demos.zingchart.com/view/GQEQHWVV

    Can you provide more insight into the problem you're trying to solve? There may be issues with the data you're passing. As far as I can tell, ZingChart renders histograms properly.

    FYI: I'm on the ZingChart team