We Keep Coding

Trying to put images in nodes

I am looking to add images inside my nodes on my sigmaJS graph. I know it sounds realy simple but i made a lot of researches and i can't find a correct solution to my problem. I hope someone here can help me !!
I tried a few things including the examples on the official sigmaJS website. But between all the topics already open but talking about an old version of sigmaJS I can't find it anymore. I just want a simple graph of 5 nodes with the same image in each node.
Here is my code if it can help you :
<style scoped>
.main {
height: 100vh;
width: 100vw;
position: relative;
}
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
border: 2px solid black;
}
</style>
<template>
<div class="main">
<div ref="container" id="container">
<img src="../assets/city.png" />
</div>
</div>
</template>
<script>
import Graph from "graphology";
import Sigma from "sigma";
import getNodeProgramImage from "sigma/rendering/webgl/programs/node.image";
import ForceSupervisor from "graphology-layout-force/worker";
export default {
name: "GraphView",
mounted() {
this.rendering();
},
methods: {
rendering() {
let container = this.$refs.container;
const graph = new Graph({ multi: true });
const RED = "#FA4F40";
const BLUE = "#727EE0";
const GREEN = "#5DB346";
graph.addNode("John", {
size: 15,
label: "John",
type: "image",
image: "../assets/city.png",
color: RED,
});
graph.addNode("Mary", {
size: 15,
label: "Mary",
type: "image",
image: "./user.svg",
color: RED,
});
graph.addNode("Suzan", {
size: 15,
label: "Suzan",
type: "image",
image: "./user.svg",
color: RED,
});
graph.addNode("Nantes", {
size: 15,
label: "Nantes",
type: "image",
image: "./city.svg",
color: BLUE,
});
graph.addNode("New-York", {
size: 15,
label: "New-York",
type: "image",
image: "./city.svg",
color: BLUE,
});
graph.addNode("Sushis", {
size: 7,
label: "Sushis",
color: GREEN,
});
graph.addNode("Falafels", {
size: 7,
label: "Falafels",
color: GREEN,
});
graph.addNode("Kouign Amann", {
size: 7,
label: "Kouign Amann",
color: GREEN,
});
graph.addEdge("John", "Mary", {
type: "line",
label: "works with",
size: 5,
});
graph.addEdge("Mary", "Suzan", {
type: "line",
label: "works with",
size: 5,
});
graph.addEdge("Mary", "Nantes", {
type: "arrow",
label: "lives in",
size: 5,
});
graph.addEdge("John", "New-York", {
type: "arrow",
label: "lives in",
size: 5,
});
graph.addEdge("Suzan", "New-York", {
type: "arrow",
label: "lives in",
size: 5,
});
graph.addEdge("John", "Falafels", {
type: "arrow",
label: "eats",
size: 5,
});
graph.addEdge("Mary", "Sushis", {
type: "arrow",
label: "eats",
size: 5,
});
graph.addEdge("Suzan", "Kouign Amann", {
type: "arrow",
label: "eats",
size: 5,
});
graph.nodes().forEach((node, i) => {
const angle = (i * 2 * Math.PI) / graph.order;
graph.setNodeAttribute(node, "x", 100 * Math.cos(angle));
graph.setNodeAttribute(node, "y", 100 * Math.sin(angle));
});
const renderer = new Sigma(graph, container, {
// We don't have to declare edgeProgramClasses here, because we only use the default ones ("line" and "arrow")
nodeProgramClasses: {
image: getNodeProgramImage(),
},
renderEdgeLabels: true,
});
// Create the spring layout and start it
const layout = new ForceSupervisor(graph);
layout.start();
},
},
};
</script>

How do we put one time series on the left Y-axis and another on the right Y-axis?

How do we put one time series on the left Y-axis and another time series on the right Y-axis (so that we can use two separate scales)?
This is the current chart view
This is the sample chart view I need with left and right time series on Y-axis
The sample code I have used to render the chart is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
var xValues = [8.8, 8.6, 9.0, 9.7, 9.5, 9.1, 9.0, 9.2, 9.0, 9.6];
var yValues = [31.0, 23.0, 23.0, 45.29, 44.21, 3.53, 83.0, 21.0, 80.0, 38.88]
var labels = ['W12', 'W13', 'W14', 'W15', 'W16', 'W17', 'W18', 'W1P', 'W2P', 'W3P'];
new Chart("id", {
type: "line",
data: {
labels: labels,
datasets: [{
data: xValues,
borderColor: "green",
fill: false,
label: "Salary"
}, {
data: yValues,
borderColor: "orange",
fill: false,
label: "Ownership",
}]
},
options: {
legend: {display: true},
title: {
display: true,
text: "Salary & Ownership"
},
}
});
Thank you.

