How to create charts dynamically
-
Hello,
I am producing CSV files and upload it to the default library.
Could you tell me how can I produce charts dynamically?
For example:
1 – By making a simple template chart which hast the shortcode [amcharts id=”pie-1″] and change the data inside it and recall the a function to make it as new chart [amcharts id=”pie-2″].2- Calling specific url to upload csv and return the [amcharts id=”pie-2″] or chart ID ?
Any idea how can I make charts and post them automated ?
Thank you,
looking forward to your reply,
-
Would an ability to pass custom parameters via shortcode do the trick for you. I.e.:
[amcharts id="pie-1" data-file="data1.csv"]It didn’t work or maybe I could not address it correctly.
It still load the old data in the JS file.I tried the followings:
[amcharts id=”pie-1″ data-file=”/wp-content/uploads/2014/11/abc.csv”]
[amcharts id=”pie-1″ data-file=”http://domain.com/wp-content/uploads/2014/11/abc.csv”%5D
Could you give me an example about how to use it and how should be file structure o the csv, does it require to be different or ?!
Thank you, looking forward your reply.
I’m sorry if I wasn’t clear enough. That was not supposed to work. I was trying to gauge the possible solutions to the issue you have raised for possible implementation.
I.e. let’s say I have this shortcode:
[amcharts id="pie-1" data-file="/wp-content/uploads/2014/11/abc.csv" data-animation="1"]The plugin, among generating all the other required JavaScript would also carry over those additional data variables in form of JavaScript variables, i.e.:
var chartInstanceData = { "pie-1": { "data-file": "/wp-content/uploads/2014/11/abc.csv", "data-animation": "1" } };You could then add your own JS code to act on those accordingly.
Do you think something like that would solve the issue at hand?
Well, I don’t get where should I add this.
Here is the JavaScript of the default chart.
var %CHART% = AmCharts.makeChart(“%CHART%”, {
“type”: “pie”,
“theme”: “none”,
“dataProvider”: [
{
“country”: “Lithuania”,
“litres”: 501.9
},
{
“country”: “Czech Republic”,
“litres”: 301.9
}, {
“country”: “Ireland”,
“litres”: 201.1
}, {
“country”: “Germany”,
“litres”: 165.8
}, {
“country”: “Australia”,
“litres”: 139.9
}, {
“country”: “Austria”,
“litres”: 128.3
}, {
“country”: “UK”,
“litres”: 99
}, {
“country”: “Belgium”,
“litres”: 60
}, {
“country”: “The Netherlands”,
“litres”: 50
}],
“valueField”: “litres”,
“titleField”: “country”,
“exportConfig”:{
menuItems: [{
icon: ‘/lib/3/images/export.png’,
format: ‘png’
}]
}
});What shall I replace so that I will load data from my CSV instead of these values ?
OK, so just to get it clear: are you struggling on how to pass some variables from the shortcode to the chart code OR how to load external data files at all?
If it’s the latter, you might find this tutorial useful:
Indeed both maybe.
Please correct me If i am wrong.
As I said I have the CSV file uploaded to domain.1- in resource part I should use
http://www.amcharts.com/lib/3/amcharts.js
http://www.amcharts.com/lib/3/pie.js2- in Html part
<div id=”%CHART%” style=”width: 100%; height: 300px;”></div>
3 – in Java script part
function loadCSV(file)
function parseCSV(data)
loadCSV(“data.txt”)var %CHART% = AmCharts.makeChart(“%CHART%”, {
“type”: “pie”,
“theme”: “none”,
“dataProvider”:
-get some data from above-“exportConfig”:{
menuItems: [{
icon: ‘/lib/3/images/export.png’,
format: ‘png’
}]
}Is the above correct ?
OR there is a way that I can use SHORTCODE as you said and do like this[amcharts id=”pie-1″ data-file=”/wp-content/uploads/2014/11/abc.csv” data-animation=”1″]
var chartInstanceData = {
“pie-1”: {
“data-file”: “/wp-content/uploads/2014/11/abc.csv”,
“data-animation”: “1”
}
};There is currently no way to pass parameters via the shortcode. We’ll consider adding this functionality (as proposed above) in future version.
As for the dynamic loading of data, you need to understand that chart does not have any loading functions out-of-the-box. The functions loadCSV, parseCSV you took from the tutorial need to be defined. So you need to paste the whole code for those functions as well.
Ok, I hope you add it ASAP.
One more question, Is there anyway to duplicate the current Chart and copy as new one ?
Where the files of the Chart saved ? If I can access it I may can manipulate it by my scripts.
Thanks
Could you tell me where are the files of the javascript(data) saved so that I can change it ?
In other words, from where (which file) do you load the following values ?var amchart1 = AmCharts.makeChart(“amchart1”, {
“type”: “funnel”,
“theme”: “none”,
“dataProvider”: [{
“title”: “Website visits”,
“value”: 300
}, {
“title”: “Downloads”,
“value”: 123
}, {
“title”: “Requested prices”,
“value”: 98
}, {
“title”: “Contaced”,-rw-r–r–. 1 nginx nginx 1.5K Nov 25 13:41 amcharts.php
drwxr-xr-x. 2 nginx nginx 4.0K Nov 27 16:52 defaults/
drwxr-xr-x. 2 nginx nginx 4.0K Nov 25 13:41 images/
drwxr-xr-x. 2 nginx nginx 4.0K Nov 27 17:09 includes/
drwxr-xr-x. 2 nginx nginx 4.0K Nov 25 13:41 langs/
drwxr-xr-x. 5 nginx nginx 4.0K Nov 27 17:26 lib/
-rw-r–r–. 1 nginx nginx 4.4K Nov 25 13:41 readme.txtHello,
I am still waiting for you reply, please tell me where in file level I can change the values.
Thanks
Hello,
I’m afraid I can’t provide an ETA for this feature (passing data to the chart using shortcodes)
As for your other question, like everything in WordPress it is saved into a database as a post and it’s meta info.
We save each chart as a custom post type “amchart”. The javascript part is saved as “_amcharts_javascript” meta.
Here’s more information about get_post_meta() – a WP function that can be used to extract meta values:
Hi,
a custom parameter would be great!! Something like above [amcharts id=”pie-1″ data-file=”data1.csv”] or just [amcharts id=”pie-1″ para=”whatever”] which can be fetched by jscript..
I’m currently using a <script> var filename = “BRS”;</script> before the shortcode, and then fetch the var in the chart code. Works fine if there is only one chart on page, but not with more than one….
was trying a workaround using the %Chart% placeholder like this in post <script> var filename%Chart% = “BRS”;</script>, but also not working..
Any other idea on how to pass ‘custom parameter’ through jscript var if there are several charts on one page/post?
Hi Alex,
We just released a new 1.0.7 version. It adds support for passing variables into chart code via shortcodes.
Take a look at the last section in plugin faq for details:
Hi martynasma,
I tried release 1.0.7 plugin for passing variables into chart code but without success.
This is my shortcode I used when callin the chart:
[amcharts id=”chart-5″ patientId=”29″]This is the shortcode as displayed in the “Charts & Maps” list screen:
[amcharts id=”chart-5″]When I have the following line present no chart is displayed, but when I remove it the chart works but then I am unable to use the variable parameters.
alert(AmCharts.wpChartData.patientId);I hope that you could point me in the right direction. Any advice will be appreciated
HTML For Chart :
<!DOCTYPE html> <html> <head> <title>Patient Intakes | amCharts</title> <meta name="description" content="chart created using amCharts live editor" /> <!-- amCharts javascript sources --> <script src="http://cdn.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script> <script src="http://cdn.amcharts.com/lib/3/serial.js" type="text/javascript"></script> <!-- amCharts javascript code --> <!-- cutom functions --> <script> AmCharts.loadJSON = function (url) { // create the request if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari var request = new XMLHttpRequest(); } else { // code for IE6, IE5 var request = new ActiveXObject('Microsoft.XMLHTTP'); } // load it // the last "false" parameter ensures that our code will wait before the // data is loaded request.open('GET', url, false); request.send(); // parse adn return the output return eval(request.responseText); }; </script> <script type="text/javascript"> AmCharts.ready(function () { // load the data //var chartData = AmCharts.loadJSON('./wp-content/myphp/data3.php'); alert(AmCharts.wpChartData.patientId); // I want to make the following dynamic. Not sure how to achieve this? var chartData = AmCharts.loadJSON('./wp-content/myphp/data3.php?user_id=29'); //alert( AmCharts.wpChartData.patientId ); AmCharts.makeChart("chartdiv", { "type": "serial", "pathToImages": "https://cdn.amcharts.com/lib/3/images/", "categoryField": "category", "marginTop": 0, "startDuration": 1, "theme": "default", "dataProvider": chartData, "categoryAxis": { "gridPosition": "start", "title": "INTAKES" }, "chartScrollbar": {}, "trendLines": [], "graphs": [ { "balloonText": "lower:open(h) upper:close(h)", "closeField": "close", "fillAlphas": 1, "id": "AmGraph-1", "openField": "open", "title": "graph 1", "type": "column", "valueAxis": "Not set", "valueField": "Not set" }, { "bullet": "round", "bulletColor": "#0000FF", "customMarker": "Intakes", "id": "AmGraph-2", "lineColor": "#51ED33", "lineThickness": 3, "title": "graph 2", "type": "step", "valueField": "intakes" } ], "guides": [], "valueAxes": [ { "id": "ValueAxis-2", "stackType": "regular", "synchronizationMultiplier": 0, "synchronizeWith": "Not set", "unitPosition": "left", "dashLength": 10, "gridAlpha": 0.4, "title": "HOURS OF DAY" } ], "allLabels": [], "balloon": {}, "titles": [ { "id": "Title-1", "size": 15, "text": "Patient Intakes" } ] } ); }); </script> </head> <body> <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div> </body> </html>The shortcode parameters that need to be passed into chart code need to be prefixed with “data-“:
[amcharts id="chart-5" data-patientId="29"]
The topic ‘How to create charts dynamically’ is closed to new replies.
