i have made some charts for spreader beams in Amcharts (Worpress) and want to change the toolstips,
reverse the order of the 2 values.
append "tonnes" and "metres" after the respective values.
I can swap the order they appear in the code to change the order they appear, but how to append in plain text after the digit values so it shows "8 tonnes: 2 metres"?
Code for these is below in the tooltipText:
"series": [{
"type": "LineSeries",
"name": "30° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value1",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
}, {
"type": "LineSeries",
"name": "45° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"dataFields": {
"valueY": "value2",
"categoryX": "category"
},
"simplifiedProcessing": true,
"calculatePercent": true,
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
url is https://applifting.ga/modular-spreader-beams/sectionlift-6/
Thanks
Just swapped the order of the tool tip values and appended in plain text the denominator.
Related
I'm looking to make a radarchart in chart.js with an empty center like this:
Thus, I'm looking to make the angle line (the line going from the center) to start at 2 and the center to be a white pentagon in the following working example:
radarChart = new Chart('radarCanvas',{
"type": "radar",
"data": {
"labels": [
"Management & Leadership",
"Education & Teaching",
"Research",
"Impact",
"Team"
],
"datasets": [
{
"label": "4-3-21",
"backgroundColor": "rgb(231,74,59,0.5)",
"hoverBackgroundColor": "rgb(231,74,59,0.8)",
"borderColor": "rgb(231,74,59)",
"data": [
2.7,
3.8,
4.6,
2.2,
3.2
]
}
]
},
"options": {
"responsive": true,
"maintainAspectRatio": false,
"scale": {
"angleLines": {
"color": "rgb(90,92,105)"
},
"gridLines": {
"color": "rgb(90,92,105)"
},
"ticks": {
max: 10,
min: 0,
stepSize: 2,
}
}
}
})
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="radarCanvas" width="400" height="400"></canvas>
Solution I've tried sofar and their shortcomings:
Change angleline options: there exists no property that allows this in the documentation
Draw a dataset with a white backgroundcolor: dataset [2,2,2,2,2] for the above graph should perfectly cover the anglelines, but chart.js mixes the background color with overlaying datasets resulting in non-white overlay, also I have found no way of turning of labels for this dataset in the legenda resulting in a empty label next to the labels for the different datasets
The internet: I've found one mention of this being possible by the developers but have not been able to find the solution..
You could try to achieve something like this by making the ticks scale negative (min: -2) and then using the borderDash configuration for angleLines. However, if the size of your chart changes, you will also need to adjust the 4th array number in borderDash accordingly.
The below code should render something like this for my screen size:
radarChart = new Chart('radarCanvas', {
"type": "radar",
"data": {
"labels": [
"Management & Leadership",
"Education & Teaching",
"Research",
"Impact",
"Team"
],
"datasets": [{
"label": "4-3-21",
"backgroundColor": "rgb(231,74,59,0.5)",
"hoverBackgroundColor": "rgb(231,74,59,0.8)",
"borderColor": "rgb(231,74,59)",
"data": [
2.7,
3.8,
4.6,
2.2,
3.2
]
}]
},
"options": {
"responsive": true,
"maintainAspectRatio": false,
"scale": {
"angleLines": {
"color": "rgb(90,92,105)",
"lineWidth": 1,
"borderDash": [
0,
0,
0,
28,
150,
250
]
},
"gridLines": {
"color": "rgb(90,92,105)"
},
"ticks": {
"max": 10,
"min": -2,
"stepSize": 2,
"callback": function(tickValue, index, ticks) {
if (tickValue >= -0) {
return tickValue
}
return null
},
},
"max": 10,
"min": -4,
"beginAtZero": false
}
}
})
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="radarCanvas" width="400" height="400"></canvas>
I have an AmCharts working, this is the code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"precision":"3",
"decimalSeparator": ",",
"thousandsSeparator": ".",
"legend": {
"horizontalGap": 10,
"maxColumns": 3,
"position": "top",
"useGraphSettings": false,
"markerSize": 10,
"marginTop": 20,
"autoMargins":true,
"forceWidth":true,
"valueAlign":"right",
"labelWidth":85,
"valueWidth":85
},
"dataProvider": response,
"synchronizeGrid":true,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Activos"
}],
/*"startDuration": 0.5,*/
"graphs": graphs,
"chartScrollbar": {},
"chartCursor": {
"cursorPosition": "mouse"
},
"categoryField": "diahora",
"categoryAxis": {
/*"parseDates": true,*/
"gridPosition": "start",
"axisColor": "#DADADA",
/*"minorGridEnabled": true*/
},
"export": {
"enabled": true,
"position": "top-right",
"class": "export-main",
"menu": [ {
"title": "Exportar el gráfico a archivo de imagen",
"label": "Descargar",
"menu": [ "PNG", "JPG", "PDF" ]
}]
}
});
I'm calling it with ajax with:
$.get(url, function(response){
So, I need to get the 2 values of the range of X of the graph that is being rendered on the browser after a zoom, any idea?
For example, when the graph starts, the range of the axis x are 0 and 100. If I zoom into some range, for example 40 and 60, I need to retrieve those values (40 and 60) because I will use them for another things in the page.
So, how could I save those ranges after every ajax call?
AmCharts provides the zoomed event, which gives you the start and end indices/values. You can use that and store the values for whatever you need, e.g.
AmCharts.makeChart("chartdiv", {
// ...
listeners: [{
event: "zoomed",
method: function(e) {
//e.startIndex and e.endIndex gives you the indicies in the dataProvider
//e.startValue and e.endValue gives you the start and end values
//e.startDate and e.endDate gives you the start and end dates if you're using parseDates
}
}]
});
Note that zoomed is also called on the initial load. If you don't want to capture the initial start/end values, you might need to keep track of the first load before storing those values on subsequent zoom events.
Highcharts ng heatmap draw line instead of boxes
$scope.chartConfig = {
"chart": {
"type": "heatmap"
},
"credits": {
"enabled": false
},
"size": {
"height": 1000
},
"title": {
"text": ""
},
"xAxis": {
"categories": ["23-02-2005", "24-02-2005", "27-02-2005", "28-02-2005", "01-03-2005", "02-03-2005"]
},
"yAxis": {
"categories": ["Bond2Y", "Bond3Y"],
"title": null
},
"series": [{
"name": "Trades Data",
"borderWidth": 1,
"data": [
[0, 0, 0.7642386249005615],
[0, 1, 0.5010608923969173],
[1, 0, 0.5009742082142428],
[1, 1, 0.9114076033035807]
],
"dataLabels": {
"enabled": false,
"color": "#000000"
}
}]
}
Angular Highcharts
When i place these config with JQuery Its works fi
jQuery Highcharts
Is this is the highcharts-ng issue ?
When I checked your fiddle I had observed that you have not included the heatmap.js library.
Also, You need to move your chart and colorAxis inside the options block.
Check the below working fiddle link in which you can see the square blocks identical to your jQuery example.
Working Fiddle: http://jsfiddle.net/y9wjy0kz/10/
Hope this helps!
I'm using ammaps to create a map and trying to create a legend. I'm running in to a weird problem where the legend doesn't appear on initial load but only appears on window resize. Regardless of the window size, on any resize, the legend becomes visible (VERY WEIRD RIGHT?).
Code:
var icon = "M9.875,0.625C4.697,0.625,0.5,4.822,0.5,10s4.197,9.375,9.375,9.375S19.25,15.178,19.25,10S15.053,0.625,9.875,0.625";
var map = AmCharts.makeChart( "mapdiv", {
/**
* this tells amCharts it's a map
*/
"type": "map",
/**
* create data provider object
*/
"dataProvider": {
"mapURL": "https://raw.githubusercontent.com/ggwc82/amcharts/master/unitedKingdomLow.svg",
"getAreasFromMap": false,
"images": [ {
"latitude": 51.5074,
"longitude": 0.1278,
"svgPath": icon,
"scale": 0.7,
"label": "Dagenham Factory",
"labelBackgroundColor": "#ffffff",
"labelColor": "#696D6E",
"labelFontSize": 14,
"labelShiftY": 00,
"color": "#D30000",
"title": "1 Warning",
"url": "http://www.google.co.uk",
"description": "DRM with id 09 is offline"
},
{
"latitude": 53.4808,
"longitude": -2.2426,
"svgPath": icon,
"scale": 0.7,
"label": "Manchester Factory",
"labelBackgroundColor": "#ffffff",
"labelColor": "#696D6E",
"labelFontSize": 14,
"labelShiftY": 0,
"color": "#40D300",
"title": "No Issues",
"url": "http://www.google.co.uk",
"description": ""
},
{
"latitude": 54.9783,
"longitude": -1.6178,
"svgPath": icon,
"scale": 0.7,
"label": "Newcastle Factory",
"labelBackgroundColor": "#ffffff",
"labelColor": "#696D6E",
"labelFontSize": 14,
"labelShiftY": 0,
"color": "#D3D000",
"title": "2 Alerts",
"url": "http://www.google.co.uk",
"description": "DRM with id 23 is inactive. DRM with id 25 is inactive."
}
],
},
/**
* create areas settings
* autoZoom set to true means that the map will zoom-in when clicked on the area
* selectedColor indicates color of the clicked area.
*/
"areasSettings": {
"autoZoom": true,
"unlistedAreasColor": "#C8E1D6",
"selectedColor": "#CC0000"
},
"zoomControl": {
"zoomControlEnabled": false,
"homeButtonEnabled": true,
},
"dragMap": false,
"showDescriptionOnHover": true,
"allLabels": [
{
"text": "Default Factory View - UK Sites",
"bold": true,
"size": 20,
"color": "#696D6E",
"align": "center",
"y": 100
}
],
} );
var legend = new AmCharts.AmLegend();
console.log("hello");
map.addLegend(legend,"legenddiv");
legend.data = [{title:"first", color:"#CC0000", markerType: "circle"},
{title:"second", color:"#00CC00", markerType: "circle"},
{title:"second", color:"#ffff00", markerType: "circle"}]
You're using the makeChart function. This function is an helper which allow you to create in a single call a chart / map, configure it using JSON, display it in the container div passed as first argument and get back the instance previously created.
You're adding the legend to your instance but it's already rendered by the makeChart helper when you're hitting your code adding the legend. So, when adding the legend to an already rendered chart, it'll only be visible when re-rendered which happens when you resize your window.
As specified in the documentation, the AmMap class can not be instantiated explicitly so the use of the makeChart method is mandatory but you can also configure your legend in the JSON config instead of doing it later.
/**
* Legend
*/
"legend": {
"width": 400,
"backgroundAlpha": 1,
"backgroundColor": "#fff",
"borderColor": "#000",
"borderAlpha": 1,
"bottom": 15,
"right": 15,
"horizontalGap": 10,
"data": [{
"title": "first",
"color": "#CC0000",
"markerType": "circle"
}, {
"title": "second",
"color": "#00CC00",
"markerType": "circle"
}, {
"title": "third",
"color": "#ffff00",
"markerType": "circle"
}]
},
I've put a little fiddle based on your question including a legend configured in JSON. The legend is displayed at the same time of the map, no resize or anything required to show it.
Check this fiddle to get an idea of what I am talking about
This is my xAxis configuration:
"xAxis": {
"categories": ["Category ONE", "Category TWO"],
"allowDecimals": false,
"title": {
"text": " ",
"align": "middle",
"style": {
"color": "steelblue"
}
},
"labels": {
"y": 12,
"style": {
"color": "steelblue"
}
}
},
I need category one and category two to be separated by a few pixels (50,100, whatever amount I want) but cannot find the solution for this issue. I know there is a way to do it for series but there is no equivalent for when you only want to separate the categories.
Thanks in advance
plotOptions have some options which can control series. Padding is possible to get by changing value of groupPadding:
"plotOptions": {
"column": {
"groupPadding": 0.1
}
}
And see it live: http://jsfiddle.net/JEGGf/42/