CodeMirror markText not works - codemirror

I have looked over the documentation but it not works.
const editorInstance = CodeMirror.fromTextArea(editor.value, {})
editorInstance.markText(
{ line: 1, ch: 1 },
{ line: 1, ch: 10 },
{ readOnly: true,}
);

Related

ag-grid createRangeChart Line start from 0

I use createRangeChart to the line but i want that range wii start at 0 ,but i can't set lineDashOffset to anywhere
how can i use lineDashOffset in createRangeChart ?
enter image description here
I want 30.6 that one start to 0
onFirstDataRendered: function onFirstDataRendered(params) {
const colIds = params.columnApi
.getAllDisplayedColumns()
.map(col => col.getColId());
params.api.createRangeChart({
chartType: 'line',
// chartThemeOverrides: {
// common: {
// title: {
// enabled: true,
// text: message,
// },
// },
cellRange: {
columns: colIds,
},
suppressChartRanges: false,
chartContainer: document.querySelector("#datalistgridChart"+id),
});

i find min can set 0 in the
createRangeChart -> chartThemeOverrides -> cartesian -> axes -> number -> min:0
params.api.createRangeChart({
chartType: chartType,
chartThemeOverrides: {
cartesian: {
axes: {
number: {
label: {
formatter: (params) => {
if (chartType == 'line'){
return params.value+'%';
}
return params.value;
}
},
min:0,
},
},
},
common: {
legend: {
enabled: true,
position: 'bottom',
}
}
},
unlinkChart: true,
cellRange: {
columns: colIds,
},
seriesChartTypes:seriesChartTypes,
suppressChartRanges: false,
chartContainer: document.querySelector("#datalistgridChart"+id),
});

How to place label on top of each horizontal bar in echarts?

I'm trying to make an horizontal histogram with y labels on top of each bar with the really nice libray echarts. Here is an example:
Here is where I am with this jsfiddle https://jsfiddle.net/795f84o0/6/ :
Echarts documentation is really good but I did not found a way to put these labels (sankey, funnel, gauge....) on top on each bar :/
Do you have any idea how I can do it? Thank you for your help!
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 10887,
"charts": {
"map": 3237,
"lines": 2164,
"bar": 7561,
"line": 7778,
"pie": 7355,
"scatter": 2405,
"candlestick": 1842,
"radar": 2090,
"heatmap": 1762,
"treemap": 1593,
"graph": 2060,
"boxplot": 1537,
"parallel": 1908,
"gauge": 2107,
"funnel": 1692,
"sankey": 1568
},
"components": {
"geo": 2788,
"title": 9575,
"legend": 9400,
"tooltip": 9466,
"grid": 9266,
"markPoint": 3419,
"markLine": 2984,
"timeline": 2739,
"dataZoom": 2744,
"visualMap": 2466,
"toolbox": 3034,
"polar": 1945
},
"ie": 9743
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
}],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
},
{
data: Object.keys(builderJson.charts),
axisLabel: {
show: true,
},
},
],
series: [{
type: 'bar',
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}]
};
option && myChart.setOption(option);

All right, I got it after two hours...
Just posting a screenshot to show the result:
The fiddle and the code :
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 100,
"charts": {
"pie": 1,
"scatter": 1,
"candlestick": 1,
"radar": 2,
"heatmap": 3,
"treemap": 6,
"graph": 7,
"boxplot": 7,
"parallel": 8,
"gauge": 9,
"funnel": 15,
"sankey": 30
},
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
axisLabel: {
show: false,
},
splitLine: {
show: false
}
},
],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false,
}
},
],
series: [{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
label: {
position: [0, -14],
formatter: '{b}',
show: true
},
itemStyle: {
borderRadius: [0, 2, 2, 0],
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
itemStyle: {
color: 'whitesmoke'
},
label: {
position: 'insideRight',
formatter: function(params) { return 100 - params.value + '%'},
show: true
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}
]
};
option && myChart.setOption(option);

Apache ECharts: Rotated labels get cropped

I'm trying to use rotated labels in my graph. However, the labels are getting cropped. How can I make more space in the bottom so that the labels can fit?
options = {
xAxis: {
type: "category",
data: axis,
axisLabel: {
show: true,
interval: 0,
rotate: 45,
},
axisTick: {
show: true,
interval: 0
}
},
yAxis: {
type: "value",
data: axis,
min: 1,
minInterval: 1,
maxInterval: 1,
max: 15,
axisTick: {
interval: 1
}
},
series: [
{
type: "bar",
stack: "minmax",
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
}
},
data: maxs
},
{
type: "bar",
stack: "minmax",
data: mins,
itemStyle: { color: "#63869e" }
},
{
symbolSize: 20,
data: scatter,
type: "scatter",
itemStyle: { color: "black" },
},
]
};

