I don't want line in background of plotly area graph. My graph is coming like this.
I want to remove this lines from graph. But I didn't get any solution for it.
I referred this code.
And following is my code:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00', '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,9, 4, 5],
fill: 'tozeroy',
fillcolor: 'red',
text: server1,
hoverinfo: "x+y+text",
name:"Server 1",
type: 'scatter',
mode:"markers",
marker:
{
size:5,
color:"gray"
},
uid:"c2e171"
};
var layout = {
margin: {
l: 35,
r: 40,
b: 50,
t: 10
},
legend: {
"orientation": "h"
},
yaxis : {
fixedrange: true
},
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout);
var plotDiv = document.getElementById('myDiv');
</script>
</body>
</html>
And when I'm expanding graph means dragging graph x axis date is hiding,
Please give me solution for it. I'm new with plotly.js
You can use showgrid:
xaxis: {
showgrid: false
},
yaxis: {
showgrid: false,
showline: true
}
More plot.ly layout reference: https://plot.ly/javascript/reference/#layout-xaxis
Related
C3 version: 0.7.12
D3 version: 5.15.0
Browser: Chrome
OS: MAC
Codepen link
var chart = c3.generate({
bindto: '#c3',
data: {
x: 'x',
columns: [
['x', '2013-01-10'],
['sample', 30]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
// this also works for non timeseries data
values: ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04','2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12','2013-01-13', '2013-01-14', '2013-01-15']
}
}
}
});
When you have multiple values for x-axis ticks and there is single point to load on the graph ended in timestamps overlap.
This issue won't come if you have more than one point to load in same graph. How to resolve this when you have single point first for sometime and then second point loads after certain period of time ?
You could solve this by removing the tick values for the x axis and replacing them by format (you already define the date within the x data):
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
Please have a look at the executable snippet below. I have added a Timeout function for demonstration.
var chart = c3.generate({
bindto: "#root",
data: {
x: "x",
columns: [
["x", "2013-01-10"],
["sample", 30]
]
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d"
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['x', '2015-01-09', '2015-01-10', '2015-01-11'],
['sample', 20, 30, 45],
],
duration: 50,
});
}, 3500);
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
<div root>
<div rootRoot id="root" style="width: 95%; height: 200px"></div>
<div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>
If you already want to display all the times as ticks on the x axis at the beginning when only one data point is present, you could add "null" to the data string:
data: {
x: 'x',
columns: [
['x', '2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12'],
['sample', null, 30, null, null]
]
}
Below the executable snippet:
var chart = c3.generate({
bindto: "#root",
data: {
x: "x",
columns: [
['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
['sample', null, 30, null, null]
]
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d"
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
['sample', 20, 30, 15, 25],
],
duration: 50,
});
}, 3500);
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
<div root>
<div rootRoot id="root" style="width: 95%; height: 200px"></div>
<div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>
I am new to coding and am trying to make a barchart with eCharts. I have made a simple bar chart example but now I want to make a thick outline for the bars on the chart. This is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
How do I add a thick black outline on the bars?
You can use the option barBorderColor and barBorderWidth to set the color and width of the border respectively for each bar.
Below is an example based on your existing code.
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
//Added item style
itemStyle: {
normal: {
barBorderWidth: 5,
barBorderColor: "#000"
}
}
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
In this boxplot generated by plotly.js, after selecting points, the non-selected points get an opacity of 0.2.
Is it possible to change the styling of selected and non-selected points ?
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints : [1,2,5],
boxpoints: 'all'
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
If you look at the reference, you can see that there are properties for "selected" and "unselected" markers which allows you to change their styling:
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints: [1, 2, 5],
boxpoints: 'all',
selected: {
marker: {
color: '#ff0000',
opacity: 0.8
}
},
unselected: {
marker: {
color: '#00ff00',
opacity: 0.5
}
}
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
I am facing a bug in C3.js chart library. When you look at the image you can see that the line chart goes out of the "chart-area" and it is not visible in some peak-cases. I would omit the thing that the label is not visible but I would be happy to see the line without hidden parts.
Here is a config for reproducing the error:
const config = {
x: {
tick: {
rotate: -45,
format: '%Y-%m-%d %H:%M:%S'
},
type: 'timeseries',
height: 85,
padding: {left: 30}
},
y: {
label: {position: 'outer-middle', text: 'Event count'},
min: 0,
padding: {top: 0, bottom: 0}
}
},
bindto: '#single-chart',
color: {pattern: ['#323f71']},
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S',
labels: true,
type: 'area-spline'
},
legend: {show: false},
size: {height: 380},
padding: {
right: 50,
left: 80
},
grid: {
y: {
show: true
}
}
};
Does anybody now, how to fix this?
I think the answer is to related to the axis.y.padding.top = 0 setting. However, my example looks slightly different from yours in that I never lose the line plot. The only way I can replicate yours is to set axis.y.max=1400, which then does chop the top of the plot off. If not then please could you unhide the y-axis line and post another image because it will be useful to see if the line terminator tick is there at the top of the axis.
See working snippet below which is modelled on your code and case but not exactly the same as slightly re-written. The button toggles between y.top padding of 20 and zero to illustrate the effect. You can see the highest plot point label becoming clipped off by the top limit. You may want to experiment with removing the setting entirely.
// Cannot find a usable method for changing axis.y.padding.top so redrawing the chart to show effect.
function resetIncPadding(yPaddingTop){
var chart = c3.generate(
{
bindto: '#chart',
size: {
width: 600,
height: 200
},
data: {
x: 'x',
// xFormat: '%Y-%m-%d %H:%M:%S',
labels: true,
type: 'area-spline',
columns: [
['x',
'2018-01-01','2018-01-02','2018-01-03','2018-01-04','2018-01-05','2018-01-06','2018-01-07','2018-01-08','2018-01-09','2018-01-10','2018-01-11','2018-01-12','2018-01-13','2018-01-14','2018-01-15','2018-01-16','2018-01-17','2018-01-18','2018-01-19','2018-01-20','2018-01-21','2018-01-22','2018-01-23','2018-01-24','2018-01-25','2018-01-26','2018-01-27','2018-01-28','2018-01-29','2018-01-30','2018-01-31'
],
['y', 5,10,15,10,10,10,10,5,30,90,500,1000,1200,1500,1230,1110,620,80,30,10,5,15,5,5,15,5,15,12,15,10,10
]
]
},
color: {pattern: ['#323f71']},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: -45,
format: '%Y-%m-%d %H:%M:%S'
},
height: 85,
padding: {left: 30}
},
y: {
label: {position: 'outer-middle', text: 'Event count'},
min: 0,
padding: {top: yPaddingTop, bottom: 0}
}
},
legend: {show: false},
padding: {
right: 50,
left: 80
},
grid: {
y: {
show: true
}
}
});
}
// this is all about toggling the padding.
$('#toggle').on('click', function(e){
val = $(this).val();
val = (parseInt(val,10) === 20 ? 0 : 20);
$(this).val(val).html(val)
resetIncPadding(val);
console.log(val)
})
// first draw on startup
resetIncPadding(20);
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
<p>Using axis.y.padding.top = <button id='toggle' value='20'>20</button></p>
<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>
I'm trying to graph a histogram of 1 series with 100 inputs. However, jqPlot keeps rendering my data as a line graph when I specify it to render a bar graph instead. My code is a modified version of the bar graph examples.
<script type="text/javascript" src="dist/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.pointLabels.min.js"></script>
$(document).ready(function(){
var hits = [123, 54, 897, ...]
var plot1 = $.jqplot('chart1', [hits], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
series:[ {label:'Hits'} ],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
autoscale: true,
renderer: $.jqplot.CategoryAxisRenderer,
numberTicks: 4,
tickInterval: 25
},
yaxis: {
autoscale: true
}
}
});
});
Does anybody know what I'm doing wrong?
Add seriesDefaults options to your jqplot options :
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
}