Please be kind enough to let me know how I can push arrays using the jexcel plugin.
https://bossanova.uk/jexcel/v3/
The push functionality must work in the exact same way as for arrays with 6 different colors as shown below.
Subtitles = orange,
Captions = yellow,
Chapters = blue,
Description = lime,
Interaction purple,
Metadata = pink
var data = [
["Subtitles"],
["Captions"],
["Chapters"],
["Description"],
["Interaction"],
["Metadata"],
];
jexcel(document.getElementById('spreadsheet'), {
data:data,
columns: [
{
type: 'hidden',
},
{
title: 'Subtitles',
},
{
title: 'Captions',
},
{
title: 'Chapters',
},
{
title: 'Description',
},
{
title: 'Interaction',
},
{
title: 'Metadata',
},
],
});
I tried using the following code but it does not work in the proper way.
titlesArray = ["Subtitles", "Captions", "Chapters", "Description", "Interaction", "Metadata"];
var colors = ["orange", "yellow", "blue", "lime", "purple", "pink"];
for(var index = 0; index < subtitles.length; index++) {
var newArray = titlesArray.push("Subtitles", "Captions", "Chapters", "Description",
"Interaction", "Metadata");
}
$('p').css('color', function(index) {
return colors[index % colors.length];
});
The screenshot includes the way the colors should display for the respective titles but should happen for all 6 subtitles without changing the respective color.
I need the title French colored in blue and the title English colored in Orange which includes a font with a specific size as the two headings on top of the last two boxes shown on the very first row shown in the screenshot.
maybe i don't understand as you want. but i try give you an help
For your table, i suggest use JSON (object with property) to load data in jExcel.
var data = [
{"Subtitles":"YourValue", "Captions":"YourValue", "Chapters":"YourValue", "Description":"YourValue", "Interaction":"YourValue", "Metadata":"YourValue"},
/* ... */
]
For style, in jexcel options, you have an option updateTable (https://bossanova.uk/jexcel/v4/examples/table-scripting)
And on this function you can define dynamicaly style like
var colors = ["orange", "yellow", "blue", "lime", "purple", "pink"];
if(color[col]) {
cell.style.backgroundColor = color[col];
}
Related
How can I make programmatic toggling of datasets play together with the one from ChartJS' legend clicking?
Here's a repro of my problem:
Run below snippet.
Toggle fruit data off with button: just works!
Toggle fruit data back on with button: just works!
Toggle fruit off by clicking the legend item: works.
Toggle fruit back on by clicking the legend item: works.
Toggle fruit again with the button: ⚠ broken!
I expect the custom logic to play nice with ChartJS' built in feature.
const chart = new Chart(document.getElementById("chart").getContext("2d"), {
type: "bar",
data: {
labels: ["label1", "label2", "label3"],
datasets: [
{ label: "Fruit", backgroundColor: "IndianRed", data: [1,2,3] },
{ label: "Veggies", backgroundColor: "LightGreen", data: [2,5,3] },
]
}
});
function togglestuff() {
const dataset = chart.data.datasets.find(ds => ds.label === "Fruit");
dataset.hidden = !dataset.hidden;
chart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<div><canvas id="chart" height="75px"></canvas></div>
<button id="hide" onclick="togglestuff()">
Toggle fruit programmatically
</button>
What am I doing wrong?
Turns out hidden works, but there's also a property visible which then needs to be programmatically used with setDatasetVisibility(datasetIndex, visibility) .
So, one method would be:
Get dataset index with indexOf or similar
Get metadata at that index with chart.getDatasetMeta(index)
Use metadata.visible and pass it to setDatasetVisibility(...)
chart.update() as per usual
const chart = new Chart(document.getElementById("chart").getContext("2d"), {
type: "bar",
data: {
labels: ["label1", "label2", "label3"],
datasets: [
{ label: "Fruit", backgroundColor: "IndianRed", data: [1,2,3] },
{ label: "Veggies", backgroundColor: "LightGreen", data: [2,5,3] },
]
}
});
function togglestuff() {
const dataset = chart.data.datasets.find(ds => ds.label === "Fruit");
const index = chart.data.datasets.indexOf(dataset);
const metadata = chart.getDatasetMeta(index);
chart.setDatasetVisibility(
index,
!metadata.visible,
);
chart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<div><canvas id="chart" height="75px"></canvas></div>
<button id="hide" onclick="togglestuff()">
Toggle fruit programmatically
</button>
I'm trying (about a week!!) to render a chart that works totally fine with hardcoded labels, but with my labels (data) from MySQL it shows nothing but a blank page.
However, if I console.log my labels, it shows me all the data sent from my DB which I want to put as labels to my chart.
In my index.js:
router.get('/api', function (req, res) {
axios.get('http://localhost:3000/projetos/quantos/ci')
.then(dados =>{
const d = dados.data;
var labelsx = [];
for(var i = 0; i < d.length; i++){
labelsx.push(d[i].Nome);
}
console.log(labelsx);
var datax = [];
for(var j = 0; j < d.length; j++){
datax.push(d[j].QuantosHa)
}
console.log(datax);
res.render('chart',
{title: "chart",
datai: JSON.stringify(datax),
labeli: labelsx
})
})
.catch(erro => {e: erro});
});
My chart.pug:
extends layout
block content
script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js")
div
each l in labeli
ul=l
div
.chart-container
canvas#chartPic
script.
var ctx = document.getElementById("chartPic").getContext('2d');
ctx.canvas.parentNode.style.width = '50%';
var idata = #{datai};
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: [],
datasets: [{
data: idata,
backgroundColor: ['red', 'green', 'blue', 'pink', 'black'],
borderColor: ['green', 'blue', 'red', 'black', 'pink'],
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: "top 5 centros com mais projetos"
},
legend: {
position: 'bottom'
}
}
});
If i put, for example ["one", "two", "three", "four", "five"] in my chart's labels field it render with no problem and also that "each l in labeli" works just fine, but everytime I try to pass it to my chart, page goes blank like this:
If i put it like its showing the pug code I get the chart:
Can someone help me? Thanks in advance for any suggestion you may have!
Inside index.js, you should not convert datax to a string but simply pass the original array. Remove JSON.stringify from the code block below.
res.render('chart',
{ title: "chart",
datai: JSON.stringify(datax),
labeli: labelsx
})
It should looks as follows.
res.render('chart',
{ title: "chart",
datai: datax,
labeli: labelsx
})
UPDATE
In chart.pug you forgot to define the labels. Instead of an empty array, you should change the code as follows.
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: #{labeli}, // <- make this change
It might be to late to answer this question but I was also facing the same issue and couldn't find any answer. The following steps did the trick.
Remove JSON stringify before sending the response
res.render('chart',
{
title: "chart",
datai: datax,
labeli: labelsx
}
)
And Data is returned in a single comma separated string. So I use the String.split function to create an array.
{
//...
datasets: [{
data: ('#{datai}').split(','),
backgroundColor: ['red', 'green', 'blue', 'pink', 'black'],
borderColor: ['green', 'blue', 'red', 'black', 'pink'],
borderWidth: 1
}],
//...
}
Please note this is a self-answered question.
The Quill Editor's toolbar module doesn't appear to offer a way to add custom tools to it using the JavaScript API. You can merely choose from a list of predefined tools or you have to completely rewrite the entire HTML of the toolbar which seems very hacky and often is not an option. Because of that mechanism, tools can't just be added or removed during runtime and are always static, meaning that (for example) you can't have a dynamic drop down list that loads or changes it's entries during runtime.
The Quill Editor itself only offers an API to add another module. So you could write another toolbar module that supports the above mentioned features the original one is lacking, but it would be much nicer to be able to continue using the original one because of the amount of work that would be required to effectively rewrite it.
The question is: How to add a potentially dynamic tool like a drop down menu to an existing Quill Editor instance's toolbar.
I wrote a library called DynamicQuillTools which can do the job.
It can be used like this:
const dropDownItems = {
'Mike Smith': 'mike.smith#gmail.com',
'Jonathan Dyke': 'jonathan.dyke#yahoo.com',
'Max Anderson': 'max.anderson#gmail.com'
}
const myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(quill)
Here is a full demo adding a custom drop down tool and a custom button to a Quill Editor instance:
// Create a Quill Editor instance with some built-in toolbar tools
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
]
}
}
})
// Add a custom DropDown Menu to the Quill Editor's toolbar:
const dropDownItems = {
'Mike Smith': 'mike.smith#gmail.com',
'Jonathan Dyke': 'jonathan.dyke#yahoo.com',
'Max Anderson': 'max.anderson#gmail.com'
}
const myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(quill)
// Add a custom Button to the Quill Editor's toolbar:
const myButton = new QuillToolbarButton({
icon: `<svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path></svg>`
})
myButton.onClick = function(quill) {
// Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted.
// For example, get the selected text and convert it to uppercase:
const { index, length } = quill.selection.savedRange
const selectedText = quill.getText(index, length)
const newText = selectedText.toUpperCase()
quill.deleteText(index, length)
quill.insertText(index, newText)
quill.setSelection(index, newText.length)
}
myButton.attach(quill)
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.bubble.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link>
<script src="https://cdn.jsdelivr.net/gh/T-vK/DynamicQuillTools#master/DynamicQuillTools.js"></script>
<div id="editor">The last two elements in the toolbar are our custom tools. The first one (<b>Email Addresses</b>) is a simple drop down menu that inserts the email address of the person selected and the second one (<b>U</b>) is a simple button that makes the selected text uppercase.</div>
I know this is old but I just came across this on accident (https://quilljs.com/docs/modules/toolbar/). The solution is to add the class "ql-size" to the select as shown in the container section.
I am new to Javascript. I found this graph on amcharts. I want to change the text color and add a stroke (that can be different colors on each) to each circle. Any help would be greatly appreciated!
I have tried to google search but don't really know where to even start or what to search.
{name: "Core",
children: [
{
name: "First",
children: [
{ name: "A1", value: 100 },
{ name: "A2", value: 60 }
]
},
networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";`
I just want the stroke color to be added and editable (can start with #25BEC1) and the text color to change to #0B3D49
Colors of the nodes
There is a whole section that talks about the colors of the Forced Directed Tree: https://www.amcharts.com/docs/v4/chart-types/force-directed/#Colors
You can either set the colors' source from data or the colors list. I'm not sure if you meant to just use one color for everything. If that's the case,
let chart = am4core.createFromConfig({
series: [{
type: 'ForceDirectedSeries',
...,
colors: {
list: [
'#25BEC1'
],
reuse: true
},
...
}],
data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);
demo: https://jsfiddle.net/davidliang2008/q42c8u5w/23/
Text colors of the nodes
To change the text color of the labels, you can set the color to the fill property of the label object:
let chart = am4core.createFromConfig({
series: [{
type: 'ForceDirectedSeries',
...,
nodes: {
label: {
fill: '#0B3D49',
text: '{name}'
}
},
...
}],
data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);
demo: https://jsfiddle.net/davidliang2008/q42c8u5w/25/
How can I dynamically set google chart series type based on a array of objects?
Example:
Basic chart options
var options = {
title: "Custom Chart",
pointSize: 5,
backgroundColor: { fill: 'white' },
chartArea: { top: 40 },
width: 600,
height: 330,
};
My array that holds series type info is like this:
var sTypes = ["line", "bars", "line"];
The chart series type format is done like this:
series: {1: {type: "line"}}
How can I transform, dynamically, my array into something like that? ... then somehow append those extra options to the basic options?
Never mind, I've found the answer:
var customSeries = {};
for (i = 0; i < sTypes.length; i++) {
customSeries[i] = { type: sTypes[i] };
}
Then I can set:
var options = {..., series: customSeries };