How to Create a chart with Multiple Data in Javascript

Question

I want to produce chart like
this image

I got a source code that will likely produce a similar chart from this link

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },
  yAxis: {
    title: {
      text: 'Temperature'
    },
    labels: {
      formatter: function() {
        return this.value + '°';
      }
    }
  },
  tooltip: {
    crosshairs: true,
    shared: true
  },
  plotOptions: {
    spline: {
      marker: {
        radius: 4,
        lineColor: '#666666',
        lineWidth: 1
      }
    }
  },
  series: [{
    name: 'Tokyo',
    marker: {
      symbol: 'square'
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
      y: 26.5,
      marker: {
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
      }
    }, 23.3, 18.3, 13.9, 9.6]

  }, {
    name: 'London',
    marker: {
      symbol: 'diamond'
    },
    data: [{
      y: 3.9,
      marker: {
        symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
      }
    }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 50, 4.8]
  }]
});

<body>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/series-label.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>

  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>

But when I run this onto my own browser, there's an error from this one

Highcharts.chart('container', {
Uncaught ReferenceError: Highcharts is not defined

I copied all the source from that code, I dont think I missed something. please help

JOjohn · Accepted Answer · 2018-01-12 12:35:34Z

2

The code you implemented for the chart is before the implementation of the plug-in itself. all this

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

should be placed before the script that contains the :

 Highcharts.chart('container', {

in your code.

Try this and let me know.

Ps: Also it is usually better to place all the scripts just before the closing of the '</body>' tag after all the rest of your html. It lets all the html be loaded first before the js has a chance to apply any change to it.

edited Jan 12, 2018 at 12:35

answered Jan 12, 2018 at 12:25

JOjohn

1735 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rendy Eza Putra Over a year ago

well thank you, i dont know that the order of the scripts would cause that. it works!

JOjohn Over a year ago

No worries, please choose it as a valid answer if it helped, so it can help others to. :)

charlietfl · Accepted Answer · 2018-01-12 12:29:24Z

You can't use a method like Highcharts before the associated library has loaded. The order that scripts load is important when code in one script tag is dependent on code in another

Switch the order of the scripts and it works fine below

<!DOCTYPE html>
<html>

<head> 
</head>

<body>
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/series-label.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script type="text/javascript">
    Highcharts.chart('container', {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Monthly Average Temperature'
      },
      subtitle: {
        text: 'Source: WorldClimate.com'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
      },
      yAxis: {
        title: {
          text: 'Temperature'
        },
        labels: {
          formatter: function() {
            return this.value + '°';
          }
        }
      },
      tooltip: {
        crosshairs: true,
        shared: true
      },
      plotOptions: {
        spline: {
          marker: {
            radius: 4,
            lineColor: '#666666',
            lineWidth: 1
          }
        }
      },
      series: [{
        name: 'Tokyo',
        marker: {
          symbol: 'square'
        },
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
          y: 26.5,
          marker: {
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
          }
        }, 23.3, 18.3, 13.9, 9.6]

      }, {
        name: 'London',
        marker: {
          symbol: 'diamond'
        },
        data: [{
          y: 3.9,
          marker: {
            symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
          }
        }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 50, 4.8]
      }]
    });
  </script>

</body>

</html>

well thank you, i dont know that the order of the scripts would cause that

Collectives™ on Stack Overflow

How to Create a chart with Multiple Data in Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related