How to render Highcharts graph into user-selected DIV

Question

I have multiple buttons, representing webservices in form of maps and Highcharts graphs, which the user can drag into one of several containers (DIVs) on the page, in which these webservices are then displayed.

It works fine for the map/image-webservices. But it is not clear to me how to make it possible with the Highcharts graphs. I guess I have to indicate somewhere a chart.renderTo("DIVx"), but not sure about that process.

I have setup a fiddle here. For the moment, the graph is being displayed in the DIV "container". But this should disappear, and once the user drags the button "Graph :: XXX" into one of the DIVs, the graph should display there.

The HTML part:

    
    

    
    

    
    
      Map :: NPP
    
    
      Map :: Precipitations
    
    
      Map :: Temperature
    
    
      Graph :: GDP
    
    
      Graph :: XXX

The javascript/jquery part for the graph:

    var csv = "2010/01/01,51.67074582499006,13.789093928493081,-0.0010074468085106377
" +
      "2010/02/01,51.67074582499006,13.789093928493081,0.0024117021276595747
" +
      "2010/03/01,51.67074582499006,13.789093928493081,0.026550000000000004
" +
      "2010/04/01,51.67074582499006,13.789093928493081,0.08252659574468087
" +
      "2010/05/01,51.67074582499006,13.789093928493081,0.12837446808510639
" +
      "2010/06/01,51.67074582499006,13.789093928493081,0.140618085106383
" +
      "2010/07/01,51.67074582499006,13.789093928493081,0.0668787234042553
" +
      "2010/08/01,51.67074582499006,13.789093928493081,0.10335744680851064
" +
      "2010/09/01,51.67074582499006,13.789093928493081,0.08095000000000001
" +
      "2010/10/01,51.67074582499006,13.789093928493081,0.0400159574468085
" +
      "2010/11/01,51.67074582499006,13.789093928493081,0.004214893617021277
" +
      "2010/12/01,51.67074582499006,13.789093928493081,-0.0018680851063829788
" +
      "2011/01/01,51.67074582499006,13.789093928493081,0.0011914893617021279
" +
      "2011/02/01,51.67074582499006,13.789093928493081,0.003752127659574468
" +
      "2011/03/01,51.67074582499006,13.789093928493081,0.027225531914893623"

    function extract(csv) {
      var rows = csv.split(/
|
/);
      var data;
      var series = [];
      var serie = {
        name: -1,
        data: []
      };
      for (var i = 0; i < rows.length; i++) {
        data = rows[i].split(',');
        if (serie.name === -1) {
          serie.name = data[0].substr(0, 4);
        } else {
          if (serie.name !== data[0].substr(0, 4)) {
            series.push(serie);
            serie = {
              name: data[0].substr(0, 4),
              data: []
            };
          }
        }
        serie.data.push(parseFloat(data[3]));
      }
      series.push(serie);
      return series;
    }

    $(function() {
      Highcharts.chart('container', {
        title: {
          text: 'Monthly Average Temperature',
          x: -20 //center
        },
        subtitle: {
          text: 'Source: WorldClimate.com',
          x: -20
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
          ]
        },
        yAxis: {
          title: {
            text: 'Temperature (°C)'
          },
          plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
        },
        tooltip: {
          valueSuffix: '°C'
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          borderWidth: 0
        },
        series: extract(csv),
      });
    });

The javascript/jquery part for the draggable buttons and target DIVs:

    //just to know which button is being dragged we will use this variable
    var draggingDiv;

    function onDragOver(e) {
      e.preventDefault();
      e.target.classList.add("over-me");
    }

    function onDragLeave(e) {
      e.target.classList.add("static");
      e.target.classList.remove("over-me");
    }

    function onDragStart(e) {
      draggingDiv = e.target;
      e.target.innerHTML = "You are Dragging me";
    }

    function onDragEnd(e) {

      e.target.innerHTML = "Drag Me into the Box :)";
      e.target.parentElement.classList.add("static");
      draggingDiv.innerHTML = "Dragged once Can't drag me now:)";
      // e.target.innerHTML = "You Dropped Me In "+e.target.parentElement.id+""; 
    }

    function onDrop(e) {
      e.preventDefault();
      e.target.classList.remove("over-me");
      //uncommment the below line if want that the button should not be draggable once it has been dropped in a div already
      //draggingDiv.draggable=false;
      //e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition
      //e.target.innerHTML="Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div";
      if (draggingDiv.id == "map_npp") {
        e.target.innerHTML = "";
      } else if (draggingDiv.id == "map_precipitations") {
        e.target.innerHTML = "";
      } else if (draggingDiv.id == "map_temperature") {
        e.target.innerHTML = "";
      } else if (draggingDiv.id == "graph_gdp") {
        e.target.innerHTML = "";
      } else if (draggingDiv.id == "graph_xxx") {
        e.target.innerHTML = "";
      }
    }

Thanks for any hints how this could be implemented.

morganfree · Accepted Answer

You need to render the chart onDrop event. The container for the chart will be the target of that event. An element in which the chart will be rendered can be set via chart.renderTo property or as a parameter in the chart constructing function - see API.

The example can be found below. I also destroy the previous chart before a new one is created.

var chart;

function onDrop(e) {
  e.preventDefault();
  e.target.classList.remove("over-me");

  if (chart) {
    chart.destroy();
  }

  var options = {
    chart: {},
    series: [{
      data: [1,2,3,4,5]
    }]
  };

  if (draggingDiv.id == "map_npp") {
  } else if (draggingDiv.id == "map_precipitations") {
    options.chart.type = 'column';
  } else if (draggingDiv.id == "map_temperature") {
  } else if (draggingDiv.id == "graph_gdp") {
    options.series.data = [5,4,3,2,1];
  } else if (draggingDiv.id == "graph_xxx") {
    options.series.data = [5,4,3,2,1];
    options.chart.type = 'column';
  }

  chart = Highcharts.chart(e.target, options);
}

example: https://jsfiddle.net/1nye1zk7/

How to render Highcharts graph into user-selected DIV

Answers (1)

Related Questions