Develop Reference

How to properly format multiple rectangle graphics in apache echarts?

I'm having trouble figuring out the best method of adding static shapes to the background of my chart using Apache Echarts. I have a graph that has multiple line series, and I'd like to provide transparent background shapes so that the viewer is able to see how the data falls into the various thresholds over time.
I've figured out how to add shapes to a chart, however I'm having trouble with two things:
Forcing the shapes to fill correctly to the edge of the graph/grid area, and cut off there.
Specifying exact thresholds for the shapes (from what I can tell, currently its based on pixels. I'd like to be able to drop thresholds based on y-axis values.
https://imgur.com/a/gJK91r0
I'm at a bit of a loss for how to achieve this. Listed below is the code I used to generate this graph. This is a link to the editor on apache i used, the code should be there as well.
https://echarts.apache.org/examples/en/editor.html?c=line-simple&lang=ts&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2juisRgJu_LD-VABmYHQAjAAMAKS80Uas2omyqRmh6GCgRABsKUWwAEbAYCUAtuUpISThjCDaEPRi0e4entR04cAKIJkDMfF5tAUTA9m5yenzHrX1wE2wFVXFpduV0ej0Xf4CHFTQvZPo_TeD3rQX9GCrN3jaHd5397DkRAAWACsh1-pAA7hABGBtERUilQWDYNoqBAcnkAEwI3YDBxHAZ4CixKJI2BxCD-fx0DisaqMAAUlVgGKBQJ4sCZKQAdBiAJTBMF2fHoPH3H6TChDWTPV44jwfL4kpH_ZnY4UDSHQ2GwAFq0kotFLZkguWkUW_QnkYnEUnkynU2kMlls40uzk8_nqkXq82TcUDSWPGVvSYKqX-yYqxFgzUwwF6pEG9FELHRm6-95E75e0h2qnSx3053szklj0C35C-5Vga2DxCkjWUJ4KhGKiEWCiPr4oRgESdpIm5kAZiZGIxAPZGKSAA52Ulhy6kgCAOxTipN_GBuj-CDQZTRDP-3v90Twqcsqcrl0Yspz2CLyfMmdrh8pJKbiVeHd7g_1xsoHYADcQA
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
grid: {
left: '10%',
right: '10%',
top: 60,
bottom: 60
},
graphic: [
{
type: 'group',
left: '10%',
right: '10%',
bottom: 60,
top: 60,
children: [
{
type: 'rect',
shape: {
y: 450,
width: 1000,
height: 200,
},
style: {
fill: 'rgba(0, 255, 0, 0.2)'
}
},
{
type: 'rect',
shape: {
y: 200,
width: 400,
height: 250,
},
style: {
fill: 'rgba(255, 255, 0, 0.2)'
}
},
{
type: 'rect',
shape: {
y: 0,
width: 400,
height: 200,
},
style: {
fill: 'rgba(255, 0, 0, 0.2)'
}
}
]
}
],
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
data: [100, 225, 275, 268, 354, 287, 301],
type: 'line'
}
]
};

I ended up figuring out a pretty decent solution to this. Adding data-less series with filled areas works pretty well and is pretty easy to implement.
You can check out the visualization here.
Here's the code:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
data: [100, 225, 275, 268, 354, 287, 301],
type: 'line'
},
{
type: 'line',
markArea: {
itemStyle: {
color: 'rgba(0, 255, 0, 0.2)'
},
data: [
[
{
coord: [, 125]
},
{
coord: [, 0]
}
]
]
}
},
{
type: 'line',
markArea: {
itemStyle: {
color: 'rgba(255, 255, 0, 0.2)'
},
data: [
[
{
coord: [, 275]
},
{
coord: [, 125]
}
]
]
}
},
{
type: 'line',
markArea: {
itemStyle: {
color: 'rgba(255, 0, 0, 0.2)'
},
data: [
[
{
coord: [, 275]
},
{
coord: [, ]
}
]
]
}
}
]
};

how to add new value in the tooltip?

I want to add a new value in the tooltip, but I don't want to show the value in the chart. I searched but i did not find any solution. for example:
{
show: false,
name: '利润',
type: 'bar',
label: {
show: true,
position: 'inside'
},
data: [20, 17, 24, 24]
},
{
name: '收入',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [320, 302, 341, 374]
},
{
name: '支出',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'left'
},
data: [120, 132, 101, 134]
}
can i add show:false or different things?
my echarts version is ^3.8.5.

Actually this can be done by reformatting your series data and customize tooltip formatter function. You can take a look at this case and make your own adjustment.
For example, data with higher dimension can be added like this:
data: [
['Mon', 120, 0],
['Tue', 200, 1],
['Wed', 150, 2],
['Thu', 80, 3],
['Fri', 70, 4],
['Sat', 110, 5],
['Sun', 130, 6],
],
Data with dimension index 0 and 1 will be plotted in the series, but dimension 2 will not shown.
Then make custom tooltip formatter function. For example:
formatter: function(params) {
return `
${params.seriesName}:<br />
Day: ${params.value[0]}<br />
Value: ${params.value[1]}<br />
New Value: ${params.value[2]}<br />
`
}
Complete example:
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return `
${params.seriesName}:<br />
Day: ${params.value[0]}<br />
Value: ${params.value[1]}<br />
New Value: ${params.value[2]}<br />
`
}
},
series: [{
data: [
['Mon', 120, 0],
['Tue', 200, 1],
['Wed', 150, 2],
['Thu', 80, 3],
['Fri', 70, 4],
['Sat', 110, 5],
['Sun', 130, 6],
],
name: 'MySeries',
type: 'bar'
}]
};
Result:
See on Imgur

