yhendricks

Forum Replies Created

Viewing 1 replies (of 1 total)
  • Forum: Plugins
    In reply to: [amCharts: Charts and Maps] How to create charts dynamically
    yhendricks

    (@yhendricks)

    11 years, 3 months ago

    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>
Viewing 1 replies (of 1 total)