Rendering a graph in highcharts/miso

Question

I am trying to play with Highcharts.js and a misodatest (www.misoproject.com/dataset). All I've done is added the example script given at http://misoproject.com/dataset/examples/highstockandcsv.html.

It wouldn't run, so I edited it to what I thought should happen, I put somethings of the example into a function (). Now, I am getting no errors at all, which would be great. But I am getting no information in my page at all and I don't know why, the graph is just not rendering at all.

Here is my code:

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>
      <br>
        <div id="test" style="max-width: 800px; height: 300px; margin: 0 auto"></div>  <!-- Container for Highcharts map. -->

   </body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="json2.js"></script>
      <script src="lodash.js"></script>
      <script src="moment.js"></script>
      <script src="underscore.deferred.js"></script>
      <script src="underscore.math.js"></script>
      <script src="http://code.highcharts.com/highcharts.js"></script>
      <script src="miso.ds.0.3.0.js"></script>


<script> 
  function chart() {

  var ds = new Miso.Dataset({
  url : "crudeoil.csv",
  delimiter : ",",
  columns : [{ name : "Year", type : "time", format : "YYYY" }]
    }); 

ds.fetch({
  success : function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'test',
        type: 'column',
        marginRight: 130,
        marginBottom: 25
      },
       title: {
       text: 'World Crude Oil Barrel Production (1,000) per unit',
       x: -20 //center
      },
       subtitle: {
       text: 'Src: http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
       x: -20
      },
       xAxis: {
         categories: _.map(this.column("Year").data, function(year) { 
         return year.format("YY"); 
       })
      },
       yAxis: {
         title: {
         text: this.columnNames()[1]
      },
       plotLines: [{
         value: 0,
         width: 10000,
         color: '#808080'
      }]
      },
       tooltip: {
         formatter: function() {
         return '<b>'+ this.series.name +'</b><br/>'+
         this.x +': '+ this.y;
      }
    },
       legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
    },
       series: [{
        name: 'World Production',
        data: this.column("Crude oil production (1000 barrels per day)").data
      }]
    });
  }
});
}
</script>
</html>

I know I've probably just failed to grasp something basic, as a beginner JS dev I'm learning a lot through making a lot of mistakes. Any help would be most appreciated!

You shouldn't have your scripts after the
tag. They should be inside the
or blocks. Probably not your issue in this case, but its bad practice and could cause errors in some browsers — Ben McCormick, Jan 10 '13 at 17:02
Also, I don't know anything about misodatest, but the chart is being rendered within the success method of the object being fetched by the dataset. My guess is that the fetch is failing and that method is never being called. You can use your browsers debugging tools to determine if the method is running. If its not, then you'll need to figure out why. — Ben McCormick, Jan 10 '13 at 17:05
Thank you very much Ben, I love learning about my bad practices so I can improve my code :) — Charlotte Spencer, Jan 10 '13 at 17:09

score 1 · Answer 1 · answered Jan 10 '13 at 17:08

It seems I have fixed it. I needed to add $(document).ready( to my function encompassing all of the script. So:

$(document).ready(function() {

  var ds = new Miso.Dataset({
  url : "crudeoil.csv",
  delimiter : ",",
  columns : [{ name : "Year", type : "time", format : "YYYY" }]
    }); 

ds.fetch({
  success : function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'test',
        type: 'column',
        marginRight: 130,
        marginBottom: 25
      },
      title: {
      text : 'World Crude Oil Barrel Production (1,000) per unit',
        x: -20 //center
      },
      subtitle: {
        text: 'Src: http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
        x: -20
      },
      xAxis: {
        categories: _.map(this.column("Year").data, function(year) { 
          return year.format("YY"); 
        })
      },
      yAxis: {
        title: {
          text: this.columnNames()[1]
        },
        plotLines: [{
          value: 0,
          width: 10000,
          color: '#808080'
        }]
      },
      tooltip: {
        formatter: function() {
          return '<b>'+ this.series.name +'</b><br/>'+
          this.x +': '+ this.y;
        }
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -10,
          y: 100,
          borderWidth: 0
      },
      series: [{
          name: 'World Production',
          data: this.column("Crude oil production (1000 barrels per day)").data
      }]
    });
  }
});
});

In case anyone encounters the same problem, I hope this helps!

score 0 · Answer 2 · edited May 23 '17 at 11:58

Actually the output is calculated and kept in the js console. you are not telling to show it in the html level. To solve this, pass th output from js console to html output.

In chrome, go to dev tools(F12) and go to console. There you can see the desired output for the code you given in the question. So the output is showing, just take it out to the html front. For this you can use the method from this answer:Javascript: console.log to html

Rendering a graph in highcharts/miso

2 Answers2