In my code, I want to set y-axis '0' when i didn't put the value in var line1.
Now I didn't put information about ['2013-01-25 11:23am'].
In this case, I want to set y-asix value to 0. No, it didn't work like that.
How can I do?
function Drawchart() {
this.showChart = function() {
$(document).ready(
function() {
var line1 = [ [ '2013-01-25 11:20am', 20 ],
[ '2013-01-25 11:35AM', 30 ],
[ '2013-01-25 11:36AM', 7 ],
[ '2013-01-25 11:37AM', 3 ],
[ '2013-01-25 11:38AM', 1 ],
[ '2013-01-25 11:39AM', 2 ] ];
var plot2 = $.jqplot('chart', [ line1 ], {
title : 'Customized Date Axis',
gridPadding : {
right : 35
},
axes : {
xaxis : {
renderer : $.jqplot.DateAxisRenderer,
pad : 0,
tickOptions : {
angle : -90,
fontSize : "5pt",
formatString : '%I:%M%p '
},
min : '11:00 AM',
tickInterval : '1 minute'
},
yaxis : {
min : 0
}
},
series : [ {
lineWidth : 4,
color : '#000000',
markerOptions : {
style : 'square'
}
} ]
});
});
}
}
You can't because JQPlot need to know which points must be drawn in the serie.
You need to set your 0 points manualy like this : ['2013-01-25 11:23am',0] and include them into the array.
var line1=[['2013-01-25 11:20am',20],['2013-01-25 11:23am',0],['2013-01-25 11:35AM',30],['2013-01-25 11:36AM',7],['2013-01-25 11:37AM',3],['2013-01-25 11:38AM',1],['2013-01-25 11:39AM',2]];
Are those 0s actual data points? if so then you should build your line1 with that data or augment it outside of jqplot.
Perhaps also what might help you is a canvas overlay
$.jqplot('chart', [ line1 ], {
...
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: '',
y: 0,
lineWidth: 3,
xOffset: 0,
color: 'rgb(89, 198, 154)',
shadow: false
}}
]
} // end canvasOverlay
}); // end jqplot
Related
I am working with chart.js and am trying to add 2 plugins to the same chart, but when applied, both of the plugins disappear and there is no direct error in the console.
Does anyone know how to implement two plugins to the same graph?
First pulgin
Second plugin referance
Basically, the graph has to show data labels on a line chart and at the same time, draw yAxis lines, but only starting from the points on the line chart.
For some reason, the chart will not show either of them when both are applied.
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
color : '#ffffff'
})
// Chart.plugins.unregister(ChartDataLabels);
// var chart = new Chart(ctx, {
// / plugins: [ChartDataLabels],
// options: {
// // ...
// }
// })
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type : 'line',
// The data for our dataset
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 3,
borderColor : 'rgb(255,0, 0)',
data : data1,
} ]
},
// Configuration options go here
options : {
elements : {
point : {
radius : 3
}
},
legend : {
display : false,
labels : {
fontColor : "white",
fontSize : 18
}
},
scales : {
yAxes : [ {
ticks : {
fontSize : 0,
beginAtZero : false,
max : 40,
},
gridLines : {
display : false,
drawBorder : false,
}
} ],
xAxes : [ {
ticks : {
fontColor : "white",
fontSize : 14,
beginAtZero : 0,
},
gridLines : {
display : false,
}
} ]
},
plugins : [ { // this is the magical bit :)
afterRender : function(c, options) {
let
meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data
.forEach(function(e) {
if (max == undefined
|| c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,
meta.dataset._scale.bottom);
c.ctx
.lineTo(e._model.x,
e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max,
c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
} ],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
myChart(data1);
HTML .js code
<script src="js/chart.js"></script>
<!-- data label .js -->
<script
src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.5.0"></script>
<!-- yAxis lines .js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
var chart = new Chart(document.getElementById('chart'), {
type : 'line',
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 1,
borderColor : 'rgb(255,0, 0)',
data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
}
}]
},
options : {
scales : {
xAxes : [ {
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
}
} ],
yAxes : [{
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
},
ticks : {
beginAtZero: true
}
}]
},
},
plugins : [{ // this is the magical bit :)
afterRender : function(c, options) {
let meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data.forEach(function(e)
{
if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,meta.dataset._scale.bottom);
c.ctx.lineTo(e._model.x,e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
}],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
});
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>
I am using echarts and i am having problems when trying to make echarts display a time period of one day on the x-axis. Here is my code
this.area = {
color: ["#009C95","#21ba45"],
title : {
text: 'Fuel History',
textStyle: {
fontFamily: 'lato'
}
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type: 'time',
boundaryGap:false,
axisLabel: {
formatter: (function(value){
return moment(value).format('HH:mm');
})
},
data : dates
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
backgroundColor: '#4D86FF',
name:'Refuelling',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: historyRefuelling
},
{
name:'Fuel Theft',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: historyTheft
}
]
}
Here are the sample dates and historical data
`
let dates = [
"2018-08-15T10:04:01.339Z",
"2018-08-15T10:14:13.914Z",
"2018-08-15T10:40:03.147Z",
"2018-08-15T11:50:14.335Z",
"2018-08-15T12:04:05.655Z",
"2018-08-15T15:00:19.441Z"
]
let historyRefuelling = [1,1]
let historyTheft = [
1,1,1,1
]
`
The chart displays correctly but the x-axis spans from 31st December 2017 to 2nd January 2018, so that the results appear as a point instead of an area chart with two series data. Is there a way to tell echarts to begin and end the x-axis at a given time? or rather, How can i handle this?
xAxis.min, xAxis.max these two can be set to achieve that;
check here for more detail
xAxis.minInterval can set the gap between axis labels, like one hour or one day.
And if you use type=time, you don't have to set data of Axis, just set series datas, axis range will auto set by given time, like:
let historyRefuelling = [["2018-08-15T10:04:01.339Z",5],["2018-08-15T10:14:13.914Z",7]]
let historyTheft = [
["2018-08-15T10:04:01.339Z",1],[ "2018-08-15T10:14:13.914Z",2],[ "2018-08-15T10:40:03.147Z",3],[ "2018-08-15T11:50:14.335Z",4]
]
option = {
color: ["#009C95","#21ba45"],
title : {
text: 'Fuel History',
textStyle: {
fontFamily: 'lato'
}
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type: 'time',
boundaryGap:false,
axisLabel: {
formatter: (function(value){
return moment(value).format('HH:mm');
})
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
backgroundColor: '#4D86FF',
name:'Refuelling',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: historyRefuelling
},
{
name:'Fuel Theft',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: historyTheft
}
]
}
check this demo
I want to make the c3.js graph smaller than it actually is right now. I played with the width but it cuts off the larger value if its not 620.
The red color graph is 620px. I want it to be the size of the first graph with all the values showing without any fade/cutoff.
var chart = c3
.generate({
bindto : "#topSources",
size : {
height : 180,
width : 620
},
bar : {
width : 16
},
padding : {
right : 230,
top : 50
},
color : {
pattern : [ '#008000', '#008000', '#008000', '#008000',
'#008000' ]
},
data : {
columns : [ [ 'Throughput', data.columns[0][1],
data.columns[0][2], data.columns[0][3],
data.columns[0][4], data.columns[0][5] ] ],
type : 'bar',
labels : {
format : {
Throughput : d3.format('$'),
}
},
color : function(inColor, data) {
var colors = [ '#008000', '#008000', '#008000',
'#008000', '#008000' ];
if (data.index !== undefined) {
return colors[data.index];
}
return inColor;
}
},
axis : {
rotated : true,
x : {
type : 'category',
show : false,
},
y : {
show : false
}
},
tooltip : {
grouped : false
},
legend : {
show : false
}
});
Set a value for axis padding (bottom of the y axis in this instance since it's a rotated bar chart). 80px will cover most of the lengths of your labels - if you change the font size etc it'll need to be different
axis : {
...
y : {
show : false,
padding: { // use these 3 lines
bottom: 80,
},
}
},
Referring this example to create scatter graph using echarts library:
Basic Scattergraph
My code for this is as follows:
option ={
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
symbolSize: 40,
itemStyle: {
normal: {
color: 'lightblue',
borderWidth: 4,
label : {
show: true,
position: 'inside',
formatter: function(v)
{
if (v==[161.2, 51.6])
return 'a'
else
return v
}
}
}
},
type:'scatter',
data: [
[161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
[170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
],
}
]
};
In the formatter function inside series I am trying to match my variable 'v' with a coordinate point from data. But that condition is not satisfied. Where am I going wrong? I only see [object Object] in all the bubbles. Please help.
If you are using the Echarts2.x version, code is as follow:
option ={
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
symbolSize: 40,
itemStyle: {
normal: {
color: 'lightblue',
borderWidth: 4,
label : {
show: true,
position: 'inside',
formatter: function(data){
var v = data.value;
if (v[0]==161.2 && v[1]==51.6)
return 'a'
else
return v
}
}
}
},
type:'scatter',
data: [
[161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
[170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
],
}
]
};
the parameter of formatter function is an object which is a point object on the scatter, Its structure is as follow:
$vars:Array[3]
color:"lightblue"
componentSubType:"scatter"
componentType:"series"
data:Array[2]
dataIndex:0
dataType:undefined
name:""
seriesIndex:0
seriesName:"-"
seriesType:"scatter"
status:"normal"
value:Array[2]
So the parameter isn't the array you wanted.
The itemStyle attribute is used to set the graphic style, The label attribute is used to set the text label on the graph, which can be used to explain some data information of the graph. Such as value, name, etc. In Echarts3.x in order to make the structure of entire configuration more flat and reasonable, label was taken out with itemStyle at the same level. like itemStyle have two states of normal and emphasis. if you are using Echarts3.x version, code is like as follow:
option ={
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
symbolSize: 40,
itemStyle: {
normal: {
color: 'lightblue',
borderWidth: 4,
}
},
label : {
normal: {
show: true,
position: 'inside',
formatter: function(data){
var v = data.value;
if (v[0]==161.2 && v[1]==51.6)
return 'a'
else
return v
}
}
},
type:'scatter',
data: [
[161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
[170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
],
}
]
};
I would like to have my xAxis not below my chart but in the middle (on the yAxis zero value).
And I would like also to have the xAxis labels :
above the xAxis when it is a negavite value
below the xAxis when it is a positive value
Here is what I have : jsFiddle
$(function () {
$('#container').highcharts({
xAxis: {
showFirstLabel : true,
showLastLabel : true,
type : "category",
tickLength : 0,
lineWidth : 2
},
series: [{
data: [
{name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}
],
type : 'column'
}]
});
});
Does it exist an easy way to do this ?
If not, how to do this ?
Thanks.
Solution :
Thanks to Pawel Fus (thanks, thanks, thanks), here is the solution for my problem : jsFiddle.
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function () {
var xAxis = this.xAxis[0];
var serie = this.series[0];
for (var current_tick in xAxis.ticks) {
var tick = xAxis.ticks[current_tick];
if(serie.data[current_tick]){
if (serie.data[current_tick].y > 0) {
tick.label.attr({
y: tick.label.y + 18
});
}
}
}
}
}
},
xAxis: {
showFirstLabel : true,
showLastLabel : true,
type : "category",
tickLength : 0,
crossing:0,
opposite:true,
lineWidth : 2
},
series: [{
data: [
{name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}
],
type : 'column'
}]
});
});
Answers for you:
Yes, this is possible by using Highcharts plugin for that.
This is not supported, you can use chart.events.load to loop over all labels in xAxis and update their position according to value in first series for respective category