Why does my cursor show this:
How do I change to default cursor?
This is my code config of amcharts for use in clone function to makeChart
var chartConfig = {
"type": "serial",
"categoryField": "period",
"addClassNames": true,
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [ {
"bulletField": "last",
"id": "", // id graph
"lineThickness": 4,
"title": "Redemption",
"valueField": "total",
"lineColor": "#ffffff",
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"categoryBalloonEnabled": false,
"cursorAlpha":0,
"cursorColor":"#000000",
"limitToGraph":"", id graph
"valueLineAlpha":0,
"valueZoomable":true,
},
"balloon": {
"adjustBorderColor" : false,
"borderColor": "#000000"
},
}
i delete some line because it show code mostly line and less detail .
can i fix it ?
thank you
The cursor is changed that way if you set the chartCursor's pan property to true. It seems like you have a very small chart in your screenshot, so you can disable the pan and set the zoomable property to false if you want a chartCursor that doesn't zoom.
chartCursor: {
pan: false,
zoomable: false,
// other config
}
Demo
Alternatively, if you need the pan functionality, you can override the cursor using css (assuming your chart div's id is chartdiv):
#chartdiv div {
cursor: default !important;
}
Demo
Related
How can I add background color to valueAxes guides label?
Seems like there is no options that we can set or I just really dont know what it is.
This is current setup that I have in amcharts
$chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": $data_trade,
"valueAxes": [ {
"position": "right",
"guides": [ {
"value": $tickValue,
"label": $tickValue,
"position": "right",
"dashLength": 0,
"axisThickness": 1,
"fillColor": "#000",
"axisAlpha": 1,
"fillAlpha": 1,
"color": "#000",
"fontSize": 16,
"backgroundColor": "#008D00",
"labelColorField": "red",
},
],
} ],
../
} );
please see image for reference
image-screenshot
Im new here, I hope I can get help
Thanks
There isn't a built-in way to do this currently but you can use the same technique in this demo to create a colored box around your label in the drawn event by changing the selector to .amcharts-axis-label.amcharts-guide to target the guide label and apply your color there. Note that the demo doesn't set individual colors, but the drawn event gives you access to the chart object if you want to pull the color from your custom backgroundColor properties:
AmCharts.makeChart("...", {
// ...
"valueAxes": [{
// ...
"guides": [{
"value": 4.5,
"label": "4.5",
"backgroundColor": "#22ff11" //custom property for drawn event
}, {
"value": 7.5,
"label": "7.5",
"backgroundColor": "#11ddff"
}]
}],
// ...
"listeners": [{
"event": "drawn",
"method": addLabelBoxes
}]
});
function addLabelBoxes(event) {
var labels = document.querySelectorAll(".amcharts-axis-label.amcharts-guide");
Array.prototype.forEach.call(labels, function(label, i) {
var parent = label.parentNode;
var labelText = label.childNodes[0].textContent; //get guide label from SVG
var svgRect = label.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
// find the matching guide label in the chart object
var guide = event.chart.valueAxes[0].guides.filter(function(guide) {
return guide.label == labelText;
});
rect.setAttribute("x", svgRect.x);
rect.setAttribute("y", svgRect.y);
rect.setAttribute("transform", label.getAttribute("transform"))
rect.setAttribute("width", svgRect.width);
rect.setAttribute("height", svgRect.height);
rect.setAttribute("fill", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#FFD32F")); //apply background from guide if it exists
rect.setAttribute("stroke", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#4857FF")); //same for the border
rect.setAttribute("opacity", 1);
parent.insertBefore(rect, label);
});
}
Demo
Am Chart showing incorrectly, Here is following ajax code, incorrect thumb of chart.
I am using ajax to get the response and initialized the amchart (area)
Ajax json response data
{"success":true,"graph_data":[{"date":"2018-06-21","value":121.65},{"date":"2018-06-20","value":121.65},{"date":"2018-06-19","value":121.5},{"date":"2018-06-18","value":121.3},{"date":"2018-06-17","value":120.55},{"date":"2018-06-16","value":119.84},{"date":"2018-06-14","value":119.88}],"min_period":"DD","message":null}
Here code which I am initializing for amchart
var chart = AmCharts.makeChart( "graph_chart_div", {
"type": "serial",
"theme": "light",
"marginRight": 5,
"marginLeft": 5,
"minPeriod":response.min_period,
"autoMarginOffset": 5,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [ {
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
} ],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [ {
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
} ],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5
},
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45,
"minorGridEnabled": true,
/* ENSURE 2 LINES BELOW ARE ADDED */
"autoGridCount": false,
"gridCount": 12,
"parseDates": true,
"dashLength": 1,
// "minorGridEnabled": true
},
"export": {
"enabled": false
},
// "dataProvider": graph_data
"dataProvider": response.graph_data
} );
This is currently initialized chart
I want to show the following chart for my data
Your date data is out of order. AmCharts requires your date-based data to be in date-ascending order when using parseDates.
Important: If this is set to true, the data points needs to come pre-ordered in ascending order. Data with incorrect order might result in visual and functional glitches on the chart.
Once you fix the sort order, your chart will render correctly.
First question ever on the stack. Trying to get zoomToDates to work in amCharts I'm developing. I've tried the other solutions I could find to others' questions and nothing worked. So without further ado ...
Resources:
//www.amcharts.com/lib/3/amcharts.js
//www.amcharts.com/lib/3/serial.js
//www.amcharts.com/lib/3/amstock.js
//www.amcharts.com/lib/3/themes/black.js
//www.amcharts.com/lib/3/plugins/export/export.min.js
//www.amcharts.com/lib/3/plugins/export/export.css
//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js
HTML:
<div id="$CHART$" style="width: 100%; height: 450px;"></div>
JS:
AmCharts.makeChart( "$CHART$", {
"type": "stock",
"theme": "black",
"categoryAxesSettings.equalSpacing": true,
"dataDateFormat":"YYYY-MM-DD",
"valueAxes": [ {
"position": "left",
} ],
"dataSets": [ {
"title": "Bond",
"fieldMappings": [ {
"fromField": "open",
"toField": "open"
}, {
"fromField": "high",
"toField": "high"
}, {
"fromField": "low",
"toField": "low"
}, {
"fromField": "close",
"toField": "close"
} ],
"dataLoader": {
"url": "removed for stackoverflow post"
},
"categoryField": "date"
},
],
panels: [ {
title: "Security",
percentHeight: 100,
stockGraphs: [ {
"valueField": "security",
"type": "candlestick",
"showBalloon": true,
"proCandlesticks": true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
} ],
stockLegend: {
periodValueTextRegular: "[[security.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
event.chart.zoomToDates(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
});
Any help would be really appreciated. I've been working on this for too long to admit. Thanks.
It looks like you're using the AmCharts Wordpress plugin going by the $CHART idenfitier. The main issue is the syntax of your AmCharts.makeChart call - your addListener code is inside the config when it should be outside of the call entirely. You're also not referring to the actual chart instance, nor are you using the event argument correctly, for example:
var $CHART$ = AmCharts.makeChart("$CHART$", {
// ...
});
$CHART$.addListener("rendered", zoomChart);
function zoomChart(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
};
You also have to use zoom for stock charts as zoomToDates won't work.
Ideally, you should use the listeners array instead of addListener as you can sometimes run into timing issues where events like rendered can fire before you can call addListener:
AmCharts.makeChart("$CHART$", {
// all of your other config and data omitted
"listeners": [{
"event": "rendered",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
}]
});
I've tried to gather information about if it is possible to put a different image located at the bottom of every column in a 100% stacked bar chart.
I've seen that is possible to modify some attributes of category labels and put images just above every bar as http://www.amcharts.com/demos/column-chart-images-top/ but I need just the opposite.
In other words, I want to make the base of the column has an image loaded, replacing x axis and category label.
Thanks in advance.
Unfortunately, Category axis does not allow using images in place of category labels.
There's also no way to make the custom bullets from graphs "trickle" outside plot area.
What you can do is to drop those custom icons right down just above category axis line.
To do that you will need:
1) Add additional fields to your data that would contain all zero values.
2) Add a separate graph that would use those fields and display custom bullets.
3) Make the "bullet graph" non-stackable (stackable: false), not clustered (clustered: false), and generally invisible (visibleInLegend: false, fillAlphas: 0, lineAlpha: 0, showBalloon: false)
Here's a working example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"name": "John",
"points": 35022,
"color": "#7F8DA9",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/0.gif"
}, {
"name": "Damon",
"points": 65456,
"color": "#FEC514",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/1.gif"
}, {
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"zero": 0,
"bullet": "//www.amcharts.com/lib/3/images/2.gif"
}, {
"name": "Mark",
"points": 13654,
"color": "#DAF0FD",
"zero": 0,
"bullet": "//www.amcharts.com//lib/3/images/3.gif"
}],
"valueAxes": [{
"maximum": 80000,
"minimum": 0,
"axisAlpha": 0,
"dashLength": 4,
"position": "left"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"type": "column",
"valueField": "points"
}, {
"showBalloon": false,
"bulletOffset": 16,
"bulletSize": 34,
"customBulletField": "bullet",
"fillAlphas": 0,
"lineAlpha": 0,
"type": "column",
"visibleInLegend": false,
"clustered": false,
"stackable": false,
"valueField": "zero"
}],
"categoryField": "name",
"categoryAxis": {
"axisAlpha": 0,
"gridAlpha": 0,
"tickLength": 0
}
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px;"></div>
Additionally, if you don't need the text labels on the category axis, you can set it's labelsEnabled: false property.
We have using stacked amChart(serial) for showing graph. We have added a filter functionality for graphs.The user can filter data according to week,month and quarter. We have using bootstrap. The amChart is placed in div having class "col-md-6". When user select week filter the amchart having 52 lables.At that time the bars are very thin. It is very difficult to analyze the data.So we want to increase the label frequency. We have set label frequency into 5 but it is not changing
AmCharts.makeChart("stackedChart", {
"type": "serial",
"theme": "light",
"legend": {
"position": "right",
"useGraphSettings": true,
},
"dataProvider": data,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"position": "left",
"gridCount": 5
}],
"plotAreaFillAlphas": 0.1,
"graphs": graph,
"categoryField": "Period",
"categoryAxis": {
"gridPosition": "start",
"labelFrequency": 5,
},
"export": {
"enabled": true
}
});
labelFrequency is probably not the best way to go about it. It basically means display a label every X'th grid line.
What you are looking for is pre-zooming the chart. For that you can use maxSelectedSeries. I.e.:
AmCharts.makeChart("stackedChart", {
...
"maxSelectedSeries": 5,
...
});
Also, if you are going to have pre-zoomed chart, you will also need the means to scroll it. For that you need to add a scrolbar:
AmCharts.makeChart("stackedChart", {
...
"maxSelectedSeries": 5,
"chartScrollbar": {},
...
});
Here's the whole chart with the above applied:
AmCharts.makeChart( "stackedChart", {
"type": "serial",
"theme": "light",
"maxSelectedSeries": 5,
"chartScrollbar": {},
"legend": {
"position": "right",
"useGraphSettings": true,
},
"dataProvider": data,
"valueAxes": [ {
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"position": "left",
"gridCount": 5
} ],
"plotAreaFillAlphas": 0.1,
"graphs": graph,
"categoryField": "Period",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
} );