To contain the label you can use:
options = {
grid: {
containLabel: true,
}
}

Space can be added with grid option bottom:
options = {
grid: {
bottom: 100,
}
}

how to add multiple reference lines in SAPUI5 vizframe?

My vizframe has multiple Measures. I want to have 1 reference line for each measure.
How can I add more than 1 reference line to the chart using setVizProperties?
current code which adding 1 reference line
var oChart = sap.ui.getCore().byId("mainPageView--idVizFrame");
oChart.setVizProperties({
plotArea: {
dataLabel: {
visible: true
},
referenceLine: {
line: {
valueAxis: [{
value: value1,
visible: show,
size: 1,
type: "dotted",
label: {
text: "Target:" + value1 + strrange,
visible: show
}
}]
}
}
}
});

the following code solves this issue
var RefLines2 = [];
var TargetValues = [40, 50, 60, 70];
for (var i = 0; i < TargetValues.length; i++) {
RefLines2.push({
value: TargetValues[i],
visible: show,
size: 1,
type: "dotted",
label: {
text: "Target:" + TargetValues[i] + strrange,
visible: show
}
}
);
}
oChart.setVizProperties({
plotArea: {
dataLabel: {
visible: true
},
referenceLine: {
line: {
valueAxis: RefLines2
}
}
}
});

Column chart has repeating x-axis label