maybe custom series it worked but i couldn't find examples about bar chart. there is an example in the site but the example is about gantt chart.

You cannot find this one or similar settings because they should not exist. It's breaking the main dataviz concept: visualization should simplify rather than complicate the perception of data. You cannot to hide the same data for one place and show it in the another in common context. User don't understand what is the reason of this inconsistence and will stop to trusting your chart.
But if you insist, then make the desired like this:
legend: {
data: [{
name: '直接访问',
textStyle: {
color: 'red'
}
},
{
name: '邮件营销',
textStyle: {
color: 'green'
}
}
// [...]
]
}
and for hidden series:
series: [
{
name: '直接访问',
type: 'bar',
data: [0, 0, 0, 0, 0, 0, 0],
},
// {...}
]
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [{
name: '直接访问',
textStyle: {
color: 'red'
}
},
{
name: '邮件营销',
textStyle: {
color: 'green'
}
}
// [...]
],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [{
name: '直接访问',
type: 'bar',
data: [0, 0, 0, 0, 0, 0, 0],
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

How to remove Failed to create chart: can't acquire context from the given item error while using it with Ruby on Rails?

I installed frappe charts for ruby on rails through gem.
Then I tried to run one of the frappe-chart code which is given in their website:
let data = {
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
datasets: [
{
title: "Some Data",
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
title: "Another Set",
values: [25, 50, -10, 15, 18, 32, 27, 14]
},
{
title: "Yet Another",
values: [15, 20, -3, -15, 58, 12, -17, 37]
}
]
};
let chart = new Chart({
parent: "#note-graph", // or a DOM element
title: "My Awesome Chart",
data: data,
type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
height: 250,
colors: ['#7cd6fd', 'violet', 'blue'],
// hex-codes or these preset colors;
// defaults (in order):
// ['light-blue', 'blue', 'violet', 'red',
// 'orange', 'yellow', 'green', 'light-green',
// 'purple', 'magenta', 'grey', 'dark-grey']
format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'
});
<canvas id="note-graph"></canvas>
I also tried with div instead of canvas but it's always showing the same error.

Im using laravel + vuejs.
this solved my problem with "Error: No parent element to render on was provided." with frapped
with the sample data that the npm provided,
in de data just declare the data varible like this:
<template>
<div>
<h1>CHARTS</h1>
<div id="chart"></div>
</div>
</template>
<script>
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import css
import 'frappe-charts/dist/frappe-charts.min.css'
export default{
data(){
return{
data : {
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
],
datasets: [
{
name: "Some Data", type: "bar",
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", type: "line",
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
]
},
chart : null // THIS IS WHAT YOU NEED TO SET NULL
}
},
methods:{
setChart(){ // IN METHOD YOU SET A NEW CHART
this.chart=new Chart("#chart", {
title: "My Awesome Chart",
data: this.data,
type: 'axis-mixed',
height: 250,
colors: ['#7cd6fd', '#743ee2']
})
}
},
mounted(){
this.setChart(); // CALL THE METHOD IN A lifecycle hook
}
}
</script>

How to Plot x,y coordinates in c3.js chart library?

How can i pass x,y values to generate a chart where the x values are not automatically sorted? if i use this example the x starts on 2 because its the lowest value.
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 50, 80, 2,100, 230, 300],
['data1',400, 200, 100, 50, 25, 12]
]
}
});

If you want to not sort the x values, then you need to treat it as a category axis
var chart = c3.generate({
data: {
columns: [
['data1',400, 200, 100, 50, 25, 12]
],
type: "bar",
},
axis: {
x: {
type: 'category',
categories: [50, 80, 2,100, 230, 300],
}
}
});
See http://c3js.org/samples/categorized.html

Highcharts : Data loaded, DOM updated but not display

I tried to create a chart but i get no display in my html page whereas DOM element seems to be well loaded.
Here is the code of My JS function to create the chart :
this.updateUsageChart = function updateUsageChart() {
var jsonData = {
categories : ['01/12/2015', '02/12/2015', '03/12/2015', '04/12/2015', '05/12/2015', '06/12/2015', '07/12/2015', '08/12/2015', '09/12/2015', '10/12/2015'],
series : [
{
name: 'MAX',
data: [170, 170, 170, 170, 170, 170, 170, 170, 170, 170]
}, {
name: 'MIN',
data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
}, {
name: 'test1',
data: [30, 40, 35, 40, 35, 200, 112, 210, 140, 190]
}, {
name: 'test2',
data: [30, 40, 35, 40, 35, 170, 112, 170, 140, 170]
}
]
}
var categories = jsonData.categories ; // Array of String
var series = jsonData.series;
$('#usageChart').highcharts({
title: {
text: 'Test',
x: -20 //center
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
}
I included library in my index.html file :
<script src="../../lib/jquery/jquery.js"></script>
<script src="../../lib/highcharts/highcharts.js"></script>
<script src="../../lib/highcharts/exporting.js"></script>