link for image : https://i.stack.imgur.com/x0dF7.jpg
my code
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'X', type: 'number'},
{label: 'Left-Low', type: 'number'},
{label: 'Left-High', type: 'number'},
{label: 'Right-Low', type: 'number'},
{label: 'Right-High', type: 'number'},
{label: 'Right-High-High', type: 'number'},
{label: 'Y', type: 'number'},
{label:'title',type: 'string', role: 'annotation'},
],
rows: [
// scatter
//{c:[{v: 14}, {v: 130}, null, null, null, null]},
// [3.5, 130, null, null, null, null,null,'celk'],
// colors
{c:[{v: 1}, null, {v: 170}, {v: 130}, null, null]},
{c:[{v: 7.5}, null, {v: 170}, {v: 130}, null, null]},
{c:[{v: 7.5}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
{c:[{v: 10}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
{c:[{v: 10}, null, {v: null}, {v: null}, {v: 170}, {v: 100}]},
{c:[{v: 15}, null, {v: null}, {v: null}, {v: 170}, {v: 100}]},
{c:[{v: 10}, null, {v: null}, {v: null},{v: null}, {v: 270}, {v: 30}]},
{c:[{v: 15}, null, {v: null}, {v: null},{v: null}, {v: 270}, {v: 30}]},
{c:[{v: 3.5}, null, {v: 170}, {v: 100}, null, null,null,'celk']},
//{c:[{v: 10}, null, {v: null}, {v: null}, {v: 200}, {v: 130}]},
//{c:[{v: 15}, null, {v: null}, {v: null}, {v: 230}, {v: 130}]},
],
});
var options = {
colors: ['#00ffff'],
legend: 'none',
backgroundColor: { fill:'transparent' },
hAxis: {
ticks: [ 7.5, 15],
title: 'Index'
},
height: 400,
isStacked: true,
series: {
// Left-Low
1: {
areaOpacity: 1,
color: '#e53935',
enableInteractivity: false,
type: 'area',
visibleInLegend: false,
text :'wo',
},
// Left-High
2: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-Low
3: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-High
4: {
areaOpacity: 1,
color: 'yellow',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-High
5: {
areaOpacity: 1,
color: 'blue',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
7 : {
annotations: {
stem: {
length: 0
},
textStyle: {
color: 'black'
}
}
},
},
seriesType: 'scatter',
vAxis: {
ticks: [ 170, 300],
title: '1'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(dataTable, options);
});
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/loader.js" ></script>
<div id="chart_div1"></div>
see picture above, i want create that chart in laravel using google chart or chartjs i cant find similar chart like that. only can find this https://github.com/chartjs/Chart.js/issues/3535 and this https://developers.google.com/chart/interactive/docs/gallery/scatterchart and this .
plus i wanna ask how to write text in coloring area ? like q1,q2,q3,q4,q5 i dont understand using google chart .
please help me.
CodePudding user response:
i can only do with this
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'X', type: 'number'},
{label: 'Left-Low', type: 'number'},
{label: 'Left-High', type: 'number'},
{label: 'Right-Low', type: 'number'},
{label: 'Right-High', type: 'number'},
{label: 'Right-High-High', type: 'number'},
{label: 'Y', type: 'number'},
{type: 'string', role: 'annotation'},
],
rows: [
// scatter
//{c:[{v: 14}, {v: 130}, null, null, null, null, null,{v: 'test'}]},
{c:[{v: 11.25}, null, null, null, null, null,{v: 85},{v: 'Q3'}]},
{c:[{v: 3.75}, null, null, null, null, null,{v: 85},{v: 'Q1'}]},
{c:[{v: 3.75}, null, null, null, null, null,{v: 235},{v: 'Q2'}]},
{c:[{v: 11.25}, null, null, null, null, null,{v: 235},{v: 'Q4'}]},
// [3.5, 130, null, null, null, null,null,'celk'],
// colors
{c:[{v: 1}, null, {v: 170}, {v: 130}, null, null,null]},
{c:[{v: 7.5}, null, {v: 170}, {v: 130}, null, null]},
{c:[{v: 7.5}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
{c:[{v: 10}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
{c:[{v: 10}, null, {v: null}, {v: null}, {v: 170}, {v: 100}]},
{c:[{v: 15}, null, {v: null}, {v: null}, {v: 170}, {v: 100}]},
{c:[{v: 10}, null, {v: null}, {v: null},{v: null}, {v: 270}, {v: 30}]},
{c:[{v: 15}, null, {v: null}, {v: null},{v: null}, {v: 270}, {v: 30}]},
//{c:[{v: 3.5}, null, {v: 170}, {v: 100}, null, null,null,{v: 'test'}]},
//{c:[{v: 10}, null, {v: null}, {v: null}, {v: 200}, {v: 130}]},
//{c:[{v: 15}, null, {v: null}, {v: null}, {v: 230}, {v: 130}]},
],
});
var options = {
colors: ['#00ffff'],
legend: 'none',
backgroundColor: { fill:'transparent' },
hAxis: {
ticks: [ 7.5, 15],
title: 'Index'
},
height: 400,
isStacked: true,
series: {
// Left-Low
1: {
areaOpacity: 1,
color: '#dcf0ef',
enableInteractivity: false,
type: 'area',
visibleInLegend: false,
text :'wo',
},
// Left-High
2: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-Low
3: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-High
4: {
areaOpacity: 1,
color: 'yellow',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-High
5: {
areaOpacity: 1,
color: 'red',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
7 : {
annotations: {
stem: {
length: 0
},
textStyle: {
color: 'black'
}
}
},
},
seriesType: 'scatter',
vAxis: {
ticks: [ 170, 300],
title: '1'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(dataTable, options);
});
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>