You can achieve this by providing yAxisID in each datasets data. Following that, mentioning position of each y axis in options.scales.
In the below code, I have made two y axis yAxis: y and yAxis: y1 and mentioned the position left for axis y and position right for axis y1.
You can read more about multi axis line chart here - link
const ctx = document.getElementById("chart").getContext("2d");
var xValues = [8.8, 8.6, 9.0, 9.7, 9.5, 9.1, 9.0, 9.2, 9.0, 9.6];
var yValues = [31.0, 23.0, 23.0, 45.29, 44.21, 3.53, 83.0, 21.0, 80.0, 38.88]
var labels = ['W12', 'W13', 'W14', 'W15', 'W16', 'W17', 'W18', 'W1P', 'W2P', 'W3P'];
const chart6 = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [{
data: xValues,
borderColor: "green",
fill: false,
label: "Salary",
yAxisID: 'y',
}, {
data: yValues,
borderColor: "orange",
fill: false,
label: "Ownership",
yAxisID: 'y1',
}],
},
options: {
legend: {
display: true
},
title: {
display: true,
text: "Salary & Ownership"
},
scales: {
y: {
type: "linear",
display: true,
position: "left",
},
y1: {
type: "linear",
display: true,
position: "right",
},
},
}
});
#container {
width: clamp(250px, 80%, 1024px);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
row-gap: 2em;
}
#chart {
position: relative;
max-width: 400px;
max-height: 300px;
}
<body>
<div id="container">
<canvas id="chart" width="400" height="300" role="img" area-label="First Chart for showing frequencies with year." tabindex="0">
</div>
<!-- Date Adaptor (Moment) CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js#^3"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#^1"></script>
<!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js">
</script>
</body>

Show loading image when Chart is loading

I am using a CanvasJs chart. The chart is working fine. The Chart is taking time to load. I wanted to show a loading image until the chart loads. CanvasJs charts have no defined attributes for this. Any help is appreciated.
Html:
JS:
chart = CanvasJS.Chart("chartContainer1", {});

You can add loader-image(gif) or some text within the chart-container div so that image/text is shown in the div till the chart is initialized.
setTimeout(function(){
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Basic Column Chart"
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}
]
});
chart.render();
},2000);
img{
display: block;
margin: auto;
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;">
<img src="https://i.imgur.com/fXUIBfi.gif" alt="Chart will Render Here..."/>
</div>

Add a horizontal line to the chart

I have a requirement to have horizontal lines in Kendo Line Chart to denote maximum and minimum values as well as high limit and low limit.

Another solution would be to add plotbands.
Example:
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 89, to: 90, color: "red" }
]
}
});
</script>

