JavaScript Echarts setup pie - javascript

I made pie chart, but I still have some setup issues.
I need to indent between segments, but I haven't found a suitable option, is it possible?
In the "Select" state, I want to save the scale of the selected element
When hovering, the segment increases to the outer radius, is it possible to make the increase go in both directions?
How it should look like:
Options:
{
"tooltip": {
"show": true,
"trigger": "item"
},
"legend": {
"show": false
},
"series": [
{
"type": "pie",
"radius": [
"70%",
"80%"
],
"avoidLabelOverlap": true,
"selectedMode": "single",
"selectedOffset": 20,
"itemStyle": {
"borderRadius": 100
},
"label": {
"show": false
},
"emphasis": {
"scaleSize": 20,
"itemStyle": {
"borderRadius": 5
}
},
"select": {
"itemStyle": {
"borderRadius": 5
}
},
"labelLine": {
"show": false
},
"data": [
{
"value": 25,
"itemStyle": {
"color": "#11BE8A"
},
"emphasis": {
"itemStyle": {
"color": "#0FA477"
}
},
"select": {
"itemStyle": {
"color": "#0FA477"
}
}
},
{
"value": 13,
"itemStyle": {
"color": "#3BDBAB"
},
"emphasis": {
"itemStyle": {
"color": "#26CF9C"
}
},
"select": {
"itemStyle": {
"color": "#26CF9C"
}
}
},
{
"value": 5,
"itemStyle": {
"color": "#52EEBF"
},
"emphasis": {
"itemStyle": {
"color": "#2EEAB2"
}
},
"select": {
"itemStyle": {
"color": "#2EEAB2"
}
}
},
{
"value": 31,
"itemStyle": {
"color": "#57E6EF"
},
"emphasis": {
"itemStyle": {
"color": "#2DE0EB"
}
},
"select": {
"itemStyle": {
"color": "#2DE0EB"
}
}
},
{
"value": 10,
"itemStyle": {
"color": "#73CCFF"
},
"emphasis": {
"itemStyle": {
"color": "#47BDFF"
}
},
"select": {
"itemStyle": {
"color": "#47BDFF"
}
}
},
{
"value": 16,
"itemStyle": {
"color": "#AEB7C2"
}
}
]
}
]
}

Related

how to set labeloffset dynamically in chart Js

I am using Chart.js, I have to generate stack bar chart based on fromMonth to toMonth selection.
My bar chart option is:
{
"chartCanvasHeight": "200",
"chartOptions": {
"responsive": "true",
"tooltips": {
"mode": "nearest",
"callbacks": {
"label": null,
"title": {}
}
},
"legend": {
"position": "bottom",
"labels": {
"generateLabels": {}
}
},
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": "true",
"callback": {}
},
"scaleLabel": {
"display": true,
"labelString": ""
}
}],
"xAxes": [{
"id": "xAxis1",
"type": "category",
"ticks": {
"display": false
}
},
{
"id": "xAxis2",
"type": "linear",
"offset": true,
"ticks": {
"max": 12,
"beginAtZero": true,
"stepSize": 0.5,
"callback": {}
},
"gridLines": {
"offsetGridLines": true,
"color": "white",
"zeroLineColor": "white"
}
},
{
"id": "xAxis3",
"type": "linear",
"ticks": {
"beginAtZero": false,
"max": 12,
"stepSize": 1,
"callback": {}
},
"gridLines": {}
},
{
"id": "xAxis4",
"ticks": {
"display": false
},
"scaleLabel": {
"display": true,
"labelString": ""
},
"gridLines": {
"zeroLineColor": "white",
"color": "white",
"drawOnChartArea": false
}
}
]
},
"plugins": {
"datalabels": {
"align": "top",
"anchor": "end",
"textAlign": "center"
},
"afterDatasetsDraw": {}
}
},
"chartDataSets": [],
"chartLabels": [],
"chartType": "bar"
}
everything is coming but labels are not center aligned as months could be between Jan to Dec. how to center align both x-axis label or labeloffset dynamically.
drawOnChartArea is also not working.
Last stork is also not coming on months x-axis.

