i have this object and i need to convert to pie chart (i'am using echart apache)
var data = [
{
"Key": "Test1",
"value": 2
},
{
"Key": "Test2",
"value": 1
}
]
and this my script to create a chart with real data but always show me the first value from data object (Test1 , 2) i don't now the problem :)
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;
//console.log(UserSourceData);
jQuery.each(UserSourceData, function (i, val) {
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['30%', '60%'],
data: [
{ value: val['value'] , name: val['Key'] }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
});
option && myChart.setOption(option);
}
I don't know what UserSourceData represents but if you want the datapoints from the data object,you need to run the loop only for the data property within the options object.A map function would do the trick.
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
const option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['30%', '60%'],
data: data.map(obj => ({value:obj['value'],name:obj['Key']})),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option)
Related
Using value, value_classification, and timestamp values in json data
I am trying to print as a solid gauge of Highcharts.
The values in series data are inserted as blank values.
What's the problem?
{
"name": "Fear and Greed Index",
"data": [
{
"value": "27",
"value_classification": "Fear",
"timestamp": "21-12-2021",
"time_until_update": "-1639979045"
}
],
"metadata": {
"error": null
}
}
Using that value,
I am trying to complete the solid gauge of Highcharts.
Highcharts Demos › Solid gauge
https://www.highcharts.com/demo/gauge-solid
The code I've tried so far is below.
HTML
<div id="container-speed" class="chart-container"></div>
JAVASCRIPT
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
for (i = 1; i > json.length; i++){
processedData.push(json[i].value);
}
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'test'
}
},
credits: {
enabled: false
},
series: [{
name: 'test',
data: processedData,
dataLabels: {
format:
'<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>'
}
}]
}));
});
});
Hint: Check if processedData outputs something.
Mistake: Looping over json data is incorrect as the response is an object and not an array.
Create an IIFE and verify the first part then move ahead with chart creation.
eg.
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
// wrong
for (i = 1; i > json.length; i++){
processedData.push(json[i].value);
}
});
console.log(processedData);
});
I reproduce your code and receive the data using this approach:
fetch("https://api.alternative.me/fng/?date_format=en")
.then(response => response.json())
.then(output => {
const chartData = output.data.map(d => parseFloat(d.value))
Demo: https://jsfiddle.net/BlackLabel/s1fczwj0/
I am working on my project with Django where I need to use Javascript and a chart library. I have two charts that I made with ApexCharts, but I don't know how to prevent the label text to being slant and overflow. I can't find anything about this problem in the documentation or I'm not enough familiar to find what I need. :)
var options07 = {
series: [{
name: 'SOHA',
data: [ {{i.szervkult07a}} ]
}, {
name: 'RITKÁN',
data: [ {{i.szervkult07b}} ]
}, {
name: 'IDŐNKÉNT',
data: [ {{i.szervkult07c}} ]
}, {
name: 'GYAKRAN',
data: [ {{i.szervkult07d}} ]
}, {
name: 'MINDIG',
data: [ {{i.szervkult07e}} ]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'
],
},
fill: {
opacity: 1
},
legend: {
position: 'right',
offsetX: 0,
offsetY: 50
},
};
var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
chart.render();
var options07b = {
series: [{
name: 'SOHA',
data: [{{i.szervkult07a}}]
}, {
name: 'RITKÁN',
data: [{{i.szervkult07b}}]
}, {
name: 'IDŐNKÉNT',
data: [{{i.szervkult07c}}]
}, {
name: 'GYAKRAN',
data: [{{i.szervkult07d}}]
}, {
name: 'MINDIG',
data: [{{i.szervkult07e}}]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
},
yaxis: {
title: {
text: 'fő'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val + " fő"
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
chart.render();
From the docs, You should be able to add rotate: 0 to the labels section of xaxis. I suggest trying to shorten those. I imagine a long label will not look as good as a shorter one.
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
labels: {
rotate: 0
}
}
So i have the following configuration:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: icons.marker_01,
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
Now as you can see i am using two images as my xAxis
Now i wish to make these show up on my tooltip when i hover over the chart. However i am not quite sure how to do that and was hoping some of you might be able to help?
Simply stated, a series may have a tooltip but the tooltip must be listed as an object with an identifying trigger (see tooltip documentation).
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => {
// see tooltip.formatter for details
// you want to focus on the 'marker' property
return params[0].name;
}
}
}]
With this in mind, you can set two variables and print them as need be within the output of your tooltip. See the additional example below (from CodePen).
var myChart = echarts.init(document.getElementById("main"));
// specify chart configuration item and data
var option = {
title: {
text: "ECharts entry example"
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: 'rgba(0, 0, 0, 0.8)',
formatter: (params) => {
// create new marker
var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5px;width: 20px;"><span style="background-color:${params[0].color};display: block;height: 4px;margin-top: 4px;width: 20px;"></span></span>`;
var icon1 = `<span data-tooltip="implied-high" style="background-color:rgba(255,255,255,.75);border-radius: 2px;display: inline-block;height: 12px;margin-right:5px;width: 20px;"><span style="background-color:${params[0].color};border: 1px solid ${params[0].color};border-radius:50%;display:block;height:6px;margin-left:7px;margin-top:3px;width:6px;"></span></span>`;
console.log("params", params, params[0].name);
return `${icon0} ${params[0].name}
${icon1} ${params[0].value}`;
},
textStyle: {
fontWeight: 'bold',
fontSize: 18
}
},
legend: {
data: ["Sales"]
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
I'm trying to plot a scatter plot using the Highcharts library. I get some results from my database and format them in front end level using javascript (transformGraph2Data function in the following code does this work - I don't include the code of this function here to keep the question clear and short). More specifically I have the following piece of code:
<script type="text/javascript">
var graph2dataa;
function plotGraph2() {
graph2dataa = transformGraph2Data(<%=graph2data%>);
console.log(graph2dataa);
console.log(typeof graph2dataa);
Highcharts.chart('graphDiv2', {
chart: {
type: 'scatter',
zoomType: 'xy',
events: {
click: function (e) {
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
series.addPoint([x, y]);
}
}
},
xAxis: {
title: {
enabled: true,
text: '<b><%=graph2XaxisTitle%></b>'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 2
}]
},
yAxis: {
title: {
text: '<b><%=graph2YaxisTitle%></b>',
style: {
fontWeight: 'normal'
}
},
plotLines: [{
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 2
}]
},
plotOptions: {
series: {
cursor: 'pointer',
turboThreshold: 0
},
scatter: {
marker: {
radius: 2,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
}
}
},
graph2dataa //THIS VARIABLE HOLDS THE ACTUAL DATA I'D LIKE TO PLOT
});
}
</script>
The graph2dataa variable gets the following string value:
series: [{ name: "22h - 4h", color: "#000000", data: [{ name: "HACD3", x: 0.417666669, y: 1.841010179 }, { name: "VPS53", x: 0.113499999, y: 0.153579771 }, { name: "IPO11", x: -0.300000004, y: 0.734065117 }, { name: "FIP1L1", x: 0.067000012, y: 0.165934747 }, { name: "HSPE1", x: 0.186666687, y: 0.407514478 }] }] which is valid and can be plotted if I hardcode it. The problem occurs when I try to pass that value using the graph2dataa variable.
Any ideas what am I doing wrong?
Highcharts require a specific series structure and it should be an array of object, not a string. Your transformGraph2Data function should return the correct structure, which looks this way:
var graph2dataa = [{
name: "22h - 4h",
color: "#000000",
data: [{
name: "HACD3",
x: 0.417666669,
y: 1.841010179
}, {
name: "VPS53",
x: 0.113499999,
y: 0.153579771
}, {
name: "IPO11",
x: -0.300000004,
y: 0.734065117
}, {
name: "FIP1L1",
x: 0.067000012,
y: 0.165934747
}, {
name: "HSPE1",
x: 0.186666687,
y: 0.407514478
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4ath23yo/
I am creating multi serial line chart using highchart.
My Json (cleanData) look like this...
[{
"key": "port_A",
"value": [
[1447596900000, 0],
[1447596960000, 0],
[1447597020000, 1]
]
}, {
"key": "port_B",
"value": [
[1447596900000, 0],
[1447596960000, 4]
]
} {
"key": "port_C",
"value": [
[1447596900000, 0],
[1447596960000, 0],
[1447597020000, 1]
}]
How can I map "key" as serial and "value" as data points on highchart
$(document).ready(function () {
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
zoomType: 'y',
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: 0,
y: -30
}
},
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50
}
},
title: {
text: 'Users by region',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'category',
//categories: ['APAC', 'test2', 'test3', 'test4'],
labels: {
rotation: -45,
style: {
'fontSize': '10px',
'fontFamily': 'Verdana, sans-serif',
'color': '#333',
'text-transform': 'uppercase',
'font-weight': '600'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of users '
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '#users: <b>{point.y:.1f}</b>'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
column: {
depth: 25
}
},
series: []
});
var cleanData1 = JSON.stringify(myArray);
var cleanData = $.parseJSON(cleanData1);
console.log(JSON.stringify(cleanData));
chart.series = cleanData;
});
You need to iterate over your json and put the name and data in an object as like below
var seriesData = [];
$.each(clearData, function(i,item){
seriesData.push({name:clearData[i].key,data:clearData[i].value});
console.log("seriesData"+JSON.stringify(seriesData));
});
See working fiddle here