Develop Reference

Security Issue while using js amcharts with PHP

Using js amcharts with PHP, Found that source code and paths is accessible through charts. How to block it as this can be serious security issue. I am new to PHP, please elaborate the answer if possible. Thanks

PHP is a server side language amcharts.js runs on the client, meaning any data it receives must be accessible to the same client that is rendering the chart. You can't make data visible to the cart but invisible to the user, however if you want to limit what the user can see you can render the chart data as JSON in the containing html page (using json_encode) and then pass it as a variable to the charting library, such as:
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
"dataProvider": <%php echo json_encode($ResultsArray); %>
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>

amCharts json data from mySql - Chart not displaying

Unable to get a pie chart to display using database data. My json looks good?
Sample Json
[{"id":1,"sport":"football","score":138.10,"entry":3.00,"winnings":8.00},{"id":2,"sport":"basketball","score":120.00,"entry":10.00,"winnings":20.00}]
I know the chart is connecting to the dataset, because I get a colored block with NaN as the label, with one block for each row in my database. See image. "entry" is a float in the Db and I've swapped it with another field that's an Int in the Db, as I was thinking that the float was coming back as Not A Number, but that doesn't look to be the case.
<script type="text/javascript">
AmCharts.makeChart("piechartdiv", {
"type": "pie",
"dataLoader": {
"url": "http://siteaddress.com/api/entries",
"format": "json",
"showErrors": "true"
},
"titlefield": "sport",
"valuefield": "entry",
"balloontext": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"legend": {
"align": "center",
"markertype": "circle"
}
});
</script>
<div id="piechartwrapper">
<div id="piechartdiv" style="width: 100%" class="col-md-6 col-md-offset-0"></div>
</div>

Your fields are set up incorrectly - they're case sensitive. titleField, valueField, balloonText and markerType are camel-case. Your config has them all in lowercase.
Updated code below:
AmCharts.makeChart("piechartdiv", {
"type": "pie",
"dataLoader": {
"url": "http://siteaddress.com/api/entries",
"format": "json",
"showErrors": "true"
},
"titleField": "sport",
"valueField": "entry",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"legend": {
"align": "center",
"markerType": "circle"
}
});

Plotting timestamp data using Javascript

I have an array of timestamps like [1485343314150, 1485343314150, 1485343314150, 1485343314300, 1485343314300, 1485343314400,1485343314450].
Here there are 3 values for 1485343314150, 2 values for 1485343314300 and 1 value each for 1485343314400 and 1485343314450
So while plotting on the graph
X = [1485343314150,1485343314300,1485343314400,1485343314450]
Y = [3,2,1,1]
I need a way to represent these X and Y such that Xs values are converted to a human readable datetime like 24-February 5:25 PM.
Can it be done via Chart.js or amCharts? I searched but couldn't find anything.

In AmCharts you can set parseDates to true in your categoryAxis (which is the same as the X axis) if you're using a serial chart (line, smoothed line, or column). AmCharts' XY chart can also handle dates as well by setting one of the valueAxes' type to "date", but the chart types available are limited to lines/bullets
When you enable parseDates, the chart will automatically format them to use readable date strings. You can adjust the format by specifying your own dateFormats array in the categoryAxis. You can find more information on that here.
Here's an example using a serial chart. Your data frequency is in incrments of milliseconds, so I set the categoryAxis' minPeriod to accommodate:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"timestamp": 1485343314150,
"value": 3
},{
"timestamp": 1485343314300,
"value": 2
},{
"timestamp": 1485343314400,
"value": 1
},{
"timestamp": 1485343314450,
"value": 1
}],
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "value"
}],
"categoryField": "timestamp",
"categoryAxis": {
"parseDates": true,
"minPeriod": "fff"
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can further format the axis' output through the dateFormats property as mentioned before. In this scenario, you'll want to change the string in the fff period. Depending on the amount of data, you may need to change the larger periods as well.

store the name of a function in a JSON file and later be able to load and call it from within a script?

That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}

Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.

AngularJS debugging in template

In my AngularJS Controller I got
var test = {
"type": "pie",
"theme": "light",
"data": dataWantedArea,
"valueField": "value",
"titleField": "name",
"balloon": {
"fixedPosition": true
},
"autoMargins": false,
"marginLeft": 5,
"marginRight": 5,
"marginBottom": 5,
"marginTop": 5,
"pullOutRadius": 0,
colors: ["#36CB1F", "#F58426", "#F53E26"],
"export": {
"enabled": true
}
};
in my template I do
<am-chart ng-if="test.data.length" id="test" options="test" width="90vw" height="325px"></am-chart>
Problem: its never shown, obviously test.data.length is ALWAYS false - so I would like to print some debugging in my template, is that possible somehow?
Of course If you know a direct solution to my problem, feel free to answer.

If you want to use data or variable from controller to html, you have to use $scope.
Use $scope.test intead of var test

To debug your code there is a cool browser plugin available.
http://ng-inspector.org/
There you can see a tree and all your values. It's very helpful to debug your code. You can see your scope and you can find and see problems.