I want create this chart in laravel using google chart or chartjs.
This is the quadrant chart image I want to create using Google Chart API:
Click here for a larger image.
This is my code so far:
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>I can't 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.
Plus, I wanna ask how to write text in coloring area? like q1,q2,q3,q4,q5
I don't understand using google chart.