Question

I am creating an energy usage/analysis/management application for the University I attend. There is already a database online that is continuously updated with the latest electricity meter ratings for each building.

My application will have a page where all buildings are listed and can be clicked on. When a user chooses a building, the application will grab the electricity meter readings for that building and generate graphs for each meter using the ‘Highcharts’ charting library.

The backend of the application is written in Ruby (with Rails). In the HTML view that displays the page consisting of the graphs for a specific builing, I put

 <div id="graphContainer">

 </div>

in order to generate a graph.

Currently, I can generate one graph per building page just by hardcoding one instance of the above code in the view.

However, each building can have multiple electricity meters. Having not that much experience in HTML, I have no idea how to generate the graphs when I don’t know how many I need until run time.

Can anyone point me in the right direction?

Answer 1

Given a

<div id="graphContainer"></div>

you can target it with a highchart using

chart1 = new Highcharts.Chart({
  chart: {
    renderTo: '#graphContainer',  //  <=== this selector here  
    type: 'bar'
  },
  //... more options and graph data
});

You don’t have to have the HTML for #graphContainer in your view initially either. You could have some

<div id="graphs-container"></div>

in your view and then via Javascript (jQuery below) you can build the container and highchart for each of the graphs needed at runtime with a simple loop.

$(function(){
  var highcharts = [];

  for (var i=0; i<charts.length; i++) {
    $('#graphs-container').append($('<div id="graph-container-' + (i+1) + '"/>');

    var highchart = new Highcharts.Chart({
      chart: {
        renderTo: '#graph-container' + (i+1),  //  <=== this selector here  
        type: 'bar'
      },
      //... more options and graph data for chart[i]
    });

    highcharts.push(highchart);
  });
});

All you’d need to do is modify the above to suit your needs by sending charts to the view likely as JSON data containing everything required to render each specific graph in terms of the Highchart options needed and datasets.

The Highcharts documentation is a great place to look, but as you suggested you also seem to have more learning in general to be doing before you’re comfortable with al this stuff.

• http://www.highcharts.com/documentation/how-to-use