Adding striplines or Horizontal Lines (Min/Max/Average) via Kendo-chart Render Event Handler
I wanted to add a complete solution here so it can be used for variety reasons.
Using kendo 2015.3.1111 version, IE11/10
I had the same challenge to add upper and lower limit lines similar to MS-Chart strip lines. Kendo 2015.3.1111 and prior versions don't support this feature.
My solution is
Add a stripline property to kendo-chart value-axis property
Use render event handler to draw lines provided by the stripline property per value axis
A value axis (y-axis) may have multiple striplines
Make sure have the following references in the <head>
<link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
Here is the stripline property. I leave the implementation of level position up to you.
valueAxis: [{
name:..
labels:{..}
stripLine: [{
value: 78,
color: "blue",
borderwidth: "1px",
//"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
dashstyle: "dot",
label: "In Max",
labelposition: "",
labelfont: "12 sans-serif"
},
{
value: 70,
color: "blue",
borderwidth: "1px",
dashstyle: "dot",
label: "In Min",
labelposition: "",
labelfont: "12 sans-serif"
}]
}
Second Important point is the number of value axes (y-axes). Kendo-chart "value-axis" property has either the value axis or the array of value axes. Render event handler should figure out object versus array
render: function (e) {
if (e.sender.options.valueAxis.length) {
$.each(e.sender.options.valueAxis, function (i, value) {
drawStriptLine(e.sender, value);
});
}
else {
drawStriptLine(e.sender, e.sender.options.valueAxis);
}
}
You can see the drawStripline in the Code snippet below. Here are some notes about the code.
Make sure the axis names match
axis.slot is the data point. If you know how many data point you have, your data axis starts from 0 to your last data point number. Putting a higher number will return the last point. Otherwise line will be drawn from 0 to last point you specified in the end slot.
KendoChart property renderAs is optional, however canvas doesn't raise the render event handler, so use VML or SVG
Chrome (tested version Version 52.0.2743.116 m) doesn't support dotted and dashed lines yet (solid line only), IE11/10 supports all the dash styles
plotBands implementation is also demonstrated as an alternative to Render Event Handler
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<!--<link href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" rel="stylesheet" />-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<!--<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>-->
</head>
<body>
<div id="chart" />
<script>
var mPlotBands = [];
mPlotBands.push({
from: 60,
to: 61,
color: "red",
borderwidth: "3px",
borderstyle: "dashed",
label: "Min",
labelposition: ""
})
mPlotBands.push({
from: 95,
to: 94,
color: "red",
borderwidth: "3px",
borderstyle: "dashed",
label: "Max",
labelposition: ""
});
$("#chart").kendoChart({
renderAs: "VML", //"canvas", "SVG", "VML"
title: {
text: "Average In/Out Temperatures"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line"
},
series: [{
name: "In Temperature",
data: [74, 74, 76, 78, 74, 70],
axis: "intemperature"
}, {
name: "Out Temperature",
data: [45, 65, 75, 95, 80, 70],
axis: "outtemperature"
}],
categoryAxis: {
name: "CategoryAxis",
categories: ["May", "June", "July", "Aug", "Sep", "Oct"]
},
valueAxis: [{
name: "intemperature",
labels: {
format: "{0}F"
},
min: 50,
max: 110,
plotBands: [],
stripLine: [{
value: 78,
color: "blue",
borderwidth: "1px",
dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
label: "In Max",
labelposition: "",
labelfont: "12 sans-serif"
}, {
value: 70,
color: "blue",
borderwidth: "1px",
dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
label: "In Min",
labelposition: "",
labelfont: "12 sans-serif"
}]
}, {
name: "outtemperature",
labels: {
format: "{0}F"
},
plotBands: mPlotBands,
stripLine: [{
value: 75,
color: "green",
borderwidth: "3px",
dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
label: "Out Avg",
labelposition: "",
labelfont: "italic 12 sans-serif"
}]
}],
render: function(e) {
if (e.sender.options.valueAxis.length) {
$.each(e.sender.options.valueAxis, function(i, value) {
drawStriptLine(e.sender, value);
});
} else {
drawStriptLine(e.sender, e.sender.options.valueAxis);
}
}
});
function drawStriptLine(chart, yaxis) {
var axis = chart.getAxis(yaxis.name);
var stripline;
$.each(yaxis.stripLine, function(i, stripline) {
// Locate value slot
var slot = axis.slot(stripline.value);
// Locate last category slot. Trying to get the last slot on the right given data x-axis plots
var categoryAxis = chart.getAxis("CategoryAxis");
var categorySlotBeg = categoryAxis.slot(0);
var categorySlotEnd = categoryAxis.slot(100000);
// Render a line element
var line = new kendo.drawing.Path({
stroke: {
color: stripline.color,
width: stripline.borderwidth,
dashType: stripline.dashstyle
}
});
line.moveTo([categorySlotBeg.origin.x, slot.origin.y]).lineTo([categorySlotEnd.origin.x, slot.origin.y]);
var labelPos = [categorySlotEnd.origin.x - 50, slot.origin.y - 20];
var label = new kendo.drawing.Text(stripline.label, labelPos, {
fill: {
color: stripline.color
},
font: stripline.labelfont
});
var group = new kendo.drawing.Group();
group.append(line, label);
chart.surface.draw(group);
});
}
</script>
</body>
</html>
Hope this helps.
References
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands

Simply add one more line series with the chart. This will create a hr line in chart. We will be able to manage the line position also.

Print canvas.js chart using js

I would like to print canvas.js chart using javascript.
The printing code.
when I click print button, the printing popup from browser will show up with printing preview nothing.
How can i resolve this problem??
var html = "<html>";
html += document.getElementById("chartContainerInPT").innerHTML;
html += "</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
html code
<div id="chart_divInPT" class="chart">
<div id="chartContainerInPT" style="height: 300px; width: 100%;"></div>
</div>
<button class="btn save" type="button" style="float: right;" id="printInPT">Print</button>
js
var chart = new CanvasJS.Chart(
"chartContainerInPT",
{
theme : "theme1",
title : {
text : ""
},
data : [ {
type : "column",
dataPoints : [
{
label : "Attempted",
y : chapterWiseResult['noOfAttempt']
},
{
label : "Correct",
y : chapterWiseResult['noOfCorrect']
},
{
label : "Wrong",
y : wrong
},
{
label : "Unattempted",
y : unattempted
},
]
} ]
});
How can I print chart in browser?

As solution you can save your canvas as image
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;

Updated 2021
Canvas.js chart now added the print(in pdf,png,jpg)formats feature.
enable the export option as below
title: {
text: "Alarm Statistics",
},
**exportEnabled: true**,// enable print option for the chart
data: [{...},{...}]
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Chart with export feature enabled",
},
exportEnabled: true,
axisX:{
minimum: -900,
interval: 100,
},
data: [
{
type: "area",
fillOpacity: .4,
lineThickness: 3,
dataPoints: [
{ x: -100, y: 71 },
{ x: -200, y: 55 },
{ x: -300, y: 50 },
{ x: -400, y: 65 },
{ x: -500, y: 105, markerType: "circle", markerSize: 9, markerColor: "brown", indexLabel: "Highest" },
{ x: -600, y: 68 },
{ x: -700, y: 28 },
{ x: -800, y: 34 },
{ x: -900, y: 14}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>