Scatter plot not showing anything chartjs needs some debugging

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
"type": "scatter",
"data": {
"datasets": [
{
"label": "EARRINGS",
"data": [
{
"x": 13,
"y": "19-07-2021"
},
{
"x": 5,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "RINGS",
"data": [
{
"x": 4,
"y": "09-08-2021"
},
{
"x": 1,
"y": "06-08-2021"
},
{
"x": 9,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "BANGLES",
"data": [
{
"x": 2,
"y": "06-08-2021"
},
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "NECKLACES",
"data": [
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
}
]
},
"options": {
"scales": {
"x": {
"title": {
"display": true,
"text": "Date"
},
"ticks": {
"precision": 0,
"maxTicksLimit": 9
}
},
"y": {
"title": {
"display": true,
"text": "No of Trials"
},
"ticks": {
"precision": 0
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

2 things, dont use an outdated version of the lib since your config wont work and the y scale is a linear scale by default so if you want to use strings you need to specify it as a category scale
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
"type": "scatter",
"data": {
"datasets": [
{
"label": "EARRINGS",
"data": [
{
"x": 13,
"y": "19-07-2021"
},
{
"x": 5,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "RINGS",
"data": [
{
"x": 4,
"y": "09-08-2021"
},
{
"x": 1,
"y": "06-08-2021"
},
{
"x": 9,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "BANGLES",
"data": [
{
"x": 2,
"y": "06-08-2021"
},
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "NECKLACES",
"data": [
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
}
]
},
"options": {
"scales": {
"x": {
"title": {
"display": true,
"text": "Date"
},
"ticks": {
"precision": 0,
"maxTicksLimit": 9
}
},
"y": {
type: 'category',
"title": {
"display": true,
"text": "No of Trials"
},
"ticks": {
"precision": 0
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<canvas id="myChart"></canvas>

Calculating percentage value for each serie in highcharts

I am trying to calculate % values for each series, what I managed to find is function like
formatter:function() {
var pcnt = (this.y / dataSum) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
But what confuses me is how can I make dynamically this function so it can be applied on every serie object that is provided
Emphasize on dataSum from function above.
I tried googling just in case highcharts provide already some solution that they have in their documentation but sadly I did not find anything, only thing I found is to concatenate already provided value with + '%', and that is far beyond real value of percentage of that specific serie
$(function() {
var chart = new Highcharts.Chart(
{
"meta": {
"drilldownEnabled": false
},
"chart": {
renderTo:"container",
"additionalData": {
"dateTime": false,
"datetype": "string",
"cliccable": true,
"drillable": false,
"drillableChart": false,
"isCockpit": true,
"categoryColumn": "city",
"categoryGroupBy": "",
"categoryGroupByNamens": "",
"categoryName": "city",
"categoryOrderColumn": "",
"categoryOrderType": "",
"categoryStacked": "",
"categoryStackedType": ""
},
"zoomType": "xy",
"panning": true,
"type": "column",
"options3d": {
"enabled": false,
"alpha": 25,
"beta": 15,
"depth": 50,
"viewDistance": 25
},
"backgroundColor": "#FFFFFF",
"heightDimType": "pixels",
"widthDimType": "pixels",
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"borderColor": "#FFFFFF",
"style": {
"backgroundColor": "#FFFFFF",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
},
"events": {}
},
"colors": [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
"title": {
"text": "",
"style": {
"align": "",
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
}
},
"legend": {
"itemDistance": 0,
"symbolPadding": 25,
"enabled": false
},
"xAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"type": "category",
"id": 0,
"title": {
"customTitle": false,
"text": "city",
"style": {}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
}
}
],
"yAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0,
"zIndex": 1
}
],
"title": {
"text": "",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
},
"gridLineDashStyle": "$convertedTypeline",
"minorGridLineDashStyle": "$convertedMinorTpeline"
}
],
"series": [
{
"name": "total_children",
"dataLabels": {
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": "",
"fontStyle": ""
},
"enabled": true,
"labelFormat": "{y:,.2f}"
},
"data": [
{
"drilldown": false,
"y": 271,
"name": "Pomona",
"datetype": "string"
},
{
"drilldown": false,
"y": 237,
"name": "Port Hammond",
"datetype": "string"
},
{
"drilldown": false,
"y": 205,
"name": "Port Orchard",
"datetype": "string"
},
{
"drilldown": false,
"y": 239,
"name": "Portland",
"datetype": "string"
},
{
"drilldown": false,
"y": 265,
"name": "Puyallup",
"datetype": "string"
},
],
"selected": true,
"tooltip": {
"valueDecimals": 2,
"scaleFactor": "empty",
"ttBackColor": "#FCFFC5"
},
"yAxis": 0
},
{
"name": "num_cars_owned",
"dataLabels": {
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": "",
"fontStyle": ""
},
"enabled": true,
"labelFormat": "{y:,.2f}"
},
"data": [
{
"drilldown": false,
"y": 228,
"name": "Acapulco",
"datetype": "string"
},
{
"drilldown": false,
"y": 189,
"name": "Albany",
"datetype": "string"
},
{
"drilldown": false,
"y": 212,
"name": "Altadena",
"datetype": "string"
},
{
"drilldown": false,
"y": 219,
"name": "Anacortes",
"datetype": "string"
},
{
"drilldown": false,
"y": 231,
"name": "Arcadia",
"datetype": "string"
},
],
"selected": true,
"tooltip": {
"valueDecimals": 2,
"scaleFactor": "empty",
"ttBackColor": "#FCFFC5"
},
"yAxis": 0
}
],
"tooltip": {
"borderWidth": 0,
"borderRadius": 0,
"followTouchMove": false,
"followPointer": true,
"useHTML": true,
"backgroundColor": null,
"style": {
"padding": 0
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"fontFamily": "",
"fontSize": "",
"color": ""
},
"position": {
"align": "center",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"line": {
"marker": {
"symbol": "circle",
"lineWidth": 2
}
},
"series": {
"events": {},
"showCheckbox": true,
"cursor": "pointer",
"point": {
"events": {}
},
"dataLabels": {
"allowOverlap": true
},
"turboThreshold": 2000
}
}
}
);
});
Has anyone ever step onto solution that provides % values of series by any case ?
I am trying to calculate % of total_children, and % of num_cars_owned serie as they are separated objects of serie array.
You can find code example on link HERE http://jsfiddle.net/JeLrb/538/

You need to calculate dataSum value:
tooltip: {
...,
formatter: function() {
var dataSum = 0,
pcnt;
this.series.points.forEach(function(point) {
dataSum += point.y;
});
pcnt = (this.y / dataSum) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
Live demo: http://jsfiddle.net/BlackLabel/9tbynahj/
API Reference: https://api.highcharts.com/highcharts/tooltip

How to display no data found in highcharts

In highcharts, if there is no data found in the json value, I want to display an error message.
I used this code:
if(options.series[0].data.length == 0) {
alert('nodatafound');
} else {
var chart = new Highcharts.Chart(options);
}
This error appears:
TypeError: options.series[0].data is undefined
Data from JSON:
{
"chart": {
"renderTo": "container2",
"type": "column",
"marginRight": 10,
"marginBottom‌": 125
},
"title": {
"text": "",
"x": -20
},
"exporting": {
"enabled": false
},
"credits": {
"enab‌led": false
},
"subtitle": {
"text": "",
"x": -20
},
"xAxis": {
"labels": {
"rotation": -90,
"sty‌le": {
"fontSize": "10px"
}
}
},
"yAxis": {
"title": {
"text": ""
},
"plotLines": [{
"width": 1,
"c‌olor": "#808080"
}]
},
"tooltip": {
"shared": true
},
"legend": {
"align": "right",
"verticalA‌lign": "top",
"x": 0,
"y": 20,
"borderWidth": 0
},
"plotOptions": {
"column": {
"stacking": "no‌rmal",
"dataLabels": {
"enabled": false,
"color": "white"
}
}
},
"series": [{
"name": "2015-16-Q1"
}, {
"name": "2015-16-Q2"
}, {
"name": "2015-16-Q3"
}, {
"na‌me": "2015-16-Q4"
}]
}

You can use no-data module which allows do that.
Ref: http://code.highcharts.com/modules/no-data-to-display.js
Example: http://jsfiddle.net/6o8o03fe/1/

jointjs: I want to get the value of label from json text

I want to get the value of text a "Label" and the type with JSON from this JSon text :
{
"cells": [{
"type": "devs.Model",
"size": {
"width": 40,
"height": 40
},
"inPorts": [""],
"outPorts": [""],
"position": {
"x": 168,
"y": 99
},
"angle": 0,
"id": "c7cf7b2d-3b54-4dd1-9cbf-7a37a72559fc",
"z": 1,
"attrs": {
".label": {
"text": "aa",
"ref-x": 0.4,
"ref-y": 0.2
},
"rect": {
"fill": "#2ECC71"
},
".inPorts circle": {
"fill": "#16A085",
"magnet": "active",
"type": "input"
},
".outPorts circle": {
"fill": "#E74C3C",
"type": "output"
},
".inPorts>.port0>.port-label": {
"text": ""
},
".inPorts>.port0>.port-body": {
"port": {
"id": "in8",
"type": "in"
}
},
".inPorts>.port0": {
"ref": ".body",
"ref-y": 0.5
},
".outPorts>.port0>.port-label": {
"text": ""
},
".outPorts>.port0>.port-body": {
"port": {
"id": "out9",
"type": "out"
}
},
".outPorts>.port0": {
"ref": ".body",
"ref-y": 0.5,
"ref-dx": 0
}
}
}, {
"type": "link",
"source": {},
"target": {},
"id": "1e977b11-c003-4c22-ba48-c04994f63c79",
"z": 2,
"attrs": {}
}]
}
For the label , I do : document.write(jsonString.cells[0].attrs.label.text);
and for the type : (jsonString.cells[0].attrs.label.text);
var jsonString = JSON.stringify(graph);
document.write(jsonString.cells[0].type);

Categories