I want to have a c3 chart that fulfill a web page. I am trying to use Flexbox.
I use Flex-direction column and add a header and a div. The div as the only grow element. It seems to work well while I resize to upper sizes but its broken when I shrink the windows
See example at: https://codepen.io/josubg/full/RQNJyN/
function showChart(config){
return c3.generate(config);
}
function fixSize() {
var a =document.getElementById("widget-container");
cs.resize({"height": a.clientHeight, "width":a.clientWidth})
}
var labels = ['Month 0', 'Month 18', 'Month 24', 'Month 30', 'Month 36'];
var values = ['Index', 4, 4, null, null, null];
// Include a mark for denote that are axis labels
labels.unshift('x');
var config = {
bindto: d3.select("#chart_a"),
onresized: fixSize,
line: {
connectNull: true
},
legend: {
show: false
},
data: {
x : "x",
columns: [
labels,
values
],
type: "bar"
},
grid: {
show: true,
y: {
lines: [
{value: 8, text: 'Goal', class: 'goal'},
{value: 4, text: 'Baseline', class:'baseline'}
]
}
},
axis: {
x: {
type: 'category'
},
y:{
show:false,
max: 9
}
}
};
cs = showChart(config);
cs.flush();
body{
height: 100vh ;
width: 100vw ;
display: flex;
flex-direction: column;
overflow: hidden;
}
#widget-container{
background-color: fuchsia;
flex-grow: 1;
}
div.c3{
height: 100% !important;
width: 100% !important;
max-height: 100% !important;
}
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.css" rel="stylesheet">
</head>
<body>
<h1>A chart!</h1>
<div id="widget-container">
<div id="chart_a"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.js"></script>
</body>
The awful backgrounds are to ease view the elements size.
Related
I have created a chart using the HighCharts javascript library, the problem I have is that my y-Axis labels are cut by the Y-Axis vertical line. I would like to add more space in the y-axis label gutter area to allow for the labels to be fully visible and so i can add some annotations to the in that area, see image below:
Ideally I would like to add 40px, to the Y-Axis gutter. I have read through the api reference and tried using "yAxis.labels.padding", "yAxis.margin" and "yAxis.offset".
My code is as follows:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#container {
height: 400px;
width: 350px;
}
.highcharts-tick{display: none;}
.highcharts-grid-line{opacity: 0.2}
</style>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id=container2></div>
<script type="text/javascript">
$(function() {
const options = {
chart: {
backgroundColor: '#1B191B', // Background Color
type: 'line',
zoomType: "",
},
rangeSelector : {
enabled: false,
selected : 2,
inputEnabled: false
},
title: {
text: 'APPLE INC', // Title of the Chart
align: 'left',
style: {
color: '#dedbde', // Custom CSS for the title
fontWeight: 'bold'
}
},
scrollbar: { enabled: false },
exporting: {
enabled: false
},
yAxis: {
lineWidth: 2,
tickWidth: 1,
labels: {
style: {
color: '#dedbde'
},
align: 'right',
},
opposite: true,
offset: -1
},
xAxis: {
labels: {
style: {
color: '#dedbde'
}
},
gridLineWidth: 1,
},
navigator: {
enabled: false
},
series: [{
name: 'AAPL Stock Price',
data: [],
type: 'areaspline',
threshold: null,
color: '#5861B3',
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
}
const url = 'https://demo-live-data.highcharts.com/aapl-c.json'
const chart = Highcharts.stockChart('container', options)
$.getJSON(url, function(data) {
chart.series[0].setData(data)
// Execute callback
if (chart.options.chart.events && chart.options.chart.events.dataLoad) {
const dataLoad = chart.options.chart.events.dataLoad.bind(chart)
dataLoad(data)
}
})
})
</script>
</body>
</html>
Been banging my head around this for while, but I cant seem to figure it out any help would be very much appreciated. Thanks
In Highstock, the yAxis is inverted by default, so aligning the labels is reversed as well.
The only thing you need to change is setting yAxis.labels.align to 'left'.
Demo:
https://jsfiddle.net/BlackLabel/10ae8g9d/
I am trying to plot some heavy data on zing Chart. Zing charts are normally plot inside a div but for my case my page became leggy after loading 200k points inside zing chart div-tag. In the doc it says to load large data in Canvas.
In the performance documentation of zing chart; in the end of document there is Render type, it says to load in canvas but its not working. according to doc
Render Type
The render method is where you can define the output, which can either render Canvas or SVG. If you are rendering a large dataset, the performance of Canvas will benefit you because DOM explosion happens when rendering in SVG.
Here is my code any suggestion or help.
function chart_timeFreq_ff_fh(timeArray, frequency_array_ff, frequency_array_fh) {
zingchart.DEV.SORTTOKENS = 0;
zingchart.DEV.PLOTSTATS = 0;
zingchart.DEV.RESOURCES = 0;
zingchart.DEV.KEEPSOURCE = 0;
zingchart.DEV.COPYDATA = 0;
zingchart.DEV.MEDIARULES = 0;
zingchart.SYNTAX = 'dashed';
$('#lineChart_f').remove();
$('#canvas_div_f').append(
'<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);
let configTimeAndAngle = {
"type": "line",
plot: {
mode: 'fast',
'hint-ts': true
},
legend: {
layout: "1x2", //row x column // items means in one two we added two items as legends
x: "35%",
y: "6%",
},
"preview":{
"live":true
},
'scale-x': {
zooming: true,
labels: timeArray,
'max-items':8,
transform: {
type: 'date'
},
item: {
'font-size':10
}
},
'scale-y': {
'auto-fit': true,
guide: {
'line-style': "solid"
},
item: {
'font-size':10
}
},
tooltip: {
// text: 'Time : %kt (X) Freq : %%node-value (Y).',
text: 'Time : %kt (X) Freq : %v (Y).',
alpha: 0.9,
backgroundColor: '#F44336',
borderColor: '#B71C1C',
borderRadius: 2,
borderWidth: 1,
padding: '5 10'
},
gui: {
behaviors: [
{
id: 'ViewDataTable',
enabled: 'none'
},
{
id: 'ViewSource',
enabled: 'none'
},
{
id: 'CrosshairHide',
enabled: 'all'
}
]
},
"series": [
{
"values": frequency_array_ff,
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
"values": frequency_array_fh,
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
};
zingchart.render({
id: 'lineChart_cob_f',
data: configTimeAndAngle,
height: "100%",
width: "100%",
output: "canvas"
});
}
Updated
I have tried to plot like this but still issue. Above chart is also updated and we i need to change how I pass time ? my time format is like 2022-10-10 23:24:03 an array of time like this so in the 'scale-x': { labels: timeArray} i add time like this
"series": [
{
values: [],
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
values: [],
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
configTimeAndAngle.series[0].values.push([frequency_array_ff]);
configTimeAndAngle.series[1].values.push([frequency_array_fh]);
configTimeAndAngle.series[0]=values.[frequency_array_ff];
configTimeAndAngle.series[1]=values[frequency_array_fh];
configTimeAndAngle.series[0]=frequency_array_ff;
configTimeAndAngle.series[1]=frequency_array_fh];
I've managed to create you a demo in a studio application with over 200k nodes, maybe you can use this setup with canvas in the render method for reference and see how it goes. I hope this helps.
To be honest I also had the same issue all day, then I saw this and I have found the issue on your question. you have use canvas instead use div and while rendering use
// this is your code
$('#canvas_div_f').append(
'<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);
instead just use
$('#canvas_div_f').append(
'<div id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></div>'
);
and while render set output to canvas.
zingchart.render({
id: 'lineChart_cob_f',
data: configTimeAndAngle,
height: "100%",
width: "100%",
output: "canvas"
});
I have noticed that using Cola.js (with Cytoscape.js) most of my layouts tend to form in a square layout and not using up my bounding box which is more wide than tall.
I've been looking around and found d3-force which has this option of forceY that transform a square layout (https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03):
To this more wide layout:
I would really like to do the same for Cola.js, however I have been struggling to do it and tried all possible options like setting the bounding box, disabling zoom and etc. Is this possible at all?
I've found a demo for Cola.js that provides somewhat what I need, but unable to make it work in Cytoscape.js: https://ialab.it.monash.edu/webcola/examples/pageBoundsConstraints.html
Based on the link you provide, you can apply a similar functionality with cola.js. You need to have two dummy nodes locked (one for top-left and one for bottom-right) and then add constraints for all other nodes appropriately. You can disable the visibility of dummy nodes (I left them as visible so we can see the top-left and bottom-right of the bounding box.). You can play with the position of dummy nodes to adjust your bounding box.
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: 'edge',
css: {
'curve-style': 'straight',
}
}
],
layout: {
name: 'preset'
},
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'd0'
},
position: {x: 0, y:0}
},
{
data: {
id: 'd1'
},
position: {x: 400, y:150}
}
],
edges: [{
data: {
id: 'n0n1',
source: 'n0',
target: 'n1'
}
},
{
data: {
id: 'n1n2',
source: 'n1',
target: 'n2'
}
},
{
data: {
id: 'n2n3',
source: 'n2',
target: 'n3'
}
},
{
data: {
id: 'n4n1',
source: 'n4',
target: 'n1'
}
}
]
}
});
var tl = cy.getElementById('d0');
var br = cy.getElementById('d1');
tl.lock();
br.lock();
var realGraphNodes = cy.nodes().difference(tl.union(br));
var constraints = [];
for (var i = 0; i < realGraphNodes.length; i++) {
constraints.push({ axis: 'x', left: tl, right: realGraphNodes[i], gap: 100 });
constraints.push({ axis: 'y', left: tl, right: realGraphNodes[i], gap: 100 });
constraints.push({ axis: 'x', left: realGraphNodes[i], right: br, gap: 100 });
constraints.push({ axis: 'y', left: realGraphNodes[i], right: br, gap: 100 });
}
cy.layout({name: 'cola', randomize: true, animate: false, gapInequalities: constraints}).run();
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 95%;
width: 95%;
left: 0;
top: 0;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.10.0/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="https://unpkg.com/cytoscape-cola/cytoscape-cola.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
With laravel i created Highcharts from consumed Rest API Link(Spring app) (http://85614a50.ngrok.io/api/devices) with 2 series(axes)
First series do a visualization of Memory in time so object contains(Memory usage, timestamp)
Second series do a visualization of CPU in time and object contains(CPU Usage,timestamp)
This all results are shown statically, now i want to visualise dynamically on charts.
I created a function which do a call of rest api within every 5 second, and event function inside Chart refreshing every 5 second.
It work but axes does not shows me a data from Series(it shows some random numbers because x and y variables are declare as current time and random numbers).
So i know that i must call a Series inside x,y variables.But didn't figure how. Did someone maybe know how to solve this problem ?
P.S.
In case you declare variables and chart(data) is not updated probably it will happen because i didn't turn on java client application so it showing just same data.I not able to keep application truned on because lack of memory on my harddisk. Only monitoring app is truned on so link is working!
My code Example: https://codepen.io/anon/pen/eLERGG (If you open this link it takes 5 seconds for charts to appear)
Home..blade.php
#extends('layouts.app')
#section('content')
<style type="text/css">
#container{
width: 100%;
margin: 0 auto;
}
.col-lg-4 {
margin-bottom: 10%;
min-width: 40%;
max-width: 100%;
margin: 1em auto;
height: 400px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 10%; /* Location of the box */
padding-right: 10%;
padding-left: 10%;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
#container.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="container">
<div class="row">
</div>
</div>
<script type="text/javascript">
$(function () {
setInterval(getHighChart, 10000); //30 seconds onload="getHighChart()"
});
function getHighChart() {
$.getJSON( "http://localhost:8000/api/devices", function( data ) {
console.log(data);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientName"), "clientName");
var mappedClients = _.map(_.uniqBy(data, "Id_client"), "Id_client");
var clients = [];
_.forEach(mappedClients, function(Id_client, clientName) {
var tempClient = {
Allias: mappedClientsAllias[clientName],
name: Id_client,
data: [],
memory:[]
};
tempClient2=tempClient;
_.forEach(data, function(tempData) {
if (Id_client=== tempData.Id_client**strong text**) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push([
clientData.timestamp,
clientData.cpuUsage,
]);
tempClient.memory.push([
clientData.timestamp,
clientData.memoryUsage,
]);
});
}
});
clients.push(tempClient);
});
console.log("clients", clients);
var chart = _.forEach(clients, function(client) {
$('<div class="col-lg-4">')
.css("position", "relative")
.appendTo("#container")
.highcharts("StockChart", {
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -2 * 60
},
exporting: {
buttons: {
customButton3: {
text: 'Zooming',
//make fullscreen of chart with size change
onclick: function(e) {
var w = $(window).width();
var h = $(window).height();
$(e.target).closest('#container').toggleClass('modal');
if($(e.target).closest('#container').hasClass('modal')) {
$('.col-lg-4').hide();
$(e.target).closest('.col-lg-4').show();
$('.col-lg-4').css({
'width': w * .9,
'height': h * .9
});
} else {
$('.col-lg-4').show();
$('.col-lg-4').css({
'width': '',
'height': ''
});
}
$(e.target).closest('.col-lg-4').highcharts().reflow();
}
}
}
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
{
count: 1,
type: "hour",
text: "Min"
},
{
count: 1,
type: "day",
text: "Hours"
},
{
type: "all",
text: "All"
}
],
title: "hours",
inputEnabled: true,
_selected: 1
},
title: {
text: client.Allias
},
yAxis: [{
labels: {
enabled: true,
align: 'right',
x: -3
},
title: {
text: 'CPU'
},
height: '50%',
lineWidth: 2,
color: 'red'
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Memory'
},
top: '70%',
height: '50%',
offset: 0,
lineWidth: 2,
}],
xAxis: {
tickInterval: 1,
title: {
enabled: true,
text: "Client usage"
},
top: '20%',
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b",
week: "%e. %b",
day: "%Y<br/>%b-%d"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [{
name: "Memory USAGE",
data: client.memory.sort()
}, // Add a new series
{
name: "Cpu USAGE",
yAxis: 1,
color: 'red',
data: client.data.sort()
}],
chart: {
renderTo: "container",
height:400,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, true);
}, 1000);
}
}
},
});
});
});
}
</script>
#endsection
Layouts.app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Import css file-->
<link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
#include('doc.header')
#include('doc.nav')
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<div class="container">
#include('doc.ifno')
#yield('main')
</div> <!-- /container -->
#include('doc.Navfoot')
</body>
</html>
<!doctype>
<html>
<head>
<link type="text/css" rel="stylesheet" href="rickshawmmm/src/css/graph.css">
<link type="text/css" rel="stylesheet" href="rickshawmmm/examples/css/lines.css">
<script src="rickshawmmm/vendor/d3.v3.js"></script>
<script src="rickshawmmm/rickshaw.js"></script>
<style>
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#x_axis {
position: relative;
left: 40px;
height: 40px;
}
</style>
</head>
<body>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
<div id="x_axis"></div>
</div>
<div>
<button onclick="window.showTextOnOtherSide()">Change text location</button>
<button onclick="window.setSize()">setSize()</button>
</div>
<script>
// instantiate our graph!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'line',
height: 300,
width: 800,
series: [
{
data: [ { x: 0, y: 800 }, { x: 1, y: 200 }, { x: 2, y: 800 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
color: "#c05020"
},
]
} );
var y_ticks = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis')
} );
graph.render();
window.showTextOnOtherSide = function() {
y_ticks.orientation = y_ticks.orientation === 'right' ? 'left' : 'right';
graph.render();
};
window.setSize = function() {
var width = parseInt(prompt('New axis width?', y_ticks.width), 10);
var height = parseInt(prompt('New axis height?', y_ticks.height), 10);
y_ticks.setSize({
width: width,
height: height
});
};
var format = function(n) {
var map = {
0: 'zero',
1: 'first',
2: 'second',
3: 'third',
4: 'fourth'
};
return map[n];
}
var x_ticks = new Rickshaw.Graph.Axis.X( {
graph: graph,
orientation: 'bottom',
element: document.getElementById('x_axis'),
pixelsPerTick: 200,
tickFormat: format
} );
graph.render();
</script>
</body>
</html>
I have some code i am try to draw the curve in array method but i want to how to draw the curve in quadratic based on three value for example 5x^2+8x-6 ;a=5,b=8,c=-6 in the three value based how to draw the quadratic equation please help me.