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!
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 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.
Moving from D3 to Highcharts and this is eluding me. I have a fairly complex object that contains a clickthrough object which needs to be accessed in a function on a point click in the series. I'm creating the series array with the data and name just fine with a small conversion, but I need to attach this object to the data points as well. No idea how.
Quick example. original data:
[
{
"key": "Super Cool Thing",
"format": ".2f",
"values": [
{
"label": "01",
"value": 9.5,
"format": ".2f",
"order": 0,
"tooltip": "numerator = 133, denominator = 14",
"clickthrough": {
"output_format": "json",
"metrics": "",
"options": {
"columns": [
{
"order": 1,
"display_as": "Brand",
"format": "{0}",
"name": "brand",
"data_type": "string"
},
{
"order": 2,
"display_as": "Last Submit Time (Month)",
"format": "%m",
"name": "last-submit-time-month",
"data_type": "datetime"
},
{
"order": 3,
"display_as": "Agent Things",
"format": "{0}",
"name": "agent-thing-values",
"data_type": "string"
}
]
},
"cut_y": "brand",
"type": "",
"filter": { },
"cut_x": "last-submit-time-month"
},
"metrics": [
{
"name": "Agent - Feel Appreciated Mean",
"slug": "qcustomersatr4-mean"
}
]
}
]
}
]
run through a (super quick POC) funct:
for(let i = 0; i < data.length; i++){
var values = [];
var xcuts = [];
data[i].values.forEach(val => {
values.push(val.value);
xcuts.push(val.label);
});
chart.addSeries({
name: data[i].key,
data: values
})
chart.xAxis[0].setCategories(xcuts);
}
and this all works fine. But I need the clickthrough object so I can do something like:
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
point: {
events: {
click: function (event) {
console.log('CLICKTHROUGH DATA HERE');
console.log(event.point);
}
}
}
},
},
I'm unsure how to format the series data to include additional data that's accessible in an event function later down the line. I currently do this via d3 and it's fine, but am struggling with the Highcharts method to do the same. It seems I can't just add whatever I want to the series or data, so is this possible?
Have it. I have to set the y value explicitly and then I can add whatever else which is then avail in the event.
example:
data[i].values.forEach(val => {
values.push({link: val.clickthrough, y:val.value});
xcuts.push(val.label);
});
chart.addSeries({
name: data[i].key,
data: values
})
I have a Highstock.js chart implemented in Angular. I'm trying to have multiple zoom options for the user, with one of them selected by default. I define the buttons, I indicate which one should be selected by default (by providing index of the button), but it only works when the "xAxis" field is not present in the configuration JS object.
$scope.chartConfig = {
"useHighStocks":true,
/*
the line below prevents the rangeSelector from selecting
a custom time frame option in spite of correct configuration
*/
"xAxis": {},
"options":{
"rangeSelector": {
"allButtonsEnabled": true,
"enabled": true,
"selected": 1,
"buttons": [{
"type": 'month',
"count": 1,
"text": '1m'
}, {
"type": 'month',
"count": 3,
"text": '3m'
}]
}
...
How can I have both xAxis and custom zoom selection in the chart?
Here's the Fiddle, please try commenting / uncommenting the xAxis line and running the code.
Fiddle: http://jsfiddle.net/11zqLnh3/
Have you tried to put your xAxis object inside options? It looks like it will work just fine in this case:
"options":{
"xAxis": {}, // try commenting this line
"rangeSelector": {
"allButtonsEnabled": true,
"enabled": true,
"selected": 1,
"buttons": [{
"type": 'month',
"count": 1,
"text": '1m'
}, {
"type": 'month',
"count": 3,
"text": '3m'
}]
},
},
Look at this example:
http://jsfiddle.net/11zqLnh3/1/
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/