I came across this issue when I wanted to center a Apexchart on my site.
I first tried flexbox with gave me an error as soon as I stated something like
flex-direction: row;
Error:
apexcharts attribute height: A negative value is not valid
When searching for this error I got the hint, that it could be about how I include the different files, but I can't find the correct way of doing this.
This is what my files look right now.
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script data-main="/script.js" src="/require.js"></script>
<div class="piecontainer">
<div class="piewrapper">
<div class="piebox">
<div id="piecharttotal"></div>
</div>
</div>
</div>
script.js:
async function getSources(mode) {
let url = 'http://192.168.2.131:81/sources/?mode=' +mode ;
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
async function renderSources(mode, objectid) {
datasets = await getSources(mode);
var jsonset2 = [];
var jsoncat2 = [];
datasets.forEach(datas => {
jsonset2.push(datas[1]);
jsoncat2.push(datas[0]);
});
var optionspie = {
labels: jsoncat2,
chart: {
type: 'donut',
width: '30%',
stacked : false,
},
colors: ["#45CB85","#FB5607","#35A7FF","#FF1AFF","#FFAF54"],
series: jsonset2,
chartOptions: {
labels: jsoncat2
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
show: true,
},
value: {
show:true
},
total: {
show: true,
label: "Total"
}
}
}
}
}
}
var chart = new ApexCharts(document.querySelector(objectid), optionspie);
chart.render();
}
renderSources("total","#piecharttotal");
Nothing else I included. When I change the id-tag of #piecharttotal and put some text in the div, the text is perfectly in the middle, however if I dont, the chart is just on the left site (presumably without any styles)
Edit:
styles.css:
.piecontainer{
width: 100%;
height: 800px;
text-align: center;
background-color: #009879;
}
.piewrapper{
position: relative;
top:50%;
transform: translateY(-50%);
background-color: #82D173;
}
Related
Currently I am trying to create a chart for the first time using javascript.
I want to show the data on the screen by using the fill chart json method in the mainpage page.
When I check the url in json format, output looks like below.
[
{
"CV_STATU":"Reddedildi",
"MyCount":366
},
{
"CV_STATU":null,
"MyCount":23
},
{
"CV_STATU":"Görüşmeye Bekleniyor",
"MyCount":14
}
]
but when I call the mainpage(localhost:56569/Yonetim/Home/MainPage), nothing is displayed.
public class HomeController : Controller
{
public ActionResult MainPage()
{
var model = new CvViewModel();
return View(model);
}
public JsonResult FillChart()
{
using (MULAKATDBEntities1 ent = new MULAKATDBEntities1())
{
var dbStatuList = ent.CV.GroupBy(x => new { x.CV_STATU }).Select(g => new { g.Key.CV_STATU , MyCount = g.Count() }).ToList();
return Json(JsonConvert.SerializeObject(dbStatuList), JsonRequestBehavior.AllowGet);
}
}
}
my javascript code is as follows :
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"/>
</body>
</html>
<script type="text/javascript">
window.onload()=function(){
var dataPoints = [];
$.getJSON("Yonetim/Home/FillChart", function (data) {
for (var i = 0; i <= data.length - 1; i++) {
dataPoints.push({ label: data[i].CV_STATU, y: parseInt(data[i].MyCount) });
}
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
title: {
text: "CanvasJS Charts "
},
data: [
{
type: "column",
dataPoints: dataPoints
}
]
});
chart.render();
});
}
</script>
How can I create a chart with cv_statu and mycount information on the screen?
Here is a working solution:
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;" ></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("https://79723e01-80d8-4331-ad9f-5ec9b34a6857.mock.pstmn.io/Yonetim/Home/FillChart", function (data) {
const dataPoints = data.map(point => {
return {
label: point.CV_STATU,
y: parseInt(point.MyCount),
}
})
const chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
title: {
text: "CanvasJS Charts"
},
data: [
{
type: "column",
dataPoints: dataPoints
}
]
});
chart.render();
})
})
</script>
You need to change the url in $.getJSON to yours. Mine will work only if you launch your page as a server.
I am currently having an issue with the botchat framework from Microsoft.
In essence, they are saying that for the framework to work in I.E., all you have to do is change the script for their webchat-es5.js version. However, this still does not work at all in IE. I am using IE 11. All other browsers work fine, except IE.
Could someone please point me in the right direction so that I may have this ChatBot actually work in IE?
Here is the code I am using for all of this stuff:
Relevant HTML:
<div id="webchat" role="main" style="position: absolutel bottom:0; left:0; width:100%; height:100%;"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
Relevant JavaScript:
const styleOptions =
{
accent: '#0063B1',
backgroundColor: 'White; border:2px solid #23447e; border-radius: 25px; padding-top:20px',
cardEmphasisBackgroundColor: '#F0F0F0',
paddingRegular: 10,
paddingWide: 10 * 2,
subtle: '#767676',
bubbleBackground: '#CCCCCC',
bubbleBorder: 'solid 1px #E6E6E6',
bubbleBorderRadius: 10,
bubbleFromUserBackground: '#0084ff',
bubbleFromUserBorder: 'solid 1px #E6E6E6',
bubbleFromUserBorderRadius: 10,
bubbleFromUserTextColor: 'White',
bubbleImageHeight: 100, //240,
bubbleMaxWidth: 480, // screen width = 600px
bubbleMinHeight: 40,
bubbleMinWidth: 250, // min screen width = 300px, Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
bubbleTextColor: 'Black',
// Send box
hideSendBox: false,
hideUploadButton: false,
microphoneButtonColorOnDictate: '#F33',
sendBoxBackground: 'White',
sendBoxButtonColor: '#767676',
sendBoxButtonColorOnDisabled: '#CCC',
sendBoxButtonColorOnFocus: '#333',
sendBoxButtonColorOnHover: '#333',
sendBoxHeight: 40,
sendBoxMaxHeight: 200,
sendBoxTextColor: 'Black',
sendBoxBorderBottom: '',
sendBoxBorderLeft: '2px solid #23447e; border-radius: 25px',
sendBoxBorderRight: '2px solid #23447e; border-radius: 25px',
sendBoxBorderTop: '2px solid #23447e; border-radius: 25px',
sendBoxPlaceholderColor: '#23447e',
sendBoxTextWrap: false,
typingAnimationBackgroundImage: 'https://support.signal.org/hc/article_attachments/360016877511/typing-animation-3x.gif',
spinnerAnimationBackgroundImage: 'https://support.signal.org/hc/article_attachments/360016877511/typing-animation-3x.gif',
avatarSize: 80,
botAvatarImage: 'https://s3.gifyu.com/images/oie_3BXuLVEkv2Ad.gif',
userAvatarImage: 'https://i.ibb.co/5xz4X4P/kissclipart-generic-person-icon-clipart-computer-icons-person-96a092499db1d0d3.png',
botAvatarInitials: '',
userAvatarInitials: ''
};
const token = 'MY TOKEN SECRET IS HERE';
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
styleOptions
}, document.getElementById("webchat"));
I've also tried their other version of rendering/creating the webchat :
window.fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
.then(function (res) {
return res.json();
})
.then(function (json) {
const token = json.token;
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: token
})
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
});
With this instantiated version, it still doesn't work in IE, and in other browsers, it loads the MockBot from GitHub instead of my own chatbot.
Arrow functions in IE11 are not supported, so you store middleware is causing the problem. Take a look at the code snippet below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Full-featured bundle with ES5 polyfills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
-->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
// This code is modified to run in browser without async and Promise support
window.fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
.then(function (res) {
return res.json();
})
.then(function (json) {
const token = json.token;
const store = window.WebChat.createStore(
{},
function(store) {
return function(next) {
return function(action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
store.dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
}
}
}
);
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: token
}),
store: store
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
});
</script>
</body>
</html>
Hope this helps!
I'm trying to update the values of my chart after aplying or clearing filters with the following code
<div class="col-xs-8 card-container" style="padding: 0 0 0 0">
<mat-card height="100%" style="padding: 16px 0px 16px 16px !important; height:100%">
<mat-card-title style="text-align:center;">Gráfica</mat-card-title>
<mat-card-content>
<div style="display: block; width: 100%" id="canvasContainer" *ngIf="!emptyData()">
<canvas id="myChart"></canvas>
</div>
<div style="display: block; width: 100%" *ngIf="emptyData()">
<h3>Pendiente de evaluar.</h3>
</div>
</mat-card-content>
</mat-card>
this is the html where I render the chart on the canvas with id myChart
this is the code where I generate my first chart, it only executes once and it works
setup(): void{
const maxValue = this.getMaxValue();
var ctddx = document.getElementById('myChart');
var canvas = <HTMLCanvasElement> document.getElementById('myChart');
if(canvas !== null) {
this.ctx = canvas.getContext("2d");
this.chart= new Chart(this.ctx, {
type: 'bar',
data: {
labels: this.labels,
datasets: [{
data: this.values,
borderWidth: 3,
fillColor: this.colors,
backgroundColor: this.colors,
borderColor: this.colors
}]
},
options: {
responsive: true,
legend: {
display: false
},
hover: {
mode: 'label'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value) { if (Number.isInteger(value)) { return value; } },
suggestedMax: maxValue,
}
}],
xAxes: [{
fontSize: 35,
barThickness : 65
}],
},
plugins: {
datalabels: {
// align: 'start',
// anchor: 'start',
clamp: true,
}
}
}
});
this.initialized = true;
}
}
till this point the code works and render the first chart correctly.
Now when I try to apply filters or clear filters it doesn't render anything this is the following code
modifyChart(labels,values){
let oldchart = this.chart;
this.removeData();
this.addData(labels,values);
console.log(oldchart===this.chart);
}
removeData() {
this.chart.data.labels.pop();
this.chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
this.chart.update();
}
addData(label, data) {
this.chart.data.labels.push(label);
this.chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
this.chart.update();
}
It doesn't work, it render nothing and I even tried to compare previously chart with new chart introducing the same values it had, and it returns true, so even being the same Chart, it isn't rendering
I think the problem has to be because update deletes de canvas and create it again, but after a while I can't find a workaround
Ok, so I managed to fix this, I hope this answer can help someone who faces the same problem with re rendering Charts on the same canvas if update doesn't work.
first of all I had this lifecycle method
ngAfterContentChecked(): void {
if (!this.initialized && !this.emptyData()) {
this.setup();
}
}
So I can render the first chart it can't be done on OnInit because you need the canvas to be ready, so with this I'm always waiting for canvas to be ready like my method setup I posted on the question
setup(): void{
const maxValue = this.getMaxValue();
var canvas = <HTMLCanvasElement> document.getElementById('myChart');
if(canvas !== null) {
...
this.initialized = true;
}
}
the problem with Update I think that it also destroys the canvas and create a new one with the same Id, so I think it tries to render the chart before the canvas is ready, so I made a workaround like this
after applying all filters needed and retrieving the new data
modifyChart() {
this.chart.destroy();
this.initialized = false;
}
with this code, my ngAfterContentChecked is going to call for setup till canvas is ready and change initialized to true again
I know this is probably not the best workaround, but at least it fixed my problem
When I do a zoom on a date in the x-axis the chart gets stuck.
This happens only when I work with longs.
With dates it works fine.
I'm new in zing charts and I'm not sure what i am doing wrong
zingchart.exec('myChart', 'zoomtovalues', {
'xmin':1425312000000,
'xmax':1425657600000,
});
and my values are
"values": [
[1425225600000,1],
[1425312000000,1],
[1425398400000,1],
[1425484800000,1],
[1425571200000,1],
[1425657600000,1],
[1425744000000,1],
[1425826800000,1],
[1425913200000,1],
[1425999600000,1]
],
UPDATE
The reason the chart was getting stuck was the step, It works without scrollX
scaleX:{
label:{},
minValue:1425196800000,
step:"day",
transform: {
type: 'date',
all:"%m/%d/%y"
}
},
You have not given much information related to your chart or chart configuration. Based on what you are saying I'm taking a wild guess at what you are asking. If I'm wrong feel feel to follow up.
What you are missing is the scrollX attribute. This enables the scrollbar. Another option is to enable the preview window. Both of these options work in cohesion with zooming.
Information related to scrollX, preview and zooming in general.
https://www.zingchart.com/docs/tutorials/interactive-features/chart-zoom-pan-scroll/
https://www.zingchart.com/docs/api/json-configuration/graphset/scroll-x-scroll-y/
https://www.zingchart.com/docs/api/json-configuration/graphset/preview/
var myConfig = {
type: 'line',
title: {
text: 'After 2 seconds call API method \`zoomtovalues\`'
},
scaleX:{
transform: {
type: 'date',
}
},
scrollX:{},
series: [
{
values: [
[1425225600000,1],
[1425312000000,1],
[1425398400000,1],
[1425484800000,1],
[1425571200000,1],
[1425657600000,1],
[1425744000000,1],
[1425826800000,1],
[1425913200000,1],
[1425999600000,1]
],
}
]
};
setTimeout(function() {
zingchart.exec('myChart', 'zoomtovalues', {
'xmin':1425312000000,
'xmax':1425657600000,
});
}, 2000);
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>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/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>
We are using c3 as a wrapper around d3 javascript charting library. You can see even in their own demo when the data is updated the scroll bar flickers momentarily.
This isn't a problem when there is already a scrollbar on the page as it is in their case. But if the page is smaller the addition and sudden removal or the scrollbar can be jarring.
We aren't doing anything wildly different than they do in their examples. The mystery is why the scrollbars jump. Any ideas? If you want to look at my code it is blow:
Data is getting passed to our AngularJS Directive using SignalR
$scope.$watch('data', function () {
normalizedData = normalize($scope.data);
chart.load({
columns: getChartDataSet(normalizedData)
});
});
After we take the normalized data it simply gets set into an array then passed to C3
var chart = c3.generate({
bindto: d3.select($element[0]),
data: {
type: 'donut',
columns: [],
colors: {
'1¢': '#2D9A28',
'5¢': '#00562D',
'10¢': '#0078C7',
'25¢': '#1D3967',
'$1': '#8536C8',
'$5': '#CA257E',
'$10': '#EC3500',
'$20': '#FF7D00',
'$50': '#FBBE00',
'$100': '#FFFC43'
}
},
tooltip: {
show: true
},
size: {
height: 200,
width: 200
},
legend: {
show: true,
item: {
onmouseover: function (id) {
showArcTotal(id);
},
onmouseout: function (id) {
hideArcTotal();
}
}
},
donut: {
width: 20,
title: $scope.label,
label: {
show: false,
format: function(value, ratio, id) {
return id;
}
}
}
});
body > svg { height: 0; } did not help me. But I had experimented a bit and found a solution:
body > svg {
position: absolute;
z-index: -10;
top: 0;
}
Unfortunately, this method can't fix the issue if a window's height is too small.
Also, you can get rid of jumping by adding scrollbar by default:
body {
overflow-y: scroll;
}
When C3 draws the chart it appends an SVG at the bottom of the <body> element, even with `style="visibility:hidden". I just added a CSS class
body > svg { height:0px !important }
That fixed the issue for me.