Update data on an amChart graph from data within a DIV element

Question

I am having some problems with my JavaScript and amCharts graph.

What I am trying to achieve is to reload an amChart line graph with new data from a DIV element. In my final page this DIV element will be dynamically updated and hidden so will not been seen by the end user. The graph needs to be redrawn without reloading the page.

I have an JSFiddle page with an example of my attempts to reload the data.

http://jsfiddle.net/gnuoynomis/Se2UE/1/

I have tried to:

• Make objects of the points and add them into a string creating a string of objects but this does not seem to load into the graph.

  function LoadNewDataFromDIV_V1()
  {
    //This function attempts to use a string of objects to pass to the dataprovider setting
    var ChartData = document.getElementById("NewData").innerHTML;
    var CD = ChartData.split("},{");    //Split the string on the different day elements
  
    var NewChartData = "";
    for(i=0; i<CD.length; i++)
    {
      var D = CD[i];
      D = D.replace("{","");    //Remove any additional { that may exist to help with the formating later
      D = D.replace("}","");    //Remove any additional } that may exist to help with the formating later
      D = "{" + D + "}";        //Add a { and } to reformat the line correctly from the splitting
  
      if(NewChartData != "")
        NewChartData += ",";
      NewChartData += JSON.parse(D);    //Add the parsed object to the data string
    }
  
    chart.dataProvider = NewChartData;    //Update graph data
    chart.validateData();    //Revalidate chart data
  }
  

• I have also tried adding the objects into an array and tried passing this but still no luck.

  function LoadNewDataFromDIV_V2()
  {
    //This function attempts to use an array to store the data and pass this to the dataprovider setting
    var ChartData = document.getElementById("NewData").innerHTML;
    var CD = ChartData.split("},{");    //Split the string on the different day elements
  
    var NewChartDataArray = [];
    for(i=0; i<CD.length; i++)
    {
      var D = CD[i];
      D = D.replace("{","");    //Remove any additional { that may exist to help with the formating later
      D = D.replace("}","");    //Remove any additional } that may exist to help with the formating later
      D = "{" + D + "}";        //Add a { and } to reformat the line correctly from the splitting
  
      NewChartDataArray.push(D);    //Push the data to the array
    }
  
    chart.dataProvider = NewChartDataArray;    //Update graph data
    chart.validateData();    //Revalidate chart data
  }
  

My reset of the graph works perfectly if I add the entire string straight in manually and this is what I am trying to replicate with the other methods.

If anyone is able to point out what I am doing wrong then I would be most grateful. I am also open to any suggestions if you think that I could be doing this in a better way.

Answer 1

working fiddle

http://jsfiddle.net/Se2UE/2/

the core of my change is here

var NewChartDataArray = [];
  for(i=0; i<CD.length; i++)
  {
    var D = CD[i];
    D = D.replace("{","");
    D = D.replace("}","");
    D = "{" + D + "}";

    NewChartDataArray.push(JSON.parse(D));
  }

declare NewChartDataArray as array and not string then add an object to array. You had an array of strings, your library expects an array of objects

refer this