Javascript examples for highcharts:Chart Data
feed data from json for column chart
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () {/* w w w. j a v a 2s . c o m*/ $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'World\'s largest cities per 2014' }, subtitle: { text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>' }, xAxis: { type: 'category', labels: { rotation: -45, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: 'Population (millions)' } }, legend: { enabled: false }, tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' }, series: [{ name: 'Population', data: [["10000164@example",4],["10000166@example",2],["10000173@example",1],["10000177@example",3]], dataLabels: { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', x: 4, y: 10, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black' } } }] }); }); </script> </head> <body> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div> </body> </html>