This is about data types. The line chart is expecting a string, and getting a number. If your data generator creates the number as a string with quotes, e.g. ["1",-0.164],["2",-0.1779].... then it will plot. I may have a look at reverting to the ChartMaker style of data entry which allows for setting of types for an update to the extension.
@putera_melaka you will get flickering if you try to refresh the graph with new data, I also found that trying to feed new data to the graph with the webviewstring doesn't work well. Better to generate a chart using the canvas if you want to update data in real time.
Cleaned up a bit. Used @putera_melaka aia as a base and modified only the x-acceleration.
Select START ( 1 ) let run a few seconds inducing acceleration change, select STOP ( 2 ), then Show Graph. This is not real time. Uses a Clock to smooth the acceleration data sampling once a second and displays points collected on the xAccelList between steps 1 and 2. You could save the List in a TinyDB.
See attached an example of using google charts with real time data. rtGoogleLineChart.aia (3.1 KB)
Notice that the "clock" is running in the html, not in the app, and ensure that any values passed with the WebViewString are converted to numbers (see where I used parseInt() - there is also a parseFloat() ).
This example uses a changing webviewstring value to run the loop, you need to feed your realtime values into the when webviewstringChanged block. This seems to run OK for a 1000ms interval, i don't recommend going below this, there won't be enough time to turn things around at the google end.
There may be additional "cycle" issues if/when trying to run three graphs at once ?
Here is a very different way to plot x,y,z using a Canvas in real time.
One developer developed a ‘seismograph’ using AI2 and the Accelerometer. He plots smooth x,y and z curves simultaneously. The example might be something you could do to plot your data… see Seismic …Look at the aia on the 6/25/14 post . What this developer does might suit your purposes but be aware he has a simplified approach to smoothing. See the discussions of possible ways to filter the accelerator data stream discussed here> Filter the errors of accelerometer readings from smartphone using mit app inventor .
do i need to make separate html file for x,y and z(as i realise the colour is set to blue which refer to x-axis colour even for y and z)
2.how do i make the graph fit perfectly(which code do i change? is it the pixel?)
which certainly is a List. 
N
