ChartJS shows up and disappears - javascript

So I am using ChartJS alongside a Bootstrap 4 and Laravel Project.
The code is fine(see below). Every time I refresh the page, the chart shows up for like a millisecond and goes away.
<div class="col-md-6">
<div>
<canvas id="pie-chart" style="width:100%;"></canvas>
<!-- Pie Chart -->
<script>
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["College Project", "Mind Map", "Designers Club"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
data: [2478,5267,734]
}]
},
options: {
title: {
display: true,
text: 'Tasks Division'
}
}
});
</script>
</div>
</div>

I had the same issue.
The problem was from the defer loading of the app.js in the layout.
<script src="{{ asset('js/app.js') }}" defer></script>
It was loading after my and a Vue instanciation was created. I think this is why the chart was disappearing.
I hope it helps someone.

The solution which was working for me:
Remove async and defer from app.js
<script async src="{{ asset('js/app.js') }}" defer></script>

Related

Chart.js making this chart more readable / scrollable

I'm using chart.js to generate this stacked graph. The problem is, the chart is too small and the users won't be able to read the chart (the stacked portion is really important, some of the tooltips on the X axis are missing (the dataset is a bit large). I want the chart to occupy a very specific place within my webpage.
Is there a way to make the scale on the X-axis smaller and simply being able to horizontally scroll through chart?
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<script>
const data = {
labels: {{ labels | safe }},
datasets: {{ data_list | safe}}
};
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
}],
},
}
};
window.onload = function() {
var ctx = document.getElementById('pie-chart-stacked').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
<!doctype html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Scanner</title>
<meta name="description" content="Project Scanner">
<link rel="stylesheet" href="{% static 'css/home.css' %}">
</head>
<body>
<div id="container" style="width: 50%;">
<canvas id="pie-chart-stacked"></canvas>
</div>
</body>
</html>
Also here's a picture of the chart in it's current state:
EDIT: Added a new picture of the chart with a smaller dataset.
Chart.js doesn't support scrollable axis natively. ChartJs charts are responsive and change width according to parent container. You can do something like this :
<div class="chartWrapper">
<div class="chartAreaWrapper">
<canvas id="chart" height="400" width="15000"></canvas>
</div>
</div>
CSS
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.chartAreaWrapper {
width: 15000px;
overflow-x: scroll;
}
Finally, add this options object to your chart
options: {
scales: {
xAxes: [{
ticks: {
padding: 20
}
}]
}}
Here is one more example on how you can make your chart scrollable
try the responsive chart options.
responsive: [{
breakpoint: 769,
bar: {
horizontal: false
},

How to integrate PayPal button into Extjs environment?

While there is a number of tutorials on Paypal Payment Integration, there is no one dealing wit EXTJS framework.
Integration of PayPal button is pretty straightforward in index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add meta tags for mobile and IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> PayPal Smart Payment Buttons Integration | Horizontal Buttons </title>
</head>
<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style: {
layout: 'horizontal'
}
}).render('#paypal-button-container');
</script>
</body>
</html>
But, how to include it in EXTJS? I do not understand how to mix extjs MVC or MVVM architecture with plain javascipt and html code.
Include the html part in a container and put the buttons code in the after render event
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
title: 'Main Panel',
height:400,
items: [
{
xtype: 'container',
width: 200,
border: true,
height: 400,
html:'<div id="paypal-button-container"></div>',
listeners:{
afterrender: function (){
paypal.Buttons({
}).render('#paypal-button-container');
}
}
},
],
});
Ext.application({
views: [
'MyPanel'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.MyPanel', {renderTo: Ext.getBody()});
}
});
Ext.js has an index.html file. You can add the script tag loading the PayPal there. I.e. you need to add these lines to your index.html
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>
Then create some sort of container (e.g. an Ext.Panel) set the placholder div as the value of the html property then you can use the paypal code to render into this div. E.g.
Ext.define('Paypal', {
extend: 'Ext.container.Container',
html: '<div id="paypal-button-container"></div>',
onRender() {
this.callParent();
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style: {
layout: 'horizontal'
}
}).render('#paypal-button-container');
}
});
Ext.application({
name: 'Paypal',
launch: function () {
Ext.create('Paypal', {
layout: {
type: 'vbox',
align: 'stretch'
},
width: 300,
height: 200,
renderTo: Ext.getBody(),
})
}
});
Working example can be found here

