Home/ Questions/Q 9222833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T03:55:45+00:00

I want to create a graph using Highcharts plugin and the data should be

  • 0

I want to create a graph using Highcharts plugin and the data should be parsed as an XML file.
The XML file data2.xml is,

<data>  
<row><t>1347559200</t><v>2.1600000000e+01</v></row> 
<row><t>1347562800</t><v>2.1504694630e+01</v></row> 
<row><t>1347566400</t><v>2.1278633024e+01</v></row> 
</data>

The HTML coding is,

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>line chart</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function(){

    options = {
      chart: {
          renderTo: 'container',
          type: 'spline'
      },
      title: {
          text: 'Temperatures'
      },
      subtitle: {
          text: 'An example of time data in Highcharts JS'
      },
      xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: { // don't display the dummy year
              month: '%e. %b',
              year: '%b'
          }
      },
      yAxis: {
          title: {
              text: 'T (°C)'
          },
          min: 0
      },
      tooltip: {
          formatter: function() {
                  return '<b>'+ this.series.name +'</b><br/>'+
                  Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
          }
      },

      series: [{
          name: 'Temperature',
          data: []
      }]
    }

  $.ajax({
    type: "GET",
    url: "data2.xml",
    dataType: "xml",
    success: function(xml) {
      var series = {  data: []
                  };

      $(xml).find("row").each(function()
      {
          var t = parseInt($(this).find("t").text())*1000
          var v = parseFloat($(this).find("v").text())
          series.data.push([t,v]);
      });
      options.series.push(series);
    }
  });

  chart = new Highcharts.Chart(options);
});
  </script>
</body>
</html>

If I execute this code It opens fine in Internet Explorer and displays the result as

Result in Internet Explorer

When I open this file in Chrome it gives me the result as,

Result in Google chrome

with the error message: 

XMLHttpRequest cannot load file:///C:/data2.xml. Origin null is not allowed by Access-    Control-Allow-Origin.

so that I used Tomcat server to run this. Though it displays the same chart image without the mentioned error message.

How to overcome this?? How can I display the chart in Google Chrome by fetching data from xml file by solving this issue??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I got this working out..
    I just run this code by using Apache/Tomcat..

    I think the error I have made is that
    1. I have to save this file in .jsp format.
    2. add var to chart and options variable.
    3. Use this chart = new Highcharts.Chart(options); inside the success function.

    • 0