Reading a value from a file in Java Script.

[Fontayne56]

Please help. I'm a complete newbie when it comes to programming. I can hack a little HTML code to do a few things.

 

I'm looking a making a nice graph to go on our display screens which shows each of our house points in a nice visual way. Our office staff have no idea about HTML coding so i want to give them a small text file which they can update the values in rather than asking them to hack around the HTML.

 

I have found a really cool template from Amcharts. What code do i need to add to read a value from a text file.

 

Any advice would be appreciated !! Many Thanks here what i have so far !!

 

 

 

 

// note, each data item has "bullet" field.

var columnChartData = [

{

"name": "North",

"points": 35654, //value to be read from text file here !!

 

"color": "#7F8DA9",

"bullet": "images/0.gif"

},

{

"name": "South",

"points": 65456, //value to be read from text file here !!

"color": "#FEC514",

"bullet": "images/1.gif"

},

{

"name": "East",

"points": 45724, //value to be read from text file here !!

"color": "#DB4C3C",

"bullet": "images/2.gif"

},

{

"name": "West",

"points": 13654, //value to be read from text file here !!

"color": "#DAF0FD",

"bullet": "images/3.gif"

}

];

 

 

AmCharts.ready(function () {

// SERIAL CHART

var chart = new AmCharts.AmSerialChart();

chart.dataProvider = columnChartData;

chart.categoryField = "name";

chart.startDuration = 1;

// sometimes we need to set margins manually

// autoMargins should be set to false in order chart to use custom margin values

chart.autoMargins = false;

chart.marginRight = 0;

chart.marginLeft = 0;

chart.marginBottom = 0;

chart.marginTop = 0;

 

// AXES

// category

var categoryAxis = chart.categoryAxis;

categoryAxis.inside = true;

categoryAxis.axisAlpha = 0;

categoryAxis.gridAlpha = 0;

categoryAxis.tickLength = 0;

 

// value

var valueAxis = new AmCharts.ValueAxis();

valueAxis.minimum = 0;

valueAxis.axisAlpha = 0;

valueAxis.maximum = 80000;

valueAxis.dashLength = 4;

chart.addValueAxis(valueAxis);

 

// GRAPH

var graph = new AmCharts.AmGraph();

graph.valueField = "points";

graph.customBulletField = "bullet"; // field of the bullet in data provider

graph.bulletOffset = 16; // distance from the top of the column to the bullet

graph.colorField = "color";

graph.bulletSize = 34; // bullet image should be rectangle (width = height)

graph.type = "column";

graph.fillAlphas = 0.8;

graph.cornerRadiusTop = 8;

graph.lineAlpha = 0;

graph.balloonText = "[[category]]: [[value]]";

chart.addGraph(graph);

 

// WRITE

chart.write("chartdiv");

});

 

 

[mavhc]

create a text file that's in folder on the web server, put the numbers in 4 rows:

1
2
3
4

 

reference that file in the code, I've called it values.txt in the same folder as this html, but you can change that, have a sub folder where the user has write perms.

 

amCharts examples

<br />
var valueList = []<br />
fetch("values.txt").then(function(response) {<br />
  response.text().then(function(text) {<br />
    valueList = text.split("\n");<br />
    console.log(valueList);<br />
    doChart()<br />
  });<br />
});<br />





<br />
// note, each data item has "bullet" field.<br />
function doChart(){<br />
var columnChartData = [<br />
{<br />
"name": "North",<br />
"points": window.valueList[0], //value to be read from text file here !! <br />
<br />
"color": "#7F8DA9",<br />
"bullet": "images/0.gif"<br />
},<br />
{<br />
"name": "South",<br />
"points": window.valueList[1], //value to be read from text file here !! <br />
"color": "#FEC514",<br />
"bullet": "images/1.gif"<br />
},<br />
{<br />
"name": "East",<br />
"points": window.valueList[2], //value to be read from text file here !! <br />
"color": "#DB4C3C",<br />
"bullet": "images/2.gif"<br />
},<br />
{<br />
"name": "West",<br />
"points": window.valueList[3], //value to be read from text file here !! <br />
"color": "#DAF0FD",<br />
"bullet": "images/3.gif"<br />
}<br />
];<br />
<br />
<br />
AmCharts.ready(function () {<br />
// SERIAL CHART<br />
var chart = new AmCharts.AmSerialChart();<br />
chart.dataProvider = columnChartData;<br />
chart.categoryField = "name";<br />
chart.startDuration = 1;<br />
// sometimes we need to set margins manually<br />
// autoMargins should be set to false in order chart to use custom margin values<br />
chart.autoMargins = false;<br />
chart.marginRight = 0;<br />
chart.marginLeft = 0;<br />
chart.marginBottom = 0;<br />
chart.marginTop = 0;<br />
<br />
// AXES<br />
// category<br />
var categoryAxis = chart.categoryAxis;<br />
categoryAxis.inside = true;<br />
categoryAxis.axisAlpha = 0;<br />
categoryAxis.gridAlpha = 0;<br />
categoryAxis.tickLength = 0;<br />
<br />
// value<br />
var valueAxis = new AmCharts.ValueAxis();<br />
valueAxis.minimum = 0;<br />
valueAxis.axisAlpha = 0;<br />
valueAxis.maximum = 80000;<br />
valueAxis.dashLength = 4;<br />
chart.addValueAxis(valueAxis);<br />
<br />
// GRAPH<br />
var graph = new AmCharts.AmGraph();<br />
graph.valueField = "points";<br />
graph.customBulletField = "bullet"; // field of the bullet in data provider<br />
graph.bulletOffset = 16; // distance from the top of the column to the bullet<br />
graph.colorField = "color";<br />
graph.bulletSize = 34; // bullet image should be rectangle (width = height)<br />
graph.type = "column";<br />
graph.fillAlphas = 0.8;<br />
graph.cornerRadiusTop = 8;<br />
graph.lineAlpha = 0;<br />
graph.balloonText = "<span style='font-size:13px;'>[[category]]: <b>[[value]]";<br />
chart.addGraph(graph);<br />
<br />
// WRITE<br />
chart.write("chartdiv");<br />
});<br />
}<br />

[Fontayne56]

THANKYOU ! SO MUCH !!! But for some reason the chart doesn't load any ideas ?

 

Ryan

[Fontayne56]

I have uploaded a screen shot does this help ?

Edited December 14, 2017 by Fontayne56

[mavhc]

Press F12 in the browser and read the console errors

One thing I changed was it gets the charts js files from the internet, you can change that back if needed.