Related
I work with the new feature from openLayers: https://openlayers.org/en/latest/examples/webgl-points-layer.html
and want to achieve to have some case transform operator like in the color array, but for the src string
thunderstorm: {
symbol: {
symbolType: "image",
src: `data:image/svg+xml;utf8,${icon(faThunderstorm, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`,
color: [
"case",
["==", ["get", "type"], "cloud-to-ground"],
"rgb(247, 37, 133)",
["==", ["get", "type"], "inter-cloud"],
"rgb(72, 12, 168)",
"rgb(255, 255, 255)", // fallback
],
size: [20, 20],
anchor: [0.5, 0.5],
rotateWithView: false,
},
},
I tried something like this, but it doesn't resolve the string:
thunderstorm: {
symbol: {
symbolType: "image",
src: [
"case",
["==", ["get", "type"], "cloud-to-ground"],
`data:image/svg+xml;utf8,${icon(faBolt, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`,
["==", ["get", "type"], "inter-cloud"],
`data:image/svg+xml;utf8,${icon(faThunderstorm, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`,
`data:image/svg+xml;utf8,${icon(faBolt, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`, // fallback
],
[...]
},
},
and will throw these WebGL errors:
WebGL: INVALID_VALUE: texImage2D: bad image data
[.WebGL-0x12b2a1000]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
Any idea how to implement the transform operation, for having to different kind of icons for one style (JSON)?
(I looked into this one: https://openlayers.org/en/latest/examples/icon-sprite-webgl.html
but don't know how to build the "A very simple sprite atlas is used in the form of a PNG file containing all icons on a grid.")
I would like to use the heatmap to generate a status overview of a machine for a given day. The states show up as I want but I have a question about the legend. Can I show a 'traditional' legend that shows the states and their colors.
Highchart fiddle: http://jsfiddle.net/p7v2f117/7/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
title: {
text: 'HIGHCHART - Machine State on 1/7/2015'
},
xAxis: { // minute interval
categories: ['00', '15', '30', '45']
},
yAxis: { // hour
categories: ['20:00', '21:00'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.yAxis.categories[this.point.y] + ' (' + this.series.xAxis.categories[this.point.x] + 'min)</b>' + '<br>state: <b>' + this.point.value + '</b><br>More details go here'
}
},
series: [{
name: 'Machine State',
borderColor: '#000000',
borderWidth: 1,
data: [{
x: 0,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 1,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 2,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 3,
y: 0,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 0,
y: 1,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 1,
y: 1,
value: 'DOWN',
color: '#FF0000'
}, {
x: 2,
y: 1,
value: 'PM',
color: '#C0C0C0'
}, {
x: 3,
y: 1,
value: 'Marathon',
color: '#FFCCFF'
}, ],
dataLabels: {
enabled: false
}
}]
});
});
I am trying to basically get the same behavior that I can get in Fusion charts, where the color is automatically driven by the status field (text) and it shows the categories. The fact that they are clickable is nice but not necessary.
Fusionchart fiddle: http://jsfiddle.net/c8V2F/25/
FusionCharts.ready(function () {
var chart = new FusionCharts({
type: 'heatmap',
renderAt: 'chartdiv1',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "FUSIONCHART - Machine State on 1/7/2015",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;'>$tlLabel</div>{br}State: <b>$value</b>{br}details can go here",
"mapbycategory": "1",
//Cosmetics
"showXaxisLabels": "1",
"showYaxisLabels": "1",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"dataset": [{
"data": [{
"rowid": "20:00",
"columnid": "00",
"categoryid": "RUN",
"displayvalue": ""
}, {
"rowid": "20:00",
"columnid": "15",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "30",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "45",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "00",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "15",
"categoryid": "DOWN"
}, {
"rowid": "21:00",
"columnid": "30",
"categoryid": "PM"
}, {
"rowid": "21:00",
"columnid": "45",
"categoryid": "Marathon"
}, ]
}],
"colorrange": {
"gradient": "0",
"color": [{
"label": "RUN",
"code": "00FF00"
}, {
"label": "ASSIST",
"code": "FFFF00"
}, {
"label": "DOWN",
"code": "FF0000"
}, {
"label": "IDLE",
"code": "00FFFF"
}, {
"label": "PM",
"code": "C0C0C0"
}, {
"label": "ENG",
"code": "00B0F0"
}, {
"label": "Marathon",
"code": "FFCCFF"
}
]
}
}
});
chart.render();
});
Is there a simple way to not show the legend at all?
I can certainly convert the states back to a number if that makes more sense.
--Nico
You need to cover default parameter for highmaps:
var H = Highcharts;
H.seriesTypes.heatmap.prototype.axisTypes = ['xAxis', 'yAxis'],
H.seriesTypes.heatmap.prototype.optionalAxis = null;
Example: http://jsfiddle.net/ww6Lbnc5/
as a noob in groovy/grails , i'd like to learn how to make or use a plugin for charts .
i tried zing chart , tried the exemples , but nothing as a result , sometimes i have the area of the chart and nothing else.
So to display the chart i used zing :
<zing:chart type="area" width="700" height="350" container="acceptToConvertChart" data="${data}" xLabels="${labels}" effect="4" />
And for the script :
<script> def labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
def data = [
'Visitors': [100, 300, 200, 240, 500, 100, 80],
'Purchases': [30, 50, 12, 20, 55, 20, 10]
]</script>
when i use it , nothing hapen , the area just disapear
for include :
<zing:include/>
and it's underlined in yellow like every thing that's in relation with zing chart and when i hover it ,it says that zing is unknown , so what i should do?
Please help .
When you explain ,just know that i am not java developper .
Thank you in advance.
you need something like this in your HTML:
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE =["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"]; </script>
</head>
<body>
Here is your ZingChart:
<div id='myChart'></div>
</body>
and something like this javascript:
zingchart.THEME = "classic";
var myConfig =
{
"type": "area",
"background-color": "#fff",
"stacked": false,
"title": {
"text": "Visitors & Sales",
"background-color": "#fff",
"font-color": "#05636c",
"adjust-layout":true
},
"tooltip": {
"visible": false
},
"plot": {
"aspect": "stepped",
"line-width": "1px",
"marker": {
"visible": false
},
"hover-state": {
"visible": false
},
"shadow": false
},
"plotarea": {
"margin": "dynamic"
},
"scale-x": {
"values": [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
],
"line-color": "#000",
"line-width": "1px",
"guide": {
"visible": false
},
"tick": {
"line-color": "#000",
"line-width": "1px"
},
"label": {
"text": "Days of the Week",
"font-size": "14px",
"font-family": "helvetica",
"font-weight": "normal",
"offset-y": "5%",
"font-color":"#05636c"
},
"item": {
"font-color": "#05636c",
"font-weight": "normal",
"font-family": "helvetica",
"font-size": "12px",
"offset-y": "3%"
}
},
"scale-y": {
"values": "0:600:50",
"line-color": "#000",
"line-width": "1px",
"tick": {
"line-color": "#000",
"line-width": "1px"
},
"label": {
"text": "Volume",
"font-size": "14px",
"font-family": "helvetica",
"font-weight": "normal",
"font-color":"#05636c"
},
"item": {
"font-color": "#05636c",
"font-weight": "normal",
"font-family": "helvetica",
"font-size": "12px",
"offset-x": "-5%"
},
"guide": {
"visible": false
}
},
"crosshair-x": {
"line-color": "#ffffff",
"marker": {
"visible": false
},
"plot-label": {
"text": "<strong>%v</strong> %t",
"shadow": 0,
"font-size": "12px",
"font-color": "#05636c",
"font-family": "helvetica",
"border-width": "1px",
"border-color": "#05636c",
"background-color": "#ffffff",
"text-align": "center"
},
"scale-label": {
"font-size": "12px",
"font-color": "#000000",
"font-family": "helvetica",
"background-color": "#ffffff",
"offset-y": "3%"
}
},
"series": [
{
"values": [
30, 50, 12, 20, 55, 20, 10
]
},
{
"values": [
100, 300, 200, 240, 500, 100, 80]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: 500
});
please take a look at this working example
note that you will probably have for populate the section
"values": [
30, 50, 12, 20, 55, 20, 10
]
with your actual values coming from your grails controller
I need to show on graph duration of periodic events. For example user with ID 1 is calling to user with ID 2 at 10:00 AM and they are speaking 5 minutes. Then he is calling him again at 2:00PM and they are speaking 2 minutes. So this events are happening periodically and I need to show them on the graph as horizontal bars. They should look something like that: User 1: [ 5min ][ 2min ][ ... ][ ... ]
I've almost achieved what I want except that I can't find the way to show time at X axis. The X axis should show time with 30 minutes interval.
Here is my configuration:
title: null,
chart: {
type: 'bar',
backgroundColor: '#F9F9F9',
plotBackgroundColor: '#F9F9F9',
borderColor: '#F9F9F9',
borderWidth: 1,
animation: 0
},
legend: {
enabled: false
},
series: [
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] }
],
xAxis: {
categories: ['User 1']
},
yAxis: {
allowDecimals: false,
min: 0,
type: '',
title: {
text: 'Time'
},
stackLabels: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: false
},
borderWidth: 0
}
Here is demonstration of concept: http://jsfiddle.net/dimitrykislichenko/SjdR5/
I think you should be using columnrange series with axis type: 'datetime'. See: http://jsfiddle.net/SjdR5/2/
Note requires change in series object:
series: [{
data: [{
x: 0,
low: Date.UTC(2013, 1, 1, 10, 53),
high: Date.UTC(2013, 1, 1, 10, 59),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 12, 12),
high: Date.UTC(2013, 1, 1, 12, 17),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 16, 35),
high: Date.UTC(2013, 1, 1, 16, 55),
color: 'red'
}]
}],
x:0 -it's category index ( 0 = User 1 )
low and high is like from and to for time
color is just color of bar ;)
I need to build a highchart with 2 yAxis, one on the left (primary) and one on the right(secondar). I was not able to make this work. Any ideas what I am doing wrong here or missing?
here is the jsfiddle: http://jsfiddle.net/gsaray101/KX4AS/2/
I am using the example from the highcharts site as this:
yAxis: [{ // Primary yAxis
labels: {
format: '{value}ms',
style: {
color: '#89A54E'
}
},
title: {
text: 'response time',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'volume',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
Axis are 0 based. So you need (http://jsfiddle.net/zEBSh/)
var data = [{
"name": "1",
"yAxis": 0,
"data": [
[1374019440000, 25],
[1374056640000, 43],
[1374056880000, 49]
]
}, {
"name": "2",
"yAxis":1,
"data": [
[1374019440000, 33],
[1374019740000, 42],