jQuery Sparklines more the one graph

I am trying to show two spark line graphs using jQuery Sparklines but for some reason i only shows me one, this is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.sparkline.min.js"></script>
</head>
<body>
<div id="graphs">
<span id="sparkline"></span>
<br>
<span id="sparkline2>"></span>
</div>
</body>
<script>
$("#sparkline").sparkline([74.82290216,
74.82290216,
48.70129726,
70.77921869,
72.07791995,
69.15584211,
74.05548778,
76.91853079,
70.24792886,
80.34237956], {
type: 'line',
width: '100',
height: '50'
});
$("#sparkline2").sparkline([74.82290216,
74.82290216,
48.70129726,
70.77921869,
72.07791995,
69.15584211,
74.05548778,
76.91853079,
70.24792886,
80.34237956], {
type: 'line',
width: '100',
height: '50'
});
</script>
</html>
As you can see i have two spans with two different id's and still i get only the first one.
I even tried to load to the same span but it makes no difference.
Thanks

Used dijit css in two pages, but working in first page only, in second page getting blank page

I have used dijit css for dijit/horizontalSlider in two pages , slider is getting loaded in first page but in second page getting blank. dojoz/data/DataGrid also loaded correctly in first page, but in second page getting blank.
UPDATED:
I have two buttons in home.html(parent page) and calling django templates grid.html and move.html. Here is grid.html source code
<!DOCTYPE html>
<html >
<head>
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'pmda_app/dojo/../dijit/themes/claro/claro.css' %}">
<style>
#import "{% static 'pmda_app/dojox/grid/enhanced/resources/claro/EnhancedGrid.css' %}";
#import "{% static 'pmda_app/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css' %}"
<script src="{% static 'pmda_app/dojo/dojo.js' %}"></script>
<script>dojoConfig = {parseOnLoad: true}</script>
<script>
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.ready(function(){
/*set up data store*/
var data = {
identifier: 'id',
items: []
};
var data_list = [
{ col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
{ col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
{ col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 60;
for(var i=0, l=data_list.length; i<rows; i++){
data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new dojo.data.ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [[
{'name': 'Column 1', 'field': 'id'},
{'name': 'Column 2', 'field': 'col2'},
{'name': 'Column 3', 'field': 'col3', 'width': '230px'},
{'name': 'Column 4', 'field': 'col4', 'width': '230px'}
]];
/*create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
}},
document.createElement('div')
);
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
});
</script>
</head>
<body class="claro">
<div id="gridDiv"></div>
</body>
</html>
Here is the move.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% load staticfiles %}
<title>Scaling, scrolling, and panning.</title>
<link rel="stylesheet" href="{% static 'pmda_app/dijit/tests/css/dijitTests.css' %}">
<link rel="stylesheet" href="{% static 'pmda_app/dojo/../dijit/themes/claro/claro.css' %}">
<script type="text/javascript" src="{% static 'pmda_app/dojo/dojo.js' %}" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script>dojoConfig = {parseOnLoad: true}</script>
<script type="text/javascript">
dojo.require("dijit.form.HorizontalSlider");
dojo.require("dijit.form.HorizontalRule");
dojo.require("dijit.form.HorizontalRuleLabels");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Areas");
dojo.require("dojox.charting.plot2d.Lines");
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
dojo.require("dojox.charting.plot2d.Grid");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.themes.PlotKit.orange");
makeObjects = function(){
var data = [4,8,2,1,6,4,8,8,2,1,6,4,9,0,2,8,9,3,4,1,2,1,6,9,1,0,8,2,4,6,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1];
var dates = [2013-11-19,2013-11-20,2013-11-21,2013-11-22,2013-11-25];
chart = new dojox.charting.Chart("test");
chart.setTheme(dojox.charting.themes.PlotKit.orange);
chart.addAxis("x", {
labels: dojo.map(dates, function(value, index){
return {value: index + 1, text: value}; }), minorTicks:false, stroke: "green"
})
.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", minorTicks:false, stroke: "green", min: 0})
.addSeries("UsersGraph", data,{stroke: {color: "blue", width: 1}}, {fill: "green"});
chart.addPlot("default", {type: dojox.charting.plot2d.Lines, gap: 5});
chart.addPlot("grid", {type: dojox.charting.plot2d.Grid, hMinorLines: true});
new dojox.charting.action2d.Tooltip(chart, "default");
chart.render();
};
dojo.addOnLoad(makeObjects);
</script>
</head>
<body class="tundra">
<div id="test" style="width: 500px; height: 300px; margin: 30px auto 0px auto;"> </div>
<table>
<tr><td align="center" class="pad">ZOOM X(<span id="scaleXValue">1</span>)</td></tr>
<tr><td>
<div id="scaleXSlider" data-dojo-type="dijit/form/HorizontalSlider" class="clearfix" value="1" minimum="1" maximum="5" discreteValues="6" showButtons="false" style="width: 500px;">
<div data-dojo-type="dijit/form/HorizontalRule" container="bottomDecoration" count="5" style="height:5px;"></div>
<div data-dojo-type="dijit/form/HorizontalRuleLabels" container="bottomDecoration" minimum="1" maximum="5" count="5" constraints="{pattern: '##'}" style="height:1.2em;font-size:75%;color:gray;"></div>
</div>
</td></tr>
<tr><td align="center" class="pad">PAN X (<span id="offsetXValue">0</span>)</td></tr>
<tr><td>
<div id="offsetXSlider" dojoType="dijit.form.HorizontalSlider"
value="1" minimum="0" maximum="1000" discreteValues="1001" showButtons="false"
style="width: 500px;">
</div>
</td></tr>
</table>
</body>
</html>
First I have clicked on grid.html and it displayed the data correctly, after that clicked on move.html for chart with horizontal sliders, chart came properly but no sliders are there.
If I clicked move.html first time it is wokring fine(getting chart and sliders also)
From DOJO and DIJIT can not parse same ID twice?:
Dojo keeps track of the objects / widgets it creates by the specified id. If you run the parser again on an object with the same id, dojo tries to create a second instance, but there is already one, so it should throw an error in your js console.
Destroy the created widget/object ids before you parse the same page again. Here I have declared 'widgets' as global variable, so that if any widgets ids are there just destroying them before parsing.
if(widgets){
widgets.forEach(function(widget) {
widget.destroyRecursive();
});
}
widgets = dojo.parser.parse();
It's worked for me.
I make a fiddle out of your Code and it seems to be working well.
Have a look: http://jsfiddle.net/E2J4A/
makeObjects = function () {
var data = [4, 8, 2, 1, 6,...
Regards
Have you checked if your resources are correct? I mean, if you open a second html-page you must load the resources for this side again.
UPDATE 1
My guess would be, because you still want to use the widgets from the first Page, to write new ones for the second Page. You can't unregister them, because if you do, you can't use them anymore in the first Page.
So, the easiest Way is to write new ones for the second Page. The values from the first Page, can be transfered to the second.
Update 2
Last try :
Setup html pages
Write javascript seperatly and load it at the start like
<script type="text/javascript" src="...from/here/to/mygauge.js"</script>
Regards

JQPlot labelRenderer

Can I please have some help to display text on the YAxis to be displayed vertically in a JQPlot. Here is my current code:
{
label: 'Rating',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
Import these two scripts required by the label renderer
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

Categories

Resources