I am at a loss on why Google column chart is repeating the x-axis label.
Please find the CodePen URL: https://codepen.io/anon/pen/MPOJQG?editors=0010
You may notice that I have tried both the approaches:
arrayToDataTable (line #4 in code pen)
conventional datatable structure (line #5 in code pen)
Following is the code from CodePen link:
//console.log("Loading current Google charts");
google.charts.load("current");
google.charts.setOnLoadCallback(function() {
//let dataTable = new google.visualization.arrayToDataTable(GetJSONArray()); //This also has the same issue
let dataTable = new google.visualization.DataTable(GetJSONData());
RenderChart(dataTable, "chart");
});
function RenderChart(dataTable, elementId) {
try {
const dateFormat = "MMM dd";
//debugger;
let numberOfRows = dataTable.getNumberOfRows();
let options = {
tooltip: { isHtml: true /*, trigger: 'selection'*/ },
height: 240,
legend: { position: "bottom" },
colors: ["#4CAF50"],
chartArea: { left: 80, top: 20, width: "90%" },
//isStacked: 'true',
hAxis: {
format: dateFormat
//gridlines: { count: numberOfRows }
},
vAxis: {
//format: '%',
title: "Percentage",
viewWindow: {
max: 100,
min: 0
}
}
};
if (numberOfRows === 1) {
//If there is only one date then Google chart messes up the chart, in that case it is must to set viewWindow
let hAxis = {
hAxis: {
viewWindow: {
min: dataTable.getValue(0, 0),
max: dataTable.getValue(numberOfRows - 1, 0)
}
}
};
options = $.extend(true, options, hAxis);
}
let wrapper = new google.visualization.ChartWrapper({
chartType: "ColumnChart",
dataTable: dataTable,
options: options,
containerId: elementId
});
wrapper.draw();
} catch (e) {
console.log(e.toString());
}
}
function GetJSONArray(){
let data = [
['Date', 'Pass', { role: 'annotation' } , {'type': 'string', 'role': 'tooltip', 'p': {'html': true}} ],
[new Date(2018, 9, 6),96, "48 (96.00%)", "<div>2018-10-06 (Sat)</div><div> - Pass: 48 (96.00%)</div><div> - Fail: 2 (4.00%)</div>"],
[new Date(2018, 9, 8),96.55172413793103448275862069,"168 (96.55%)","<div>2018-10-08 (Mon)</div><div> - Pass: 168 (96.55%)</div><div> - Fail: 6 (3.45%)</div>"],
[new Date(2018, 9, 9),95.82409460458240946045824095,"2,593 (95.82%)","<div>2018-10-09 (Tue)</div><div> - Pass: 2,593 (95.82%)</div><div> - Fail: 113 (4.18%)</div>"],
[new Date(2018, 9, 10),96.81303116147308781869688385,"2,734 (96.81%)","<div>2018-10-10 (Wed)</div><div> - Pass: 2,734 (96.81%)</div><div> - Fail: 90 (3.19%)</div>"],
[new Date(2018, 9, 11),96.80555555555555555555555556,"2,788 (96.81%)","<div>2018-10-11 (Thu)</div><div> - Pass: 2,788 (96.81%)</div><div> - Fail: 92 (3.19%)</div>"],
[new Date(2018, 9, 12),96.863295880149812734082397,"2,069 (96.86%)","<div>2018-10-12 (Fri)</div><div> - Pass: 2,069 (96.86%)</div><div> - Fail: 67 (3.14%)</div>"]
]
return data;
}
function GetJSONData() {
return {
cols: [
{ type: "date", id: "Date", label: "Date" },
{ type: "number", id: "Pass", label: "Pass %" },
{
type: "string",
id: "Annotation",
label: "Annotation",
p: { role: "annotation" }
},
{
type: "string",
id: "ToolTip",
label: "ToolTip",
p: { html: "true", role: "tooltip" }
}
],
rows: [
{
c: [
{ v: "Date(2018, 9, 6)" },
{ v: 96 },
{ v: "48 (96.00%)" },
{
v:
"<div>2018-10-06 (Sat)</div><div> - Pass: 48 (96.00%)</div><div> - Fail: 2 (4.00%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 8)" },
{ v: 96.55172413793103448275862069 },
{ v: "168 (96.55%)" },
{
v:
"<div>2018-10-08 (Mon)</div><div> - Pass: 168 (96.55%)</div><div> - Fail: 6 (3.45%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 9)" },
{ v: 95.82409460458240946045824095 },
{ v: "2,593 (95.82%)" },
{
v:
"<div>2018-10-09 (Tue)</div><div> - Pass: 2,593 (95.82%)</div><div> - Fail: 113 (4.18%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 10)" },
{ v: 96.81303116147308781869688385 },
{ v: "2,734 (96.81%)" },
{
v:
"<div>2018-10-10 (Wed)</div><div> - Pass: 2,734 (96.81%)</div><div> - Fail: 90 (3.19%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 11)" },
{ v: 96.80555555555555555555555556 },
{ v: "2,788 (96.81%)" },
{
v:
"<div>2018-10-11 (Thu)</div><div> - Pass: 2,788 (96.81%)</div><div> - Fail: 92 (3.19%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 12)" },
{ v: 96.863295880149812734082397 },
{ v: "2,069 (96.86%)" },
{
v:
"<div>2018-10-12 (Fri)</div><div> - Pass: 2,069 (96.86%)</div><div> - Fail: 67 (3.14%)</div>"
}
]
}
]
};
}
I have also referred following URLs:
Duplicate label on x-axis, stacking bar chart (google charts)

since you're using datetime for x-axis,
the chart doesn't know it should only show one label for each day.
instead, it adds dates to fill the range of the x-axis.
and since the format does not include time,
labels are repeated.
to correct, use option hAxis.ticks to provide your own labels.
to build dynamically, use data table method --> getColumnRange
this will return the min and max dates in the table.
then build an array of dates for each day.
let dateRange = dataTable.getColumnRange(0);
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
hAxisTicks.push(new Date(i));
}
see following working snippet...
google.charts.load("current");
google.charts.setOnLoadCallback(function() {
//let dataTable = new google.visualization.arrayToDataTable(GetJSONArray()); //This also has the same issue
let dataTable = new google.visualization.DataTable(GetJSONData());
RenderChart(dataTable, "chart");
});
function RenderChart(dataTable, elementId) {
try {
const dateFormat = "MMM dd";
const oneDay = (1000 * 60 * 60 * 24);
//debugger;
let hAxisTicks = [];
let dateRange = dataTable.getColumnRange(0);
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
hAxisTicks.push(new Date(i));
}
let numberOfRows = dataTable.getNumberOfRows();
let options = {
tooltip: { isHtml: true /*, trigger: 'selection'*/ },
height: 240,
legend: { position: "bottom" },
colors: ["#4CAF50"],
chartArea: { left: 80, top: 20, width: "90%" },
//isStacked: 'true',
hAxis: {
format: dateFormat,
ticks: hAxisTicks
//gridlines: { count: numberOfRows }
},
vAxis: {
//format: '%',
title: "Percentage",
viewWindow: {
max: 100,
min: 0
}
}
};
if (numberOfRows === 1) {
//If there is only one date then Google chart messes up the chart, in that case it is must to set viewWindow
let hAxis = {
hAxis: {
viewWindow: {
min: dataTable.getValue(0, 0),
max: dataTable.getValue(numberOfRows - 1, 0)
}
}
};
options = $.extend(true, options, hAxis);
}
let wrapper = new google.visualization.ChartWrapper({
chartType: "ColumnChart",
dataTable: dataTable,
options: options,
containerId: elementId
});
wrapper.draw();
} catch (e) {
console.log(e.toString());
}
}
function GetJSONArray(){
let data = [
['Date', 'Pass', { role: 'annotation' } , {'type': 'string', 'role': 'tooltip', 'p': {'html': true}} ],
[new Date(2018, 9, 6),96, "48 (96.00%)", "<div>2018-10-06 (Sat)</div><div> - Pass: 48 (96.00%)</div><div> - Fail: 2 (4.00%)</div>"],
[new Date(2018, 9, 8),96.55172413793103448275862069,"168 (96.55%)","<div>2018-10-08 (Mon)</div><div> - Pass: 168 (96.55%)</div><div> - Fail: 6 (3.45%)</div>"],
[new Date(2018, 9, 9),95.82409460458240946045824095,"2,593 (95.82%)","<div>2018-10-09 (Tue)</div><div> - Pass: 2,593 (95.82%)</div><div> - Fail: 113 (4.18%)</div>"],
[new Date(2018, 9, 10),96.81303116147308781869688385,"2,734 (96.81%)","<div>2018-10-10 (Wed)</div><div> - Pass: 2,734 (96.81%)</div><div> - Fail: 90 (3.19%)</div>"],
[new Date(2018, 9, 11),96.80555555555555555555555556,"2,788 (96.81%)","<div>2018-10-11 (Thu)</div><div> - Pass: 2,788 (96.81%)</div><div> - Fail: 92 (3.19%)</div>"],
[new Date(2018, 9, 12),96.863295880149812734082397,"2,069 (96.86%)","<div>2018-10-12 (Fri)</div><div> - Pass: 2,069 (96.86%)</div><div> - Fail: 67 (3.14%)</div>"]
]
return data;
}
function GetJSONData() {
return {
cols: [
{ type: "date", id: "Date", label: "Date" },
{ type: "number", id: "Pass", label: "Pass %" },
{
type: "string",
id: "Annotation",
label: "Annotation",
p: { role: "annotation" }
},
{
type: "string",
id: "ToolTip",
label: "ToolTip",
p: { html: "true", role: "tooltip" }
}
],
rows: [
{
c: [
{ v: "Date(2018, 9, 6)" },
{ v: 96 },
{ v: "48 (96.00%)" },
{
v:
"<div>2018-10-06 (Sat)</div><div> - Pass: 48 (96.00%)</div><div> - Fail: 2 (4.00%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 8)" },
{ v: 96.55172413793103448275862069 },
{ v: "168 (96.55%)" },
{
v:
"<div>2018-10-08 (Mon)</div><div> - Pass: 168 (96.55%)</div><div> - Fail: 6 (3.45%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 9)" },
{ v: 95.82409460458240946045824095 },
{ v: "2,593 (95.82%)" },
{
v:
"<div>2018-10-09 (Tue)</div><div> - Pass: 2,593 (95.82%)</div><div> - Fail: 113 (4.18%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 10)" },
{ v: 96.81303116147308781869688385 },
{ v: "2,734 (96.81%)" },
{
v:
"<div>2018-10-10 (Wed)</div><div> - Pass: 2,734 (96.81%)</div><div> - Fail: 90 (3.19%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 11)" },
{ v: 96.80555555555555555555555556 },
{ v: "2,788 (96.81%)" },
{
v:
"<div>2018-10-11 (Thu)</div><div> - Pass: 2,788 (96.81%)</div><div> - Fail: 92 (3.19%)</div>"
}
]
},
{
c: [
{ v: "Date(2018, 9, 12)" },
{ v: 96.863295880149812734082397 },
{ v: "2,069 (96.86%)" },
{
v:
"<div>2018-10-12 (Fri)</div><div> - Pass: 2,069 (96.86%)</div><div> - Fail: 67 (3.14%)</div>"
}
]
}
]
};
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>