I'm trying to graph some Network data in Realtime using Zingchart. I'm using websockets to send data from a twisted pyton server to Zingchart.
Is there any way to identify which serie to update? For instance if a have this serie:
'series': [
{
'text': 'Serie 1',
'values': []
},
{
'text': 'Series 2',
'values': []
}
]
use "text" or another id to identify the serie to update with the data sent via websockets? Also is it possible to create series dynamically from the websocket?
Well, It might not be a right solution for you.
you can just write code below;
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
The point is you can set right order of the plotindex attribute;
I modified script source from the site below, see how it works.
Here is a complete source;
<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>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
<script>
var myConfig = {
gui: {
contextMenu: {
position: 'right',
docked: true,
alpha: 0.9,
item: {
textAlpha: 1
},
button: {
visible: true
}
}
},
graphset: [{
type: 'line',
borderColor: "#cccccc",
borderWidth: 1,
borderRadius: 2,
plot: {
aspect: 'spline'
},
plotarea: {
margin: 'dynamic'
},
utc: true,
timezone: 9,
title: {
text: 'Uniform Step Time Series Line Chart',
adjustLayout: true,
align: 'left',
marginLeft: '15%'
},
legend: {
draggable: true,
backgroundColor: 'transparent',
header: {
text: "Facility N",
backgroundColor: '#f0f0f0'
},
marker: {
visible: false
},
//item: {
// margin: '5 17 2 0',
// padding: '3 3 3 3',
// fontColor: '#fff',
// cursor: 'hand'
//},
verticalAlign: 'middle',
borderWidth: 0
},
scaleX: {
//minValue: 1484870400000, //set minValue timestamp
//minValue: 1512018819470,
//step: 'day', //set step for scale
step: '30minute',
//step: 'minute',
maxItems: 7,
itemsOverlap: true,
zooming: true,
transform: {
type: 'date',
all: "%d %M %Y<br>%g:%i:%s"
}
},
preview: {
adjustLayout: true,
live: true
},
scaleY: {
step: 50,
label: {
text: 'Sensor'
},
guide: {
lineStyle: 'solid'
}
},
crosshairX: {
lineColor: '#555',
plotLabel: {
backgroundColor: '#fff',
multiple: true,
borderWidth: 2,
borderRadius: 2,
},
marker: {
size: 5,
borderWidth: 1,
borderColor: '#fff'
}
},
tooltip: {
visible: false
},
series: [{
values: [],
text: 'Sensor FC-456',
legendItem: {
backgroundColor: '#29A2CC',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor AB-265',
legendItem: {
backgroundColor: '#D31E1E',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor DC-445',
legendItem: {
backgroundColor: '#7CA82B',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor ER-985',
legendItem: {
backgroundColor: '#EF8535',
borderRadius: 2
}
}]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
//Set up of a websocket
var ws = new WebSocket('ws://65.50.232.201:8888/', 'zingchart');
//var ws = new WebSocket('ws://localhost:8080/examples/websocket/chartProgrammatic');
//var ws = new WebSocket('ws://192.9.112.69:8080/examples/websocket/sychart');
//Tell our internal server what to send.
ws.onopen = function(){
//console.log("########send##########");
ws.send('zingchart.feed');
ws.send('zingchart.push');
ws.send('zingchart.getdata');
}
//Setup an event to call a ZingChart API Method to update our chart.
ws.onmessage = function (e) {
console.log("===== \n " + JSON.stringify(e.data));
console.log("===== \n ");
//var data = JSON.parse(e.data);
var data = JSON.parse(e.data);
var newValue = data['plot0'][1];
var time = data['plot0'][0];
//console.log("====> " + time);
//console.log("====> " + newValue);
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 2,
values : [[time,newValue+150]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 3,
values : [[time,newValue+200]]
});
};
ws.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
</script>
</body>
</html>
The output is as follows;
I hope it will help you.
Related
I have a react web application using echarts-for-react. I've set values that accurately reflect my UI requirements but the problem started when I made it responsive. The position, offset and distance for label are fixed numeric values and not percentage. So when I resize the screen and therefore chart also. The label position gets changed. Is there any way to fix it so that on changing the size, the position of label is changed properly without getting misplaced ???
`
import ReactEcharts from "echarts-for-react"
var builderJson = {
"all": 100,
"total": 1000,
"charts": {
"A": 10,
"B": 20,
"C": 30
},
};
const options = {
grid: {
containLabel: true,
height: '60%'
},
xAxis: {
show : false,
type: 'value'
},
yAxis: {
data: Object.keys(builderJson.charts),
type: 'category',
axisLabel: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false,
}
},
series: [
{
color: 'blue',
type: 'bar',
barCategoryGap: '10%',
barWidth: '40%',
stack: 'total',
groupPadding: 3,
label: {
color: 'black',
position: [0, -16],
formatter: function(param) { return param.name },
show: true
},
itemStyle: {
borderRadius: [0, 2, 2, 0],
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
barWidth: '40%',
stack: 'total',
barCategoryGap: '10%',
color: 'whitesmoke',
groupPadding: 3,
label: {
show: true,
distance: 15,
position: 'insideBottomRight',
offset: [-50, 0],
color: 'grey',
formatter: function(params) { return builderJson.all - params.value + '%' }
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'total',
barWidth: '40%',
barCategoryGap: '10%',
color: 'whitesmoke',
groupPadding: 3,
label: {
show: true,
position: 'insideBottomRight',
offset: [20,-10],
formatter: function(params) { return builderJson.total }
},
data: Object.keys(builderJson.charts).map(function (key) {
return 0;
})
}
]
}
function App() {
return (
<ReactEcharts
option={options}
style={{
width: "100%", height: "100vw"
}}
></ReactEcharts>
)
}
export default App
`
Gives following output in certain height and width scaling :-
But when the height changes, the label get placed in wrong part :-
Any help on how to fix this??
I want to make the header part of the pdf file as in the figure, but the logo image is too small. When you want to increase its width, the picture disappears. can you help me.
http://live.datatables.net/jatobaqi/227/edit there is my code
enter image description here there is result
$(document).ready( function () {
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
className: 'pdf-buton',
customize: function ( doc ) {
var now = new Date();
var jsDate = now.getDate()+'/'+(now.getMonth()+1)+'/'+now.getFullYear();
doc['header']=(function() {
return {
columns: [
{
alignment: 'left',
italics: false,
bold: true,
text: ['RAPOR'],
fontSize: 25,
margin: [27,0,0,0]
},
{
image: 'image'
width: 30
}
],
margin: 10
};
});
doc['footer']=(function(page,pages) {
return {
columns: [
{
alignment: 'left',
text: ['www.---------.com']
},
{
alignment: 'right',
text: ['Sayfa ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: 20
};
});
doc.content.splice( 0, 1, {
margin: [ 0, 0, 0, 5 ],
alignment: 'left',
text: 'Firma/Şahıs:' + ' firma ',
fontSize: 12,
},{
margin: [ 0, 0, 0, 5 ],
alignment: 'left',
text: ['Tarih: ', { text: jsDate.toString() }],
fontSize: 12,
},
);
console.log(doc.content)
}
},
]
});
} );
You have to adjust marigns. It will work like that:
doc['header']=(function() {
return {
columns: [
{
alignment: 'left',
italics: false,
bold: true,
text: ['RAPOR'],
fontSize: 25,
marginTop: 10,
marginLeft: 30,
width:500
},
{
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOcAAACMCAYAAACHx765AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH5gICCx8NY75UFgAAHQNJREFUeNrtnX14VNW18H/rzCQkCIooioJSET9a1LZCJogfzCSoRVvIxGJ7q621rVat2tZ+2nrVvr621n54q2216rW2vq1ekUyiLeoFMkPVaiZQWyqFIoKACIKiCISQmTnr/WOfkEkykxATipX1e548T+acfdbZX+vsr7XXBsMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMMwDMN4NyJ7OwJ7k0g8GQKOBsoK3VdlZXN9bFv+tZPOepKy/UqPAA7Mu7winYi1BDJHAocUfqNsTieir3SJwyjgoIKhVTY11UfXd4RNDQE9ir6VWw54m6z3avqxKbniwZRIPHVQEPeS3ZTdAroynajyASprkmEVPlAsHoosb05EM+0XKuLJQQLHFQmfAX0xnajK9iGt7ynCezsCe5khwP8AHypyPwak8i+U7TdoDOgfgBPyLk8CmoL/vwRcV0TePcClXa59B7iiSPgfAt/O+10JzAFK+5DGDLCBsD8rUtv4nXRd1c6uASZcupDQplQcuB44niIfqwI8C1QDO4LfBwF/KxJ2c5Bn6/Ouje0h/GqgAtjUh7S+p9jXlVOB7cBWoByXHz7QEtzr9NWO1MwvB70ZV8nyw+W3SG2BvBI6KnkrriVoLRCH1mLhVbSrImWBbTjlHJJ3bQc9Mwq4GmUB8GjXm6FNW8cBPwOOCGRt7UGWAIMBr0h+bu0SJhfk07Ygz/LxewmvfSzP9xT7unJuBy7GKeZdwCnAKuBzwFsgL7UHjNQ2eiifBz4RXJoF3AL4gq7Ik3kP0ADMAP5PcO1WYDbwRoE4/BT4DcgM0E7hFTbmBxT8RYpEgUOBucHlFPC1XtI5CzgW5FQKKCcwGafABLKe6UHWEOB3wPu63hDxNyveabgW9Dc4ZV+C6y1sFbRT+lX1ZRFpD/9bYHQQ/hLgbfDeegdl+p5hn1bOdCKWA16MRpPSciDtY8udKrKkuS66qyLNnPkwa3JSoU7ZwsBSFa5troutKiBzA7AhUtM4AQmGhsq6dH1scZE4rAPWRWpSE/JGkuvSie7hmxJV24C/T4wnN+c1W1sKhc0nEk+2t6wjiwQZTdASqvByc11xeZHzkgfgs7PQvecS1VlgcWU8NVLRtuByiwgvNNXFtncNv7C+aiewuCKePFTYJbMFjyXp2d3D72t4/Rfx3md15pADVbkLNwm0Hbi2+aQFq/opdm9QbKy6uxNAxr8QU85eOOyYNYD+EDdp5CPcCfIHbrxxb0ftnbBPz87/u7FPd2t3hyNOeOkC3BgUoElU/2+T6w7/O5Lpr4ByaXt7pz/oDKAEjzYpKTjJZQwAppw9EKlJHQt6OxAC3kK4oqmuasvejldfGDthqcCG9nLe2C9hwIJHztaBkGP0jilnESbFU0N89DfAcNz0/nfTdbG/7u147S6ReFJAj4UNPwU+ALShzN/b8TJ2H1POwoR89HtAJPj9WEmu5Fd7O1K7QzSapGUYw4DLQb4FHIDrzt4TKhn0xN6On7H7mHIWQFRrgMtxE2avAJc/8+hp7/pxZiSeKmlBY8D3gZNxE0CvAjeEwoPue3bWZL9fL8hjwqULCW3ctp+v0rKwYco+bSywpzDl7M5IXOUuB3zQK9KJqg17O1I9MXF6o4jnjQX9JvDpIO7bgIcFubk8rCtTsyYP2PsitY3lbNpWg+iZnvhX4CyajAHGlLM7Q3AmeAA5kHf7BNB+XkguAb2WzlY7CYTLmuqi/Z6hbeeU6UkvG2I8yvWgM4CF2PLMHsPWObuzFfgJzmKlBPj5pHjj/ns7Uj0wBfgFTjFfA14Orp8LOn6gXhKJNx6YC/E1gSeBj2OGC3scU84CiLMdbcAZXp/oIzdEo8m9Ha1iBN1vEsC5Cp8H3gKGo/L9yIz5u7vDpCAV8WQoEk9VgSSAH+Dsegds7GoUx5SzMG2g38ZNBgFc1nKgVO/tSBVhHXCxoBemE7FFgi7AGZ0rcDaefHLSjMZ3JHjSpGcRuAK0DtdCrwWuBdbs7UTvC5hyFiGdqFoVKGgWGAz600ht40H9lbsHaEonor9vSlS1BPHOqXIrsBzwQG72PTnsnQg+4oi14MwWy3C7Rs7G424obPhuDCymnD2gvj4MPBL8PAGVG8ZNm/NumwDRrnMyzfWxV3E7aNqAw3Gzz31m/dBtAEsUPuEhl6YTseXs43ss/5WYcvZAc0N1VoSvAhtweXXx8LLyaXs7XrtDLpSZBTwe/LygMp6c2lcZTx+5BkTvaP7ggobnElFrLf/FmHL2QlvO3wBciWsxhgC3ROLJQ/ondc+z6JGzMoJ8Gzc5VKJwW2VtamifhNx4I+m6qsy/6Q6cf3tMOXvh+YZqQBtwM7jgXJTcOHnGU+/6vAvnwstwfogUGK+q36g8b8Hejpaxm7zrK9i7gXSiKqsi38StIQpwUdbLfqxy2pw99coBGdc98+hphMW/DVgcxPtq9fXDBYIOdJe1X/EXVRvXso9bCEVqk4LKAS1QAtq+qC7AgZF4arugW5oSsQyAf/CQ9aGN276O6IM4Z1Q3a1n5PyPx1OvAtnQi2tmETaTDzYYwJBJPHdxjZHSXwy4F3i4Y33iyBGR/RYfnXS4NZGdDvmx5touda1a9MuBGoA44APTWSE3qQoQ2X9mysD7q4zziaZD2/XuMq+r+uC10xYOI5tBdCh9WlYMi8VR58aTr8DyZO3z8AbNq+ndmn1ZOlKGBm8uTcIv5AAcqPAWqCucATwMsunsikXjjYyC/xS30jwcWgeZwTrHuyRctyl9VaMUtQ9wMemOPcZFdFjebQf5RJNBk0NkCg/IuTgNdCSzxQ5xFd895D+Mcl7VTjegKYIWInAVsEliozgXlIaLcF6SpWJ4B7NdLWragLMVtVfsw6As9B9/lfU+Bpua6qaacWLdWcEo5OPg/h7N+KQcGq3ZuIdKJqjbcEsXSIOwgYLAU+MjlPH8lzjvf67hWYXAvfyHcJubbSnLhJUXiG8IpRnnw/hwdFbtcpWBvsCy473dJX3mgFGRHDP0HzmftS8H9MnqOq+bJ6vbS9OxYBuGHwN9xyzm9pb0c5w4zpcid/+pK8G5ln245RdmuwleAIraz3b/4Y8Kb1qzOjjgfGNNTuIV11dmKmsabRGQWzkVkb3mdQVnb2tK2LP2/scJjLtHFKOdR2Nh8q+YK+q+9ls7e6dvZLvhbABbdPVGBX1XEGxOCHB3kx+7UjTdVCrs+SdfFmiPxxmqQD9DhY7d4ScBbqP/35vrYVgzDMAzDMAzDMAzDMAzDMAzDMAzDMAzDMAzDMN7zDIjLjYp440gPSt5obV274vFz9naaDOM9Qb8N36PRJIL8QJG7DiwrLe2vPMMwHP1WzlQqBnAb8L03W9va+inOMIwAicSTE4J/2zJhb8nzs84o6DA4Uts4EpVRLiivpOtir0VqUiFEj6NjL2QbwrJ0XSwTiSeHA0cF1zemE7G1heTOnPkwq7MjPtAuQzxvcdPsKZ12OkyqbQz7KscBZQir0nWxzfn3K2pTIqpjgWEFU6myTeHl5nrnpKoinhSBY+nYLZEVdHlToqrbro5IPHk8HfsXcwLLmhKx1op441BBjs0L+vr28KbVS2adT2VtskSVk4CsiCxtqosW/Gi5Tc3avrsll5PQ3xfVnZEDqIwnyxSOo2N3yKvpRGx9JJ4cj9vSVYxt4uVebJo9tWA5njJzvuSy3tG408e65xS05HxdubChqs3lVePhQm+uNfUFX702T3QcHTt8cqosb66PtQT5eARwCPBaOhF7paK28QBP5X3aefdLVtDVTYmqtwAiNcmhCOMo3IhkVeQ1/+AhGxbdPbHbzcp4CkXHAQegbEzXd69/E+PJoQJHSuH83CCwTWFc8PutklzJS888elp7vTgJ5/U+5/m6JFcSQnL+WDrvwFHgdfX9tc0N1VpRkxQR3o+r61lB/9mUqGoFOHX605IJZcaTt1c3jPPQNgi0pTTrTweau8by1OlPS0YztwPTgJ0oNwC/ENGhCj8HAgVnpbgNyuuBKtwxAYOBv5wyY8HUZxumdNtetDp7yNHBhueDgVYl98Hg+V34yJHAo8Ah7pwObuskxPc9RP4TmIHb89hK/j5D0Z0Cv4/UJr+brovlBA2D/Ag4Iyj4dYrUAP8sUEi34TYre8AGVc4BVghyElCPK9g24LfZttJrcLu0L8ft+1yvqlNxjp8LoGcDPwsK5LUSyX4IdwARiowCfRAYjfOdezPumIi7gBOD+HT9mJQAi/yczMDtj+xGLichnGeEcwvllUKb58nj46bN+eKKx89RQS4Avg2U4tyZ5G/E9oAyFT4s6MvATcDZgdyNItQCiyviqcNBHwGOBn45YfqCW0T9huDjk694OUWWROKpz6QT0fUqnCBus/gw3DGG+fUnJ6qvhTZtvRDotv81UPoHgBMQHgM+lX+/8rzGQepzf1C2+ft2JSiPn/nwp+D9YaB+J22fpcPb/e9wR2BsVJEzJOdfhDuZrrRzNNgmnndl5bQ5T6jbUH8XbnN/TpEv4Dz1s5O2sIfcA7w/iMNOD+RMnDKMVPRLlQX8smZCmQhOMYcIXA/yUJCOrSCX4HzUrEDlQlV9PYjVXOBLOOWclBP/I0Uq6OeDRLaCnOMjm7oHYTzuS78BmDKpJtn5nA5VH+Q/xbni2CYwE6Sq44//BqarSlmQ+1ngy0AjsFngk3ScMdKVK4Ak0AIyXZ3XcxT+CnwhqDA/APlRuLRNIzXJiqCS3gNSI+oXPwVamANcDQxC+Zp42qFQomuDeztwTrp+G9y4GEgDGzunUarcOynvyYOP5kI5kO/gPnZvgnTNqx8BFw0fNOjI4JH7cX5vQ8CVXcJeDHgK4qG54DzQPwKvo9QAyytmpAYJehMwEuTjwC9DIZ0ITAb5YgF5JwoaBRCRvyH8h1MO+XWX9J6Pa6UmFEyncDDOIfZyoDJS2/m8G/VlNHA6yK+6yP0I8CJOyZ4DvuKqDHNDmdZdvRFF5uEU9RJE23B1qKGLrGpgJXCZlpWFBDKBvjTjDmW+srJ2QTlAKNOaBfk00ASsBznTU3SpUwx84KNaVv7B/ESMn/mwBJVkcBCtNelE9A2ApkQ0N/hNXYlzjdFCTlakE1UZgOZEbAvKqkBMGOGaivPmdVKqitrkGDq+aBnQpQtnx7IF8npKkMjfAyf50nnzcHNDtaYT0bU4rwNtIvrPdCK6pP3PJZahEnylmxJVurl1x8s4t5FtIfFfTCdiBZ1cqcgqV4nJpBPRZc31LlxzIrYdYQWQE+SVdCL66uDMocMR7gVe8NW/MZ2I/rOpvrqoy410XexNxE8AOxBGPjur2s+71xZUkEHAH9KJ2CaAdCK6AudjaGd+GoN0vkYvNDdM0XQiukbgDWCnqC7vImMt4CHeCPe+2CZ1x1L4wKr8sIKuCK7TlKjSdCK6GtgMtMnOHcvGhDe1iqcX4Q4++o5KbkE6EdsAjHD6w0v58tQpRVbdMYyk66ItCMuDd7zWKZ6qy3At+bBC6RTV012d4ifACFS6HOokJbj68Grn9PtLge1BGW9T9GHcx/mTlA0aDBCpTQ0XdCbw6+3hTY0ggms8NhUok7eBQ0VEmhIx9T15KdAXBU5R9asAmh4/R/PKtlXRpfldikW4FuXy6GeTu1rP/bIjPoRrNVPB/b7iA08Ak0RDnc4bEZ8LgYOAPxd7uDKe3A93wvRCVOa7gtWj6Dv+nnTVXjltjifi/xjnIeGShfXV23fnuXRd9Y4g/YWcPkeBFSr6yu7IQqUOuEZEB8CbnvY6Wai+txakBl8KdttXZ0dMxHWhH/KQR5rrqhVAe5uIlD4t8RXzdxQDXhSVeThlm7g7wjzXCn4DuA+gOVHVivJTYJISirqE69VAKcL3l8w6v93lfk9pKpSedTi3MFdWnFf4sKn8wfgrwJ+AT7dskduBJU65U1fglPIe4PQ+ZFp+3GaDjkP5cuX0eXObHp2ai8SThwMXAX/AtWAFFc5XDhXh/QK/UHQZsAnkDFzz3ysVtY3Ho8wElioDUWkLo2Xln8X1Aq7auvGAf/Tx8XnA1ypmJMubG2I7ACprG8tVORVIi/pv9/RwRTx5qsDQdCL6BMW75wNGJJ4cBVSDPpJOxOYXCuOXlB0kbry+EfjeQHqMP/nj8waRk/8APQRYViRYDHhcPd5CeR7X+7qj47ZuBraDfjUST67yRecvrKvS5+qqc7hhwy5yknkqRMlc0G9E4o0v4YY6t6TrYsWHLL0hvIHqvSC3Ss47DVcHOtF5MC5yDxACvXTmzIepjKc+gJtkuR/01X7k59u4iaPTNeRNCa59AhgVZFjRJRgRTgJU4e+eK+glwKmR2mSP50NWxBsHR+LJb4nKM4CHyhXqe3tkqUfRE3HH4z0qyP1Lnzm5bwKEecCBIh3jJ1U5EjhGhXnpxNRCo8hwZU3jyMqaxpECF6F8cU+krVMs4aDKmsaRKKfgnJcVO7c0LCG5DjhR4JrStnB/6s4uTjrrSSriyZPDudBc0BtRuSGU87p5yY7UJEcDY4EFmZDXhuuZnFQZT+0aDkkutxG4FDdzOsdTuTdS21jQJeiixFk5hR8DHwT5HbDZU++uAcjSR4A1CFdW1swf1PWu1/mHvgj8D3D+y7kRxyt8MQhzJ/08k9FXfg+8BvLloNW8BHhC1F9Y7JmjPvcQuC/galVd9Vx9DFz//2RUilUMz1eJCfIMbobz+77KtFxOVzY3TGEP8WXcAP+GdcuP7rNbRz/rLQVeRzgj7/KHAR+VxUUeO0ZFVqvIauBzeypheQwG6lVkNcKD9LycM4agfDNeeerpP77DDldn9i/br/TH4hRtqEIE5c5nH53SfaglRAFf1Xv6+VlngBuSjVQ4vj1I06NT0TBP4umHEG4HPoXKC5F48jOR8xeEu4tkIW7CcQJw3aHhNwrOhvcN3aCuR3qWilfZ9W4n5Wyqi/mq/AoYJMrNwEzggZzH6v5Go62lbTPwK5yy/QAYg8odTfXVRVuzEW+OHAJUABkRuSAST34B58nusGANqxCjcQleieuqHx1W1UWPxfqfl8V5CNc1/9Zhx67os0fDUNjPAguAqZH4PKmcMU+Cmb5leKwt8tgqUa0Q1Yrg/XuaHcDFolqBWyrqqZu6ITjT88ywv+OUgTlrRb+F68U9BhwuMDjdEC0WOAq8JeLHgzpzCiCgncadzbNipGdXbUnXxb4uymm4Cal7yfizKuKNo/LDphMxUHXdXdXnGh6p7XeK0okqROUh3Pjzqkg81cnCrtsgVoV/4NbvaoFSgbsXzY71+yTjxf97tqpbG9oMfAZoVM9/ruen/ENwjon3C575DO7LtVNgyuT4k4Ue2gL66VB450zcksanfI/ohI/t0ZOpnwduxY05p5/88bl9eripLuYD84ETUG8k4g0LKtJTzbOLjtVam+qrFjfVVy0G7kf4f3sygbie04qm+qrFCHNxyyvF3Fhm1PVa1gG3RP42ZSDONX0M9SpR/WIg96aKmmS31vvkj/zJw61fb6ejznwMt348ZXLt/IKTTU31sUXq+dXAV4Epgnx3D+cnAOn66DrcYcfTQDuNh7op58JELItbKF0L/M4XWT5QEfGzvIpbc9wA/Ly5rqq15ydkIu4L/Yl0InZG+x9u8HxajpJCrdQWT3j22Vkf8VF5EOex/eZQmOHsBpXT5sipH13gnTr96T6mTu4AnhK4vSQb6vNhteJazv0QqVCRI4Cj1F3rlXQiNi+diM0++Zz5cto5T3nR6B79EJFOxFanE7E7Nrfu2H7quU95U6pT3cKo6qvAd4APAldNqpkX6ttbuuXQc+n6KZvT9VWbge8CURE+Ef1s57SGy7PH4HpPV3WpM7cDJ+TUOxgg+tkkp330Ka/ygud2KWvz7Oo2Ef4b+CvI6D2aiZ3T9gDO4/5V5BkxFJz+9T3vL8BURG9srovmdu8FvbPosZiK6H8BMfXosQZNPH+BEBx1LiIru9xeAEz0RXo8FiBdH21R+B7OyOGyyo8ne18eKCs/MVPi35MJZYb1JW3pRLRV3NizXEV+XHFeY5+6t4pswC2YnwFMBjZ7WnQmsiDhUu9jbYOyN28/wB/Ul+feKcPLykZlSrO/b9nfP7zQfRGexBkxXK2ETh2wj4YyH3eo8bU73uZ9Xd46GUC1W6/sKeCwdnO8li0yuq0kez8tO8b3+r49TDoxZTVuDX86eePigpV14ewp2XQitjxdV/XmQEekqa5qazoRW9Y8O9bjzKlk/Pb1zWe626ZqE7C/5CWkGC3hTQtxY91r/Bzjd+MArBE4E7Sy3gJ2S1si9gLObG+m+DKzTw+L7MC18lOBM4ElIc/v2yyns0M9nV4OGtodFOl16UNgKHCuSuGzU5rqYhl1s7qrVbilZRgHuee050kzpcceVbo+1oazmipV5esTZyzIn7mfAvxNRLZ0EboSZ3hREVwYApwDWqTL3aeDznx6tgFo7fncNEHR+4AtOJtvd7UinrxN4ALgTYX7crm2H//l0bM7tZYVtcnJolwFnA80ALenE7FUJN5YDnIFzkyvFDcR81/pRGxLpDZ5MspXcLL/CHJnOhF9vGu0KmqTXxLlc0Gk7vNC/vW5nHewuMOBLgaeVuGbzXWx5wEqZqTKxdPrca3Un0Ae8EUfFPiMKFfg7DXvB36STsTWnHxeqjTs6/dxB+D+FeHXCvcKXIZyGW455wEVyQCI6hhcBf9QOhHbEIknr8bNPI4BfgZ6RzpRtTFyXmocvl4X5MmfFe7Obc0+HD4gXIrPHJyN5P0Id6brYrtlRBCJJ+O42fKdwPXpROy2AmG+EcRnuIrc36mIVScAJer7ZzU3VBecTZxY0xgSkYvErdUdDfKQCts7ZHAMaEQ9/5jm2dXbIvHkWbju1tnALBVZn/e+4cCFvuh4fF4Skc+Lsy8dC9yLclu6PrYuEk+eCzwIzHdr3v5CkL8AD6vI63nyDgDOww1j5kbiybE487nLQf6swr3NddEHgnw4Hbc8dxTwkAq/BGrElekmhOvSdbEGgMk180JZCV0CXAe8gcj9KCnQucB8FemYdFMNC8RxVllf2lVP48kZ4ur5mcDdgQ4scfdSg8Wd4TpYRZ7tUibTgUZVudzzCKlyDegXgGEgdwj8oikR3RyNJmk5kJ/gxryLFSJhcc18k9NfjvK90m4DZlEdBjIEmIM7Lm84gIiEVBlDh+HxGJHAsEHZH2fSNMeJ1oJrSKIcCbwa/I1VJSxKOcIRBAuzogzNe8ADDnUFDaCHia8iIqNw5muvAYcTtHySy3lugoW5QbxGCyogR+AW7F8GxkrnT9t82PX1PjIv3DhRKQ3ypFydddP8IO9Gvl2SYcXsM9si8eSVuAmicaq73wIr/FmcUUZ7HApxFIGBvqge1+XeNuAfFLeaQUI+4odG4Uwa14OO7nL+0Sbg/ObZ1dvcA3IQLm+eBPYXdwRgPk8C20VExI311gV/oxGXdlWeEOEW4BTQw30vs9zLlX4BYXqXNGSAm/D1GZcfOliQUcAToIjSMZZXhiGsAdYAhwkMRTma9o0byq7Tx9UPCSEOxU3cgeqRIC15acqPgwKzUL29U765HTU7ceVzuKjs2n3ijxjSEtq09WvA5aJ6DB09UsXV4Vub66MaiSclqE/BBgsdS2AIlErFiNQk7wrq/Qb6uXRpGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZh7HP8fwEyws+YMBpyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTAyLTAyVDE2OjMxOjEzLTA1OjAwhte2WAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0wMi0wMlQxNjozMToxMy0wNTowMPeKDuQAAAAASUVORK5CYII=',
width: 62,
marginTop: 2,
}
],
};
});
For some reason, the data label isn't being displayed on my line graph by ApexChart.
Seems like the chart's JS is relatively simple:
var options = {
chart: {
height: 380,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false
},
dropShadow: {
enabled: true,
top: 10,
left: 0,
bottom: 0,
right: 0,
blur: 2,
color: '#45404a2e',
opacity: 0.35
},
},
colors: ['#1ecab8', '#56b9db', '#ffb66e', '#eb3131', '#373d3f'],
dataLabels: {
enabled: true,
},
stroke: {
width: [3, 3, 3, 3, 3],
curve: 'smooth'
},
series: [{
name: "Informational",
data: [5,10,15,20]
},
{
name: "Low",
data: [2,3,4,5]
},
{
name: "Medium",
data: [9,0,2,3]
},
{
name: "High",
data: [1,2,3,4]
},
{
name: "Critical",
data: [0,0,0,10]
}
],
title: {
text: 'Reported Findings',
align: 'left',
style: {
fontSize: "14px",
color: '#ffffff'
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.2
},
borderColor: '#f1f3fa'
},
markers: {
style: 'inverted',
size: 6
},
xaxis: {
categories: <%= raw #series_months %>,
axisBorder: {
show: true,
color: '#bec7e0',
},
axisTicks: {
show: true,
color: '#bec7e0',
},
},
yaxis: {
min: 0,
max: 50
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: 5
},
responsive: [{
breakpoint: 600,
options: {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
}
}]
}
var chart = new ApexCharts(
document.querySelector("#<%= #chart_id %>"),
options
);
chart.render();
What am I missing that is causing this to not display correctly? It doesn't make sense because if I change one of the first arrays from a 9 to a 10, then it shows up just fine:
Fixed this by updating the apexchart version from 3.15.6 to 3.19.3
I'm making a multiple panel chart, and I'm trying to hide the y-axis on the hide event of the axis serie.
I tried setting the axis height and redrawing it (didn't work), set extremes, nothing worked. I also tryed this solution but didn't work, I beleave it didn't work beacause I'm using highstock and the "solution" use Highcharts, does that make sense?
I also have to resize the others y-axis when one is hidden, but this is another problem. But if someone has a tip on how to do it automatically would be thankful
Here is my JSFiddle code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
events: {
hide: function (event) {
console.log(this.yAxis)
//Hide
},
show: function (event) {
console.log(this.yAxis)
//Display
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "aaa"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});
I worked more on solution and I found A way to hide the y-axis, by changing its height to 0% on the series hide event. I'm also increasing the axis height back to 25% in the series show event.
plotOptions: {
series: {
events: {
hide: function (event) {
this.yAxis.update({
height: '0%'
});
},
show: function (event) {
this.yAxis.update({
height: '25%'
});
}
}
}
},
Full code
Edit:
I found a way to resize the others y-axis when one of them is hidden or one the axis is displayed.
You can check the full code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [150,1], [150,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: true,
radius : 2
},
events: {
hide: function (event) {
var serieYAxis = this.yAxis;
serieYAxis.visivel = false;
serieYAxis.update({
height: '0%',
title: {
style: {"display":"none"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
},
show: function (event) {
this.yAxis.visivel = true;
this.yAxis.update({
title: {
style: {"display":"initial"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y0"
}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y1"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y2"
}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y3"
}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});
What I Need:
When user clicks on a reload button, then data should be reloded.
Example: http://docs.sencha.com/extjs/4.1.3/#!/example/charts/Pie.html.
The example has helped but I cannot reload data in pie chart. Here is my code:
Ext.onReady(function () {
store.loadData(generateData());
var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
Ext.Msg.alert("click");
store.loadData(generateData());
}
},
{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
},
{
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'temperature',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('date');
});
this.setTitle(storeItem.get('temperature') + ': ' + storeItem.get('date') );
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'temperature',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});
I've also used a sencha example url: http://try.sencha.com/extjs/4.0.7/examples/charts/pie/viewer.html but it's not working.
I have to reload the data in charts. My data is loaded into the chart, but it is not able to be reloaded.
example-data.js code :
Ext.onReady(function() {
window.generateData = function(){
var data = [];
data.push(
{ temperature: 86, date: new Date(2014, 1, 4, 8) },
{ temperature: 20, date: new Date(2014, 1, 5, 7) },
{ temperature: 75, date: new Date(2014, 1, 1, 11) },
{ temperature: 10, date: new Date(2014, 1, 1, 7) },
{ temperature: 46, date: new Date(2014, 1, 1, 12) }
);
return data;
};
window.store = Ext.create('Ext.data.JsonStore', {
fields: ['temperature', 'date'],
data: generateData()
});
window.loadTask = new Ext.util.DelayedTask();
});
var chartId = Ext.getStore('myStore');
ChartId.refresh();
try once