javascript - No graph displayed using Highcharts -
i have written following javascript code generate column graph using highcharts, no graph displayed. problem here? checked syntax errors, not find any.
<div id="container1" style="width:100%; height:400px;"></div> function create_graph() { var xaxislabels = ['a ', 'b', 'c', 'd', 'e']; var yaxistitle = 'average'; var xaxistitle = 'xtitle'; var graphtitle= 'title'; var pvalues = [1,2,3,4,5]; var nvalues = [1,3,4,5,7]; chart = new highcharts.chart ({ chart: { height: 600, width: 1200, renderto: container1, type: 'column' //reflow: false }, title: { text: graphtitle }, xaxis: { categories: xaxislabels }, yaxis: { min: 0, title: { text: yaxistitle } }, tooltip: { headerformat: '<span style="font-size:10px">{point.key}</span><table>', pointformat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>', footerformat: '</table>', shared: true, usehtml: true }, plotoptions: { column: { pointpadding: 0.2, borderwidth: 0 } }, series: [{ name: 'postives', data: pvalues }, { name: 'negatives', data: nvalues }] }); } create_graph();
please let me know if more detail required. keep getting error "it looks post code, please add details."
it's working fine on end:
index.html
<html> <head> <meta charset="utf-8"> <title>document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container1" style="width:100%; height:400px;"></div> <script type="text/javascript"> function create_graph() { var xaxislabels = ['a ', 'b', 'c', 'd', 'e']; var yaxistitle = 'average'; var xaxistitle = 'xtitle'; var graphtitle= 'title'; var pvalues = [1,2,3,4,5]; var nvalues = [1,3,4,5,7]; chart = new highcharts.chart ({ chart: { height: 600, width: 1200, renderto: 'container1', type: 'column' //reflow: false }, title: { text: graphtitle }, xaxis: { categories: xaxislabels }, yaxis: { min: 0, title: { text: yaxistitle } }, tooltip: { headerformat: '<span style="font-size:10px">{point.key}</span><table>', pointformat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>', footerformat: '</table>', shared: true, usehtml: true }, plotoptions: { column: { pointpadding: 0.2, borderwidth: 0 } }, series: [{ name: 'postives', data: pvalues }, { name: 'negatives', data: nvalues }] }); } create_graph(); </script> </body> </html>
Comments
Post a Comment