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
Related
Plot bands in highchart export server is not working properly. I want the output same as shown in jsfiddle below.
I want the color plot band to show on y axis with width 20.
This is expected output: https://jsfiddle.net/vc6r8y3n/
Attached image is actual output when we use high-chart export server.
but when I tried same JavaScript json object on
http://export.highcharts.com/
its giving me image with plot band color spread on whole chart. its not considering width for 'y' or 'x' axis in export server. I gave attached image of export chart.
Why highchart behaving differently in both the cases.
Highchart JSON is same as in JSfiddle.
Actual image.
Expected is what it display in Jsfiddle. https://jsfiddle.net/vc6r8y3n/
{
"chart": {
"height": 350,
"width": 600,
"style": {
"fontFamily": "\"Arial\", sans-serif",
"fontSize": "16px"
},
"backgroundColor": "transparent"
},
"title": {
"text": null
},
"credits": {
"enabled": false
},
"legend": {
"align": "center",
"layout": "horizontal",
"verticalAlign": "bottom",
"symbolHeight": 5,
"symbolWidth": 5,
"symbolRadius": 0,
"itemDistance": 10,
"itemStyle": {
"fontSize": "5px",
"fontWeight": "bold",
"fontFamily": "\"Arial\", sans-serif"
},
"borderWidth": 0,
"padding": 0,
"margin": 5
},
"xAxis": {
"categories": [
"Sep-2020",
"Oct-2020",
"Nov-2020",
"Dec-2020",
"Jan-2021",
"Feb-2021"
],
"labels": {
"style": {
"fontSize": "4px",
"fontFamily": "\"Arial\", sans-serif",
"color": "#000"
},
"y": 5
},
"gridLineColor": "transparent",
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"lineColor": "#9A9A9A",
"zIndex": 9999999
},
"yAxis": [
{
"title": {
"text": ""
},
"min": 0,
"max": 100,
"tickInterval": 20,
"plotBands": [
{
"color": "rgb(204,0,0)",
"from": 0,
"to": 30.99,
"zIndex": 3
},
{
"color": "rgb(226,113,113)",
"from": 31,
"to": 44.99,
"zIndex": 3
},
{
"color": "rgb(247,209,34)",
"from": 45,
"to": 54.99,
"zIndex": 3
},
{
"color": "rgb(136,207,136)",
"from": 55,
"to": 68.99,
"zIndex": 3
},
{
"color": "rgb(68,180,68)",
"from": 69,
"to": 87.99,
"zIndex": 3
},
{
"color": "rgb(0,153,0)",
"from": 88,
"to": 100,
"zIndex": 3
}
],
"width": 20
}
],
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
}
}
},
"series": [
{
"name": "Line1",
"type": "column",
"data": [
{
"y": 61,
"color": "#5b9bd5"
},
{
"y": 41,
"color": "#5b9bd5"
},
{
"y": 21,
"color": "#5b9bd5"
},
{
"y": 81,
"color": "#5b9bd5"
},
{
"y": 31,
"color": "#5b9bd5"
},
{
"y": 71,
"color": "#5b9bd5"
}
],
"color": "#5b9bd5",
"showInLegend": true
},
{
"name": "Line 2",
"type": "column",
"data": [
null,
null,
null,
null,
null,
1
],
"color": "#00B050"
},
{
"name": "Line 3",
"type": "spline",
"data": [
null,
{
"y": 45
},
{
"y": 38
},
{
"y": 32
},
{
"y": 40
},
{
"y": 48
}
],
"color": "#9A0229"
}
]
}
enter image description here
Here is the source code:
https://jsfiddle.net/24zrbqpL/
Highcharts.chart('container', {
"chart": {
"type": "line",
"polar": true
},
"xAxis": {
"min": 0.5,
"max": 6.5,
"categories": ['Clarify Objectives', 'Propose Initiates', 'Prioritise & Select', 'Track Performance', 'Review Portfolio', 'Adjust Course', ''],
"labels": {
"distance": 25
},
"tickmarkPlacement": "on",
"lineWidth": 0,
"gridLineColor": "#575756",
"title": {
"style": {
"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
"color": "#666666",
"fontSize": "30px",
"fontWeight": "normal",
"fontStyle": "normal"
}
}
},
"yAxis": {
"plotBands": [{
"from": 1,
"to": 2,
"color": "#f8c4c0",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 2,
"to": 3,
"color": "#f39d96",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 3,
"to": 4,
"color": "#ee766d",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 4,
"to": 5,
"color": "#eb584d",
"outerRadius": "105%",
"thickness": "50%"
}],
"reversed": true,
"min": 1,
"max": 5,
"allowDecimals": false,
"tickInterval": 1,
"tickAmount": 6,
"tickLength": 10,
"gridLineInterpolation": "polygon",
"gridLineColor": "",
"lineWidth": 0,
"tickmarkPlacement": "between",
"tickPixelInterval": 100,
"tickPosition": "outside",
"labels": {
"enabled": true,
"style": {
"fontWeight": "bold"
},
//"y": 25
}
},
"title": {
"text": "APM Spiderweb"
},
"series": [{
data: [1, 2, 3, 4, 5, 6]
}, {
}],
"plotOptions": {
"series": {
"animation": true,
"lineWidth": 4,
"marker": {
"radius": 8,
"symbol": "circle"
},
"_colorIndex": 0,
"_symbolIndex": 0
}
},
"credits": {
"enabled": false
},
"colors": [
"#7cb5ec",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
]
});
Setting a whiteSpace to 'nowrap' in the labels.style object is a solution which you are looking for.
"labels": {
"distance": 25,
"style": {
"whiteSpace": 'nowrap'
}
},
Demo: https://jsfiddle.net/BlackLabel/edpcjL3k/
API: https://api.highcharts.com/highcharts/xAxis.labels.style
I'm testing the HighCharts Export server with a load of 1000 requests. All the requests are the same so I should receive the same output for the 1000 tests. The JSON request is the following:
{
"type": "png",
"scale": 1,
"infile": {
"chart": {
"backgroundColor": null,
"width": 1000,
"height": 200,
"style": {
"fontFamily": "Arial"
}
},
"title": {
"text": ""
},
"plotOptions": {
"bar": {
"pointPadding": 0,
"borderWidth": 0,
"dataLabels": {
"enabled": false,
"fontWeight": "normal"
}
}
},
"xAxis": {
"tickWidth": 0,
"gridLineColor": "#E2E8ED",
"categories": ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aoû", "Sep", "Oct", "Nov", "Déc"],
"labels": {
"enabled": true,
"style": {
"fontSize": "14px",
"color": "#52626F"
}
}
},
"yAxis": {
"min": -4,
"max": 10,
"tickInterval": 2,
"labels": {
"format": "{value}%",
"style": {
"fontSize": "14px",
"color": "#52626F"
}
},
"title": {
"text": null
}
},
"series": [{
"name": "xxx",
"type": "column",
"color": "#C20044",
"pointWidth": 43,
"data": [3.65, 2.70, 1.40, -0.85, 0.25, -2.65, 1.40, -3.40, -1.30, 3.45, 1.35, -2.35]
},
{
"name": "xxx",
"type": "line",
"color": "#52626F",
"lineWidth": 1.5,
"marker": {
"enabled": false
},
"data": [3.65, 6.35, 7.75, 6.90, 7.15, 4.50, 5.90, 2.50, 1.20, 4.65, 6.00, 3.65]
},
{
"showInLegend": false,
"lineWidth": 0,
"data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
"marker": {
"enabled": false
}
}
],
"legend": {
"enabled": true,
"layout": "vertical",
"align": "right",
"verticalAlign": "middle",
"margin": 65,
"itemMarginBottom": 6,
"itemMarginTop": 6,
"symbolRadius": 0,
"style": {
"fontSize": "14px",
"color": "#52626F"
}
},
"credits": {
"enabled": false
}
}
}
And the output is this chart:
There is nothing wrong with the output itself but after a while the HighCharts Server returns an error which says that the input data was invalid.
[error] work 9fa383e8bd0f44f3a1e50dc95b13df71 could not be completed, sending: error when performing chart generation: please check your input data. However the request hasn't been changed. Mostly the error occurs when we're halfway.
I run the export server using the following command highcharts-export-server --enableServer 1 --port 8080 --workers 20 --workLimit 200
A worklimit of 200 seems me a good number because we cross this amount of requests.
Does anyone have an idea why it suddenly doesn't want to process the request and says I need to check my input data?
Btw. The export server is running in a docker container, but I think that does not cause the problem.
I have a line chart that is used to show milestone events. So the xaxis is the date. If the data has more than one event on the same date, I offset the y value so that the point markers are stacked vertically. I don't want to make the y offset too big because that would make it hard to handle multiple markers on the same date. The markers also have a hover. Problem is that when I hover near a marker, only one marker's hover shows and I can only click on one marker.
See this jsfiddle with the label "Upgrade": http://jsfiddle.net/MichaelWitt/adun8km8/1/
You cannot click on this, but you can see the behavior on the hover as you cannot get the blue triangle to hover.
Highcharts.chart('container', {
"title": {
"text": null
},
"credits": {
"enabled": false
},
"chart": {
"zoomType": "x",
"type": "line",
"plotBackgroundImage": null,
"backgroundColor": "transparent",
"height": 330,
"borderWidth": 0,
"top": 0,
"marginTop": 0,
"marginBottom": 150,
"marginLeft": 120
},
"legend": {
"enabled": false,
"align": "left",
"verticalAlign": "top",
"layout": "vertical",
"x": 0,
"y": 0,
"useHTML": false,
"itemMarginTop": 4,
"itemHoverStyle": {
"color": "#3094d1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "normal"
},
"itemStyle": {
"color": "#404b56",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
},
"itemHiddenStyle": {
"color": "#caced1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
}
},
"xAxis": {
"type": "datetime",
"lineWidth": 0,
"lineColor": "#404b56",
"tickColor": "#404b56",
"tickInterval": 173520000,
"gridLineColor": "#222222",
"labels": {
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"format": "{value:%b %d, %Y}"
}
},
"yAxis": {
"labels": {
"enabled": true,
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"y": 3
},
"gridLineColor": "#dddddd",
"tickColor": "#dddddd",
"title": {
"text": null
},
"tickInterval": 1
},
"plotOptions": {
"series": {
"marker": {
"enabled": true,
"radius": 8,
"symbol": "triangle"
},
"cursor": "pointer",
"events": {},
"point": {
"stickyTracking": false
},
"states": {
"hover": {
"enabled": true,
"lineWidth": 0,
"lineWidthPlus": 0
}
}
},
"line": {
"lineWidth": 0,
"stickyTracking": false
}
},
"series": [{
"name": "Upgrade",
"data": [{
"x": 1510203600000,
"y": 0,
"name": "Upgrade",
"key": 158,
"shortDesc": "test",
"status": "Planned",
"marker": {
"symbol": "triangle",
"radius": 7,
"fillColor": "#3498db",
"states": {
"hover": {
"fillColor": "#3498db"
},
"select": {
"fillColor": "#3498db"
}
}
}
}, {
"x": 1510203600000,
"y": 0.25,
"name": "Upgrade",
"key": 159,
"shortDesc": "test",
"status": "Complete",
"marker": {
"symbol": "diamond",
"radius": 7,
"fillColor": "#2ecc71",
"states": {
"hover": {
"fillColor": "#2ecc71"
},
"select": {
"fillColor": "#2ecc71"
}
}
}
}],
"color": "#1abc9c",
"stickyTracking": false
}, {
"name": "Refresh",
"data": [{
"x": 1509336000000,
"y": 1,
"name": "Refresh",
"key": 160,
"shortDesc": "test",
"status": "Late",
"marker": {
"symbol": "square",
"radius": 7,
"fillColor": "#e74c3c",
"states": {
"hover": {
"fillColor": "#e74c3c"
},
"select": {
"fillColor": "#e74c3c"
}
}
}
}],
"color": "#036192",
"stickyTracking": false
}],
"tooltip": {
"followPointer": false,
"followTouchMove": false,
"shared": false,
"backgroundColor": {
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
},
"stops": [
[0, "rgba(96, 96, 96, .8)"],
[1, "rgba(16, 16, 16, .8)"]
]
},
"borderWidth": 0,
"style": {
"color": "#FFF"
}
}
}
Points in a line series, by default, are being tracked in x dimension. You can change that by setting series.findNearestPointBy option to 'xy'.
findNearestPointBy: String
Determines whether the series should look for the nearest point in both dimensions or just the x-dimension when hovering the series. Defaults to 'xy' for scatter series and 'x' for most other series. If the data has duplicate x-values, it is recommended to set this to 'xy' to allow hovering over all points.
"plotOptions": {
"series": {
"findNearestPointBy": "xy",
...
}
}
Live example: http://jsfiddle.net/120pm1m7/
Can someone tell me why this chart is rendering properly in drill up? The code is wrapping arc3d. I have provided the code and also the JFiddle for reference. When you click on the graph it drills down perfectly but while drilling up the graph is not rendering properly. it holds the color of the drilled slice.
(http://jsfiddle.net/subhasispatra/np0bn3ps/)
$(function () {
Highcharts.setOptions({
lang: {
drillUpText: '<Back'
}
});
Highcharts.wrap(Highcharts.SVGRenderer.prototype, 'arc3d', function (proceed) {
var result = proceed.apply(this, [].slice.call(arguments, 1));
result.fadeIn = result.show;
return result;
});
$('#container').highcharts({
"plotOptions": {
"pie": {
"point": {
"events": {
"click": function () {
if (this.options != undefined && this.options != null && this.options.url != null && this.options.url.length > 0) location.href = this.options.url;
else return;
}
}
},
"dataLabels": {
"enabled": true,
"style": {
"fontWeight": "bold",
"fontFamily": "Arial",
"fontSize": "10"
},
"color": "#000000"
},
"shadow": true,
"curson": "pointer",
"depth": 30,
"allowPointSelection": true,
"showInLegend": true
}
},
"drilldown": {
"series": [{
"id": "Draft",
"data": [{
"name": "15-21 DAYS",
"url": "http://www.google.com",
"y": 1
}, {
"name": "22-30 DAYS",
"url": "http://www.google.com",
"y": 1
}]
}, {
"id": "Canceled",
"data": [{
"name": "15-21 DAYS",
"url": "http://www.google.com",
"y": 0
}, {
"name": "22-30 DAYS",
"url": "http://www.google.com",
"y": 1
}]
}],
"drillUpButton": {
"relativeTo": "spacingBox",
"theme": {
"style": {
"fontSize": "7pt"
}
},
"y": 0,
"x": 0
}
},
"series": [{
"name": "SERIES",
"data": [{
"drilldown": "Draft",
"name": "Draft",
"y": 2
}, {
"drilldown": "Canceled",
"name": "Canceled",
"y": 1
}]
}],
"yAxis": {
"title": {
"style": {
"color": "#000000",
"fontSize": "10"
}
},
"labels": {
"style": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
}
}
},
"title": {
"text": "Orders created in last 30 days"
},
"legend": {
"itemStyle": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
},
"layout": "vertical",
"align": "left",
"verticalAlign": "middle"
},
"chart": {
"renderTo": "container",
"options3d": {
"enabled": "true",
"alpha": 40,
"beta": 0,
"depth": 40
},
"backgroundColor": "rgba(255, 255, 255, 0.1)",
"type": "pie"
},
"credits": {
"enabled": false
},
"xAxis": {
"title": {
"style": {
"color": "#000000",
"fontSize": "10"
}
},
"labels": {
"style": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
}
}
}
});
});
The problem is due to 3D rendering. Disable 3D options and it'll work fine.