Related
I want to display the following image instead of Label in a gauge chart:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="33.614mm" height="23.031mm" version="1.1" viewBox="0 0 33.614 23.031" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-34.286 -116.77)">
<path
d="m35.218 128.28 2.6458-10.583 2.6458 10.583 2.6458 10.583 5.2916-21.166 5.2916 21.166 5.2916-21.166 5.2916 21.166 2.6458-10.583v0"
fill="none" stroke="#000" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.865"
/>
</g>
</svg>
Here is the chart:
option = {
series: [
{
type: 'gauge',
startAngle: 200,
endAngle: -20,
center: ['50%', '70%'],
axisLine: {
lineStyle: {
width: 8,
color: [
[0.3, 'red'],
[0.7, 'orange'],
[1, '#96BE0F']
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -15,
length: 5,
lineStyle: {
color: '#fff',
width: 1
}
},
splitLine: {
distance: -15,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
color: 'auto',
distance: -20,
fontSize: 12
},
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'auto',
},
data: [
{
value: 50,
name: 'Label',
// image: 'path://m57.046 134.9v-13.229m3.9688 12.7h2.6458v-12.171h-2.6458m-22.49 12.7h18.521v2.6458l3.9687 1e-5 1e-6 -18.521h-3.9688v2.6458h-18.521v0h-1e-6'
}
],
title: {
fontSize: 20,
fontWeight: 800,
fontFamily: 'Arial',
color: 'grey',
offsetCenter: [0, '-70%'],
// image: 'path://m57.046 134.9v-13.229m3.9688 12.7h2.6458v-12.171h-2.6458m-22.49 12.7h18.521v2.6458l3.9687 1e-5 1e-6 -18.521h-3.9688v2.6458h-18.521v0h-1e-6'
},
}
]
};
I want to insert that image with fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.865".
I only could output the image in a pictorial chart, but even then I could not make it not to fill anything.
Update
I was able to output a PNG image using graphic, but not an SVG. Has anyone have a clue why? How can I output an SVG image?
option = {
xAxis: {show: false},
yAxis: {show: false},
series: [
{
type: 'gauge',
startAngle: 200,
endAngle: -20,
center: ['50%', '70%'],
axisLine: {
lineStyle: {
width: 8,
color: [
[0.3, 'red'],
[0.7, 'orange'],
[1, '#96BE0F']
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -15,
length: 5,
lineStyle: {
color: '#fff',
width: 1
}
},
splitLine: {
distance: -15,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
color: 'auto',
distance: -20,
fontSize: 12
},
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'auto'
},
data: [50]
},
],
graphic: {
type: 'image',
left: 'center',
bottom: 495,
offsetCenter: [0, '-60%'],
style: {
image: 'https://i.imgur.com/4KIo3sb.png',
// image: 'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z',
width: 80
}
}
}
How to add gradient (mixed with two colors) for one bar chart column and on top of that stack another column with (single color)?
Currently, I am trying to figure it out how to implement gradient and single color pattern in ApexChart.js. As for now, I can only use one at the same time...
JavaScript:
var colors = ["#A865AA", "#222130",];
var dataColors = $("#monthlycost-ApexChart").data('colors');
if (dataColors) {
colors = dataColors.split(",");
}
var options = {
chart: {
height: 260,
type: 'bar',
stacked: true,
stackType: '10%',
toolbar: {
show: false
},
},
stroke: {
curve: 'smooth',
width: 1
},
grid: {
column: {
colors: ['transparent', '#e5e5e5'],
},
},
plotOptions: {
bar: {
columnWidth: '20%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'Cost',
data: [5.7, 5.7, 5.4, 5.4, 5.2, 7.8, 5.6, 5.4, 5.7, 0, 0, 0]
}, {
data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]
}],
xaxis: {
labels: {
show: true,
style: {
fontSize: '10px'
},
padding: {
top: 0,
bottom: 20
},
},
offsetY: -10,
position: 'bottom',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
padding: {
top: -5,
bottom: 0
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
title: {
text: '£0,000',
style: {
fontWeight: 400,
fontSize: '9px',
}
},
tickAmount: 5,
forceNiceScale: false,
decimalsInFloat: 0,
max: 10,
},
fill: {
type: "gradient",
/* gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
type: 'vertical',
opacityTo: 0.9,
colorStops: [
{
offset: 40,
color: "#EF9432",
opacity: 1
},
{
offset: 100,
color: "#A865AA",
opacity: 1
}
]
}*/
},
legend: {
show: false,
},
colors: colors,
grid: {
row: {
show: false,
},
borderColor: '',
padding: {
bottom: 5,
top: 1
}
}
}
Need to get this
Currently have
You should use distributed property
plotOptions: {
bar: {
distributed: true
}
}
I'm having trouble on getting the events to work on my chart. I need to get the value of selected area of my parallel coordinates chart. I tried using chartDataRangeSelected but it does nothing when I select some data.
Here's my code:
<div echarts [options]="chartOption" class="demo-chart" (chartInit)="onChartInit($event)" (chartDataRangeSelected)="onChartSelect($event)"></div>
Chart config:
chartOption: EChartOption = {
title: {
text: 'Demo Parallel Coordinates',
subtext: 'data from macrofocus',
left: 'center',
top: 5,
itemGap: 0,
textStyle: {
color: '#000000'
},
z: 200
},
parallelAxis: this.makeParallelAxis(this.schema),
grid: [{
show: true,
left: 0,
right: 0,
top: '0',
bottom: 0,
borderColor: 'transparent',
backgroundColor: 'white',
z: 99
}],
parallel: {
top: '10%',
left: 100,
right: 100,
bottom: 100,
axisExpandable: true,
axisExpandCenter: 15,
axisExpandCount: 10,
axisExpandWidth: 60,
axisExpandTriggerOn: 'mousemove',
z: 100,
parallelAxisDefault: {
type: 'value',
nameLocation: 'start',
nameRotate: 25,
// nameLocation: 'end',
nameTextStyle: {
fontSize: 12
},
nameTruncate: {
maxWidth: 170
},
nameGap: 20,
splitNumber: 3,
tooltip: {
show: true
},
axisLine: {
// show: false,
lineStyle: {
width: 1,
color: '#000000'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
z: 100
}
},
series: [
{
name: 'parallel',
type: 'parallel',
smooth: true,
lineStyle: {
color: '#577ceb',
width: 0.5,
opacity: 0.6
},
z: 100,
data: this.rawData
}
]
};
Function:
onChartSelect(e){
console.log(e);
}
Am I using the correct events for doing so? Your help will be much appreciated.
Thanks
according to eCharts document,
the selectDataRange Event emitted after range is changed in visualMap. https://www.echartsjs.com/en/api.html#events.datarangeselected,
which is chartDataRangeSelected of ngx-echarts mapped to.
And you can see that, it is an event related to visualMap. your charts does not have a visual map at all, so i guess the event will not be fired.
You can try chartAxisAreaSelected, as this is more related to your chart.
How do I change the order of pie chart slices generation? Here is my code.
var DEFAULT_PIE_CHART_OPTIONS = {
theme: 'material',
titleTextStyle: { fontSize: 12 },
is3D: false,
pieSliceText: 'label',
colors: ['#8E142E','#C3CA21','#8A972B','#6FF522','#167D13'],
fontSize: 12,
pieHole: 0.6,
pieStartAngle: 180,
height: 600,
chartArea: { width: '100%', height: '100%', left: 0, top: 100 },
legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } }
};
var chartOptions = DEFAULT_PIE_CHART_OPTIONS;
chartOptions.colors = null;
var chartOverallPmmLevelCalculated = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chartOverallPmmLevelCalculatedHtml',
options: chartOptions
});
function drawPieChart() {
var responseDataTable = levelTableChart.getDataTable();
var chartDataTable = new google.visualization.DataTable();
chartDataTable.addColumn('string', 'Fiscal');
chartDataTable.addColumn('number', 'LEVEL');
var chartDataTableRow = new Array();
var rowCounter;
var levelValue;
for (rowCounter = 0; rowCounter < responseDataTable.getNumberOfRows() ; rowCounter++) {
var seek = 0 * 1;
levelValue = responseDataTable.getValue(rowCounter, 1);
if (levelValue !== null) {
chartDataTableRow[seek++] = "LEVEL " + levelValue.toString();
chartDataTableRow[seek++] = responseDataTable.getValue(rowCounter, 2);
} else {
chartDataTableRow[seek++] = null;
chartDataTableRow[seek++] = null;
}
chartDataTable.addRow(chartDataTableRow);
}
chartOverallPmmLevelCalculated.setDataTable(chartDataTable);
chartOverallPmmLevelCalculated.draw();
}
I attached the generated pie chart which generated with random LEVEL information. I just need to display LEVEL 0 to LEVEL 3 clockwise in the pie chart slices.
sort the DataTable before drawing the chart
// sort data - first column
data.sort([{column: 0}]);
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Fiscal', 'LEVEL'],
['LEVEL 3', 30],
['LEVEL 1', 12],
['LEVEL 2', 42],
['LEVEL 0', 8],
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div',
dataTable: data,
options: {
theme: 'material',
titleTextStyle: { fontSize: 12 },
is3D: false,
pieSliceText: 'label',
fontSize: 12,
pieHole: 0.6,
pieStartAngle: 180,
height: 600,
chartArea: { width: '100%', height: '100%', left: 0, top: 100 },
legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } }
}
});
// sort data - first column
data.sort([{column: 0}]);
chart.draw();
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I need a simple bar chart with only one percentage bar and labels. I'm trying to remove the padding between the bar and the total canvas with 'chartArea' but the result it's not the expected, anyone knows how i can do that?
<https://jsfiddle.net/rro74054/1/>
I set a 'tomato' background color to make the space more visible.
Thanks everyone.
Add this to your options...
bar: {
groupWidth: '100%'
},
Example...
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawRightY);
function drawRightY() {
var data = google.visualization.arrayToDataTable([
['', 'name1', {type: 'string', role: 'annotation'}, 'name2', {type: 'string', role: 'annotation'}, 'name3', {type: 'string', role: 'annotation'}],
['', 50, '50', 100, '100', 150, '150']
]);
var options = {
width: 400,
height: 400,
bar: {
groupWidth: '100%'
},
chartArea: { width: '100%', height: '100%', backgroundColor: 'tomato'},
isStacked: 'percent',
annotations: {
alwaysOutside: false,
textStyle: {
fontSize: 10,
auraColor: 'none',
color: '#fff'
}
},
legend: 'none',
enableInteractivity: false,
hAxis: {
baseline: 0,
gridlines: { count: 0 }
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>