I have a ZingChart pie chart fed by an external CSV file. How do I hide the label on the pie chart? In the simulated code below it's that read entirely text appearing at the bottom.
var chartData = {
type: "pie",
csv: {
title: true,
dataString: "Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14",
rowSeparator: "_",
separator: "|",
mirrored: true,
horizontalLabels: true,
verticalLabels: true,
}
}
zingchart.render({
id: "chartDiv",
data: chartData,
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zingchart/2.6.0/zingchart.min.js"></script>
</head>
<body>
<div id='chartDiv'></div>
</body>
</html>
The docs don't make it clear how to address those items (or they do... and it doesn't work).
We call those "items" valueBox's in our library. Every piece of text on the chart inherits from label and in this case, valueBox inherits from that as well. This means you can apply a pretty standard set of label manipulations to all pieces of text on the chart.
"plot": {
"valueBox": {
"visible": false
}
}
Adversely, you can add multiple labels through a valueBox array. It can either be a single object or an array of objects. This would allow you to display multiple labels.
NOTE: the _ is a comment in JSON structure
"_valueBox": [
{
type: 'all',
placement: 'out',
text: '%t'
},
{
type: 'all',
placement: 'in',
text: '%v (%npv)'
}
]
Note: CSV legend is broken in v2.6.0. We have put a patch out at the following link.enter code here
<script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>
All documentation referenced can be found here:
https://www.zingchart.com/docs/tutorials/chart-elements/value-boxes/
https://www.zingchart.com/docs/api/json-configuration/graphset/plot/
https://www.zingchart.com/docs/api/json-configuration/graphset/plot/value-box/
https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
var myConfig = {
"graphset":[
{
"type":"pie",
"csv":{
"title":true,
"separator":"|",
"mirrored":true,
"data-string":"Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14",
"row-separator":"_",
"horizontal-labels":true,
"vertical-labels":true
},
"scale":{
"visible":false
},
"plot": {
"valueBox": {
"visible": false
},
"_valueBox": [
{
type: 'all',
placement: 'out',
text: '%t'
},
{
type: 'all',
placement: 'in',
text: '%v (%npv)'
}
]
}
}
],
"tween":null
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
Related
I have been trying to add a number on the inside of the "Simple donut chart" from ApexCharts. This is the link to it - https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/ .
To use the chart, I ran the command "npm install apexcharts --save" in my project terminal.
This is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Chart.css">
<script src="./Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<div id="chart"></div>
<script>
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</html>
This is my CSS file:
#chart{
width:400px;
height:400px;
margin-left: auto;
margin-right: auto;
}
This is what I used in my JavaScript file:
var options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
This is the result of the code mentioned above:
Current Chart
This is a model to show how I would like the number to be displayed:
Example Chart
I would like to know if its possible to add a number inside the current chart with ApexCharts as the example chart shows.
Yes it's possible.
let options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
label: '',
formatter: () => 'Text you want'
}
}
}
}
}
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
<div id="chart"></div>
You can show the following information inside a donut:
a value of an individual donut piece (on hover to that piece)
the total of all the donut pieces
custom text
Try to change values of the total object properties to better understanding what I mean. More detailed information is here
I am trying to plot pandas dataframe from a python function and display it on a web server using Highcharts pie chart. I can get the data from the function to the web server as json data through flask. but when I want to display it the chart is empty. Through the web console I also made sure that the data format going into the Highcharts is correct but still nothing.
Here I am retrieving the panda dataframe and sending it to the web server through flask:
actype_json = actype.to_json(orient = 'records')
#app.route('/data/airport', methods = ['GET'])
def broadcast_data():
return eval(json.dumps(actype_json))
#app.route('/')
def plotgraph():
return render_template('airport.html')
On my HTML file, I tried to use AJAX to call for the data and plot it in a Highcharts Pie Chart:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>
function GetUpdatedData(){
$.ajax({
url: "/data/airport",
})
.done(function( data ) {
console.log( data );
DrawGraph(data);
});
}
function DrawGraph(dataset) {
// Radialize the colors
Highcharts.setOptions({
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
})
});
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
name: 'Aircraft',
data: [dataset]
}]
});
setTimeout(GetUpdatedData, 1500);
}
</script>
</body>
</html>
This is the screenshot of the Highcharts Pie Chart that I am seeing:
The response tab is showing the format of the data trying to be plotted on Highchart. Any advice will be very helpful. Thanks!
You've made a simple mistake when adding data to series.data array. Note that your data is actually a correct Highcharts data array with point objects inside:
data:
[{
"AC TYPE": "B773",
"y": 35
}, {
"AC TYPE": "B77W",
"y": 16
}]
However, you've added this array inside another one like that:
series: [{
name: 'Aircraft',
data: [dataset]
}]
This gives you an invalid data format with two nested arrays:
series: [{
name: 'Aircraft',
data: [[{
"AC TYPE": "B773",
"y": 35
}, {
"AC TYPE": "B77W",
"y": 16
}]]
}]
Remove the wrapping array and the chart should be rendered correctly.
Demo:
https://jsfiddle.net/BlackLabel/49rhpmyg/
I'm trying to create column chart using data imported from csv file. I have tried every possible solution on the Internet but couldn't figure out the solution to my problem. I'm trying to show Shop Name on x-axis and Sales on y-axis.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body{
margin-top: 30px;
margin-left:40px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.js"></script>
</head>
<body>
</div>
<div id="container" style="height: 400px"></div>
<script type="text/javascript">
$(function () {
$.get('stores.csv', function(csvdata) {
var data = Papa.parse(csvdata);
$('#container').highcharts({
chart: {
type: "column"
},
title: {
text: "Sales Analysis"
},
xAxis: {
ShopName: []
},
yAxis: {
title: {
text: "Sales"
}
},
data: {
csv: data
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
}
});
});
});
</script>
</body>
</html>
csv file(stores.csv):
Longitude,Latitude,ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1 9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura 239 - G T Road,Baghbanpura,49901
This is just to give you an example of how you can plot chart with Highchart while parsing .csv data. Code is simple and self explanatory.
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$.get('stores.csv', function(data) {
var lines = data.split('\n');
console.log(lines);
var shopNameData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
shopNameData[lineNo-1] = lineContent.split(',')[2];
}
});
var salesData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
salesData[lineNo-1] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
}
});
console.log(shopNameData);
console.log(salesData);
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Analysis'
},
subtitle: {
text: 'put subtitle here'
},
xAxis: {
categories: shopNameData,
crosshair: false
},
yAxis: {
min: 0,
title: {
text: 'Sales (in Rupees)'
}
},
tooltip: {
headerFormat: '<b>Shopname:</b> {point.x}<br/>',
pointFormat: '<b>{series.name}:</b> {point.y}<br/>'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Sales',
data: salesData
} ]
});
});
</script>
</body>
</html>
.csv file used is:
Longitude,Latitude, ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1 9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura 239 - G T Road,Baghbanpura,49901
Points to be noted
Note that in .csv there are no space after comma, so .csv must follow that or you have to edit the logic to form shopNameData and salesData
Host both .html and .csv at one place in some server. Otherwise, in Google Chrome, you will get CrossOrigin error.
Here is the snapshot of Chart if you will copy the html and name the .csv as stores.csv in same directory of html and host in some server.
This is my first time using highcharts alongside with jade and the MEAN stack. I am able to get the chart to work on a jsfiddle, but it will not display anything inside of the div when running locally.
this is the jsfiddle I used jade-lang to convert the jade into html so I would be able to put it into jsfiddle.
<div id="chartcon" style="min-width: 310px; height:400px; margin 0 auto"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highchart.com/modules/exporting.js" type="text/javascript"></script>
$(function() {
$('#chartcon').highcharts({
chart: {
type: 'column'
},
title: {
text: 'colum chart w/ neg values'
},
xAxis: {
categories: ['Apples','Oranges', 'Pears']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5,3,4]
}, {
name: 'Jane',
data: [2,-2,-3]
}, {
name: 'Joe',
data: [3,4,5]
}]
});
});
I am trying to do this in a single jade file, which I have been thinking may be the problem (I can't find to much on using jade with highcharts so this leads me to think it may not be compatible?)
Does anyone know of an Echarts (http://echarts.baidu.com) example that:
Only uses english characters
Correctly imports all the necessary includes from a local directory structure
Works
All the Echarts examples are presented very nicely but there are no examples that show how to deploy and run it locally (in English) that (and this is rather important) actually work.
From my many 'copy and paste' then edit efforts I just get endless file not found messages and mysterious characters all over the place (to be fair they are Chinese characters but I only see them as mysterious squiggles). I've also downloaded the github sampes and searched Google but with no success.
The library looks absolutely brilliant but I can't decipher it :(
A single .jsp page example in English (that works) would be great. Anyone know where I can find one?
Thanks
I know there is already an accepted answer, but I thought I would add a link for people reading this question.
The new version of the echarts documentation (echarts 3.4.0 as of writing this) has been converted into english.
They have all the documentation including options, the api code, downloads, and many examples all in english (with a codepen type development area that you can test out your options and see the results in real time).
The entry page can be found here:
https://ecomfe.github.io/echarts-doc/public/en/
The library can be downloaded here:
https://ecomfe.github.io/echarts-doc/public/en/download.html
The getting started tutorial can be found here:
ecomfe.github.io/echarts-doc/public/en/tutorial.html
The multitude of options can be found here:
ecomfe.github.io/echarts-doc/public/en/option.html
A plethora of examples can be found here:
ecomfe.github.io/echarts-examples/public/index.html
An simple bar chart example and their codepen playground can be found here:
ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align
Below I have pasted their simple bar chart into the window for your viewing pleasure:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 250px;"></div>
<script type="text/javascript">
var chart = document.getElementById("container");
var myChart = echarts.init(chart);
var option = {
title: {
text: "Echarts Bar Chart"
},
legend: [
{
data: ["Hours Worked"]
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name:'Hours Worked',
type:'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option, true);
</script>
</body>
</html>
Here is an example that simply works. Just save it into an HTML file and render it into your browser. No need to download or configure anything else. It uses a remote script file, and no Chinese text:
<!doctype html>
<html>
<head>
<title>ECharts Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts-en.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 350px;"></div>
<script>
var chart = document.getElementById('chart');
var myChart = echarts.init(chart);
var option = {
title: { text: 'ECharts Sample' },
tooltip: { },
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]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
There is an example in their github that clearly explain the way of using the chart
i just test it, it's working very well
echart Example on github
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts-all.js-->
<!--Step:2 引入echarts-all.js-->
<script src="js/echarts-all.js"></script>
<script type="text/javascript">
// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
// --- 地图 ---
var myChart2 = echarts.init(document.getElementById('mainMap'));
myChart2.setOption({
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'广东',selected:true}
]
}
]
});
</script>
</body>
</html>
Just incase devs are still looking for the english version of echarts, the cdn link below has links to the english version:
https://cdnjs.com/libraries/echarts
Works fine for me.
ECharts does offer an English version of their site, including examples and documentation, which I am guessing you did not see based on your question.
https://ecomfe.github.io/echarts/index-en.html
(At the time of this edit, they need to update their english docs to the 3.0 version of echarts).
https://ecomfe.github.io/echarts/doc/example-en.html
That being said, there are still times when you wish the entire .js and its default strings were in English, but Google Translate can help there.
If anyone is wondering. Someone did translate their entire .js to english, so that the buttons and controls appear in English. This guy also requested them to merge his 'English' version to master on github, but I guess they aren't interested yet.
I have tested his js file and it is in English. The link to the zip file is also included there. But just in case it can be found here - Download
https://github.com/ecomfe/echarts/issues/2321
The data is displayed in Chinese,Code structure and framework in English.Ignore the specific data,try to put some data what you want to show.
demon in english:
http://echarts.baidu.com/echarts2/doc/example-en.html
If someone is using echarts-for-react, here is how I solved it
toolbox: {
show: true,
orient: 'vertical',
feature: {
dataView: { show: true, title: 'Data View', readOnly: false },
restore: { show: true, title: 'Reset' },
saveAsImage: { show: true, title: "Download" }
},
}
the magic lies in the toolbox.feature.title