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]
],
}
]
};
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 am using eCharts (a JavaScript charting library) and there is something that's doing my head in. The examples use the following code for markLine (and it works as expected)
markLine : {
symbol: 'none',
tooltip: {show: false},
itemStyle:{
normal:{
lineStyle:{
type: 'solid',
color: '#CCCCCC'
},
tooltip:{
show: false
}
}
},
data: [ [{ "xAxis" : 250, "yAxis" : 0 }, {"xAxis": 250, "yAxis" : 250 }] ]
}
I need to be able to get the data part as a JSON string, but I cannot get it to work. Note: For simplicity, I have the same JSON information I receive as a string called arrayString:
markLine : {
symbol: 'none',
tooltip: {show: false},
itemStyle:{
normal:{
lineStyle:{
type: 'solid',
color: '#CCCCCC'
},
tooltip:{
show: false
}
}
},
data: (function (){
var res = [];
var arrayString = "";
arrayString = '[{ "xAxis" : 250, "yAxis" : 0 }, {"xAxis": 250, "yAxis" : 250 }]';
res = JSON.parse(arrayString);
return res;
})()
}
When I run the JSON.parse code the chart doesn't display, but if I console.log the value of 'res' the array appears to be created correctly.
Is anyone able to assist me with resolving this?
References:
Both of these examples use markLine:
http://echarts.baidu.com/echarts2/doc/example/line1.html#-en
http://echarts.baidu.com/echarts2/doc/example/bar13.html#-en
Should you be adding to your res array rather than overwiting it?
res.push(JSON.parse(arrayString));
So I'm working with a bar graph in Chart.js, and I'm trying to get the custom tooltips working. Searching around, it seems like the thing to do in this context is to add
tooltipTemplate: "<%= value %>% test"
to my options section, and that would display the word test after my data value in the resulting tooltip. However, my tooltip remains completely unchanged in reality. And ideas?
Thanks!
Here is an example of custom tooltip label:
var ctx = document.getElementById("myChart");
var barChartData = {
labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
datasets : [ {
type : 'bar',
label : "Revenue (US$)",
data : [ 4000, 4850, 5900, 6210, 2500, 4000, 6500 ],
backgroundColor : 'rgba(0, 0, 255, 0.3)'
} ]
};
var myChart = new Chart(ctx,
{
type : 'bar',
data : barChartData,
options : {
responsive : true,
tooltips : {
callbacks : { // HERE YOU CUSTOMIZE THE LABELS
title : function() {
return '***** My custom label title *****';
},
beforeLabel : function(tooltipItem, data) {
return 'Month ' + ': ' + tooltipItem.xLabel;
},
label : function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
},
afterLabel : function(tooltipItem, data) {
return '***** Test *****';
},
}
},
scales : {
xAxes : [ {
display : true,
labels : {
show : true,
}
} ],
yAxes : [ {
type : "linear",
display : true,
position : "left",
labels : { show : true },
ticks : {
beginAtZero : true
}
} ]
}
}
});
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