I have the following javascript function for listbox organization:
$("#organization").change(function(e) {
//function updateOrganization() {
organization = $("#organization").val();
indicator = $("#indicators").val();
funcid = "fill_chart_average_score";
//console.log('changed');
$.getJSON('functions/getfunctions.php', {
"organization":organization,
"indicator":indicator,
"funcid":funcid},
function(dataChart) {
var chart = AmCharts.makeChart("chartaveragescore", {
"theme": "light",
"type": "serial",
"startDuration": 1,
"dataProvider": dataChart,
"rotate": false,
"categoryField": "organisatie",
"valueAxes": [ {
"gridColor": "#FFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillColorsField": "fillcolor", //Dit veld heb ik meegegeven vanuit SQL functie en bevat de HEX kleurcodes BD
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "score"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
},0);
$('.chart-input').off().on('input change',function() {
var property = jQuery(this).data('property');
var target = chart;
chart.startDuration = 0;
});
});
});
This works great, but what i want now is to make a function not based on $("#organization").change(function(e) but just make a function like function updateOrganization() and call this function in an onchange within the html element. When i change the $("#organization").change(function(e) with function updateOrganization() the function doesn't work anymore.
I'm a starting javascript learner :).
I think you want to call function on change of dropdown and you want to do it with onchange event of select tag. This might help you.
You should declare your function outside the block. Something like:
function updateOrganization() {
organization = $("#organization").val();
indicator = $("#indicators").val();
funcid = "fill_chart_average_score";
// ...
}
and then use it as:
$("#organization").change(updateOrganization);
Related
I am currently in the process of upgrading migrating my amCharts from V3 to V4 (I wish I hadn't started!) - One of the many issues I'm facing is trying to create a Gantt chart with JSON data.
I had no issue doing this using V3 library, but for the life of me I can't wrap my head around version 4 configuration.
This is how I loaded data using V3 (without any issues):
var chart_today = new Date();
var chart_month = chart_today.getMonth() + 1;
var chart_day = chart_today.getDate();
if (chart_month < 10) chart_month = '0' + chart_month;
if (chart_day < 10) chart_day = '0' + chart_day;
$('.ganttdiv').each(function(obj) {
var chart = AmCharts.makeChart(obj, {
"type": "gantt",
"theme": "light",
"responsive": {
"enabled": true
},
"marginRight": 70,
"period": "mm",
"precision": -1,
"dataDateFormat": "YYYY-MM-DD",
"columnWidth": 0.5,
"valueAxis": {
"type": "date"
},
"graph": {
"fillAlphas": 1
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": chart_today.getFullYear() + "-" + chart_month + "-" + chart_day,
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataLoader": {
"url": "https://api.myjson.com/bins/zkhs3",
"async": true,
"reload": 300
},
"valueScrollbar": {
"autoGridCount": true
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
},
});
});
I am attempting to recreate the same gantt chart - I have stripped back the bells and whistles in an effort to just display data but I'm having no joy.
Link to CodePen with latest attempt
Any suggestions would be greatly appreciated!
--also any suggestions for renaming the question would be a bonus :P
I am making an AMcharts stockchart with markers on it. The way I have done the markers is by taking the value of the price series only if a condition is met. Therefore the data has 4 columns:
Date
SPY price (SP500 etf)
Daily RSI Stance 1 (1,0 boolean value)
Signal (If Daily RSI Stance 1 = 1, SPY price, else blank)
CSV with data found here:
http://quantresearch.club/wp-content/themes/oceanwp/testing/RSI1dip.csv
The problem is that even though the data is perfectly aligned it does not show that way on the amcharts chart, which has me completely stumped. The markers ie. "4. Signal" show up under the "2. SPY price" timeseries. As shown here:
and finally for the code:
This first part is contained in the larger code below and it is what makes both timeseries appear.
"panels": [ {
"stockGraphs": [ {
"id": "g1",
"title": "SPY Price",
"valueField": "spy",
//"type": "line",
"lineColor": "#39fe90",
"useDataSetColors": false
},{
"id": "g2",
"title": "Signal",
"valueField": "Signal",
"bulletSize": 10,
"bullet": "round",
//"bulletBorderAlpha": 1,
"lineColor": "#551A8B",
"useDataSetColors": false
AmCharts.loadFile( "http://quantresearch.club/wp-content/themes/oceanwp/testing/RSI1dip.csv", {}, function( response ) {
var csvData = AmCharts.parseCSV( response, {
"useColumnNames": true
});
//var csvDataLength = csvData.length;
chartData = [];
guideData = [];
//var a = 0;
//var b = 0;
//var c;
var lastdate;
var firstdate;
$.each(csvData, function(i,k){
if(k.Date != undefined) {
chartData.push( {
"Date": k.Date,
"SPY": k.SPY,
"Signal": k.Signal
})
}
});
//console.log(guideData);
chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"labelRotation" : 30,
"minPeriod": "DD",
"axisAlpha" : 1,
"gridAlpha": 0,
//"dateFormats" : "MMM-YYYY",
},
"legend": {
"useGraphSettings": true
},
"dataSets": [ {
"fieldMappings": [{
"fromField": "SPY",
"toField": "spy"
},
{
"fromField": "Signal",
"toField": "Signal"
}],
"dataProvider": chartData,
"categoryField": "Date",}],
//Where the chart gets populated
"panels": [ {
"stockGraphs": [ {
"id": "g1",
"title": "SPY Price",
"valueField": "spy",
//"type": "line",
"lineColor": "#39fe90",
"useDataSetColors": false
},{
"id": "g2",
"title": "Signal",
"valueField": "Signal",
"bulletSize": 10,
"bullet": "round",
//"bulletBorderAlpha": 1,
"lineColor": "#551A8B",
"useDataSetColors": false
}],
"stockLegend": {
//"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]",
//"labelText" : "SPY",
"combineLegend": true,
"markerType" : "line"
}
}, ],
"chartScrollbarSettings": {
"graph": "g1",
"usePeriod": "DD",
"position": "bottom",
"gridAlpha": 0
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"inputFieldsEnabled" : true,
"position": "top",
"periods": [ {
"period": "YYYY",
"count": 2,
"label": "2Y"
}, {
"period": "YYYY",
"count": 5,
"label": "5Y"
},
{
"period": "YYYY",
"count": 10,
"label": "10Y"
},
{
"period": "MAX",
"label": "MAX",
"selected": true,
}
]
},
"valueAxesSettings": {
"gridColor": "#555",
"gridAlpha": 0,
//"axisAlpha" : 1,
"inside": false,
"position": "right",
"showLastLabel": true
},
"panelsSettings": {
"usePrefixes": false,
"marginRight" : 20,
"marginBottom" : 10,
"marginLeft" : 20,
"marginTop" : 10
},
"export": {
"enabled": true,
"position": "top-left"
}
} );
/*chart.addListener("init", function(event) {
console.log(event);
});*/
});
If anyone has any ideas about this it would be greatly appreciated.
Thank you very much.
The issue is due to the stock chart's data grouping functionality. The chart groups data to improve performance when there a lot of points visible, which impacts how the line is drawn as it is using points derived from its data grouping algorithm. By default it's using the "Close" value in the grouping to plot your points and changing the periodValue in your SPY graph will change the appearance. Since your Signal data set has much fewer points in comparison, the chart simply plots out the raw values for that graph, which do not match up to your grouped SPY graph's values, regardless of which periodValue you use.
Your only option to make the values from both graphs line up correctly is to disable data grouping by setting maxSeries to 0 in your categoryAxesSettings. This will impact performance if you have a lot of points.
Here's a codepen of your chart with maxSeries set to 0.
I am trying to make a chart using amChart in AngularJS Directive. It works on hardcoded data but when I tried to change the way it get to display the data from a json file, it doesn't work at all. But when I console.log the data I am trying to get I received a json data I expected but again the chart is not rendering/displaying the data.
CHARTS.DIRECTIVE.JS
(function(){
"use strict";
var myApp = angular.module('testchart', []);
myApp.directive('test', ['$http',
function($http){
return {
restrict: 'AE',
replace: true,
template: '<div id="testchart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function(scope, element, attrs){
var chart = false;
var data = [];
function generateChartData() {
$http.get('http://localhost:81/......./testdata.json')
.then(function(req, res) {
var data = req.data;
//return data;
console.log(data);
});
}
generateChartData();
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = AmCharts.makeChart("testchart", {
"type": "serial",
"theme": "none",
"marginLeft": 20,
"pathToImages": "vendor/amchart/images",
"dataProvider": data,
"valueAxes": [{
"axisAlpha": 0,
"inside": true,
"position": "left",
"ignoreAxisWidth": true
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 6,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY",
"cursorAlpha": 0,
"cursorPosition": "mouse"
},
"dataDateFormat": "YYYY",
"categoryField": "year",
"categoryAxis": {
"minPeriod": "YYYY",
"parseDates": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
initChart();
};
}
}
}]);
})();
Again if the data is hardcoded in the chart it works perfectly.
console.log returns expected json data.
I don't know what to do anymore, I've been a days trying to solve this problem.
Edit/Update(2):
I got it work but in other way though, but it does what I wanted to do. But I don't know if it is a right way to do it.
Updated Plnkr link to my work
While zooming my Bar amchart is rendering very slow when data is large, that is, 2975 points. Although, rendering is fine but it is lagging while zooming in/out using drag icon. The code is as below:
for(var i=0; i<title.length; i++) {
var graphElem = {
"title":title[i],
"valueField":valueFields[i],
"valueAxis":"v1",
"type": "column",
"fillAlphas": 0.8,
"lineAlpha": 0.2
};
graph.push(graphElem);
}
var chart = AmCharts.makeChart(graphType, {
"type": "serial",
"theme": "light",
"pathToImages": "/grm/images/",
"legend": {
"equalWidths": false,
"position": "bottom",
"spacing": 3,
"markerSize":8,
},
"dataProvider": dataProvider,
"valueAxes": [ {
"id":"v1",
"axisThickness": 1,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "left",
"integersOnly" : true
} ],
"columnSpacing" : 0,
"graphs": graph,
"chartScrollbar": {
"dragIconHeight" : 25,
"dragIconWidth" : 25
},
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"categoryBalloonDateFormat": "MMM DD, YYYY JJ:NN"
},
"categoryField": "linkTimestamp",
"categoryAxis": {
"parseDates": true,
"axisColor": "#000000",
"minPeriod": "mm"
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS"
} );
chart.addListener("dataUpdated", zoomChart);
zoomChart();
function zoomChart(){
chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}
if i use graph other than the bar(column) chart, zoom in/out is fast but it is lagging only in case of "type": "column". Please help where am i making mistake. Thanks
Try to only allow the re-rendering to happen after the zoom by setting updateOnReleaseOnly to true.
Try to remove animations, it worked for me.
I'm new here so bear with the question that I'm going to ask.
I want to create a click event for armcharts piechart. For example, when a user click the pie chart, it will open a new popup window.
My Code is as follow
chart = AmCharts.makeChart("piechart-placeholder2", {
"type": "pie",
"fontSize": 9.5,
"labelText": "[[percents]]%",
"theme": "light",
"legend": {
"markerType": "circle",
"position": "right",
"marginRight": 80,
"autoMargins": false
},
"dataProvider": [{
"Perkara": "xxx1",
"Amaun(RM)": 4444
}, {
"Perkara": "xxx2",
"Amaun(RM)": 5555
}, {
"Perkara": "xxx3",
"Amaun(RM)": 73344
}, {
"Perkara": "xxx4",
"Amaun(RM)": 3322
}, {
"Perkara": "xxx5",
"Amaun(RM)": 56544
}],
"valueField": "Amaun(RM)",
"titleField": "Perkara",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>RM [[value]]</b> ([[percents]]%)</span>",
"exportConfig": {
"menuTop":"0px",
"menuItems": [{
"icon": 'assets/img/export.png',
"format": 'png'
}]
}
});
I know the addListener method, but I don't know how to apply it here.
Thank You!
You can add event listener to AmChart like this.
// add click listener
chart.addListener("clickItem", handleClick);
JsFiddle example