I displayed multiBarHorizontalChart in Django but it includes 2 radio buttons that is Grouped and Stacked Serie1,So i want to remove it....anyone give me the proper solution.
views.py
def demo_multibarhorizontalchart(request):
nb_element = 10
xdata = range(nb_element)
ydata = [i + random.randint(-10, 10) for i in range(nb_element)]
ydata2 = map(lambda x: x * 2, ydata)
extra_serie = {"tooltip": {"y_start": "", "y_end": " mins"}}
chartdata = {
’x’: xdata,
’name1’: ’series 1’, ’y1’: ydata, ’extra1’: extra_serie,
’name2’: ’series 2’, ’y2’: ydata2, ’extra2’: extra_serie,
}
charttype = "multiBarHorizontalChart"
data = {
’charttype’: charttype,
’chartdata’: chartdata
}
return render_to_response(’multibarhorizontalchart.html’, data)
There aren't any option to turn it off builded in django-ndv3. Your two options to this are:
Fork django-ndv3 with your solution (hard version)
Set .nv-controlsWrap to display:none; in your css (this will disable Grouped, Stacked)
Set .nv-legendWrap to display:none; in css (this will disable Series1 etc.)
I'm currently working with django-ndv3 too, so maybe I will later need to do something more with it.
Related
Background:
It's possible to "use of an external text file with the .mmd file extension can provide the advantage of syntax coloring and previewing in the RStudio Viewer" (DiagrammeR Docs)
What should look like this:
Problem:
In my minimal working example the graph is not rendered in the viewer panel but the plain text from the mermaid.mmd-file is printed (see below). How to fix this behavior, so that the chart is rendered?
mermaid.mmd:
graph LR
A-->B
Output in viewer panel:
The text inside the mermaid.mmd-file is printed in the viewer panel, but not the rendered graph
My Setup
RStudio 2022.07.2 (<- newest version)
R version 4.2.1 (2022-06-23 ucrt)
DiagrammerR version 1.0.9 (<- newest version)
knitr version 1.40 (<- newest version)
Technical Reason for the Problem
I found the problem. It's the implementation of the handling of extern .mmd-files in the DigrammeR::mermaid()-function.
Within the mermaid()-function the htmlwidgets::createWidget(name = "DiagrammeR", x = x, width = NULL, height = NULL, package = "DiagrammeR")-functions takes the processed input x and renders the graph. This functions expects an input in the format "\ngraph LR\nA-->B\n", where every input start and ends with "\n" and each line in your mermaid-code is also separated by "\n". But the input from an extern .mmd-file (readLines("mermaid.mmd", encoding = "UTF-8", warn = FALSE)) looks like this:
"graph LR" "A-->B" (separated strings for each line of mermaid-code)
Transforming the input into the required format can be done by mermaid.code <- paste0("\n",paste0(mermaid.code, collapse = "\n"),"\n")
Unfortunately this processing step is not implemented for extern .mmd-files in DigrammeR::mermaid()
Soultion
Build a new mermaid()-function, including the required processing step
Replace the mermaid()-function within the DiagrammeR-packages by the new function
# Build new mermaid()-function
mermaid.new = function (diagram = "", ..., width = NULL, height = NULL) {
is_connection_or_file <- inherits(diagram[1], "connection") ||
file.exists(diagram[1])
if (is_connection_or_file) {
diagram <- readLines(diagram, encoding = "UTF-8", warn = FALSE)
diagram <- paste0("\n",paste0(d, collapse = "\n"),"\n") # NEW LINE
}
else {
if (length(diagram) > 1) {
nosep <- grep("[;\n]", diagram)
if (length(nosep) < length(diagram)) {
diagram[-nosep] <- sapply(diagram[-nosep], function(c) {
paste0(c, ";")
})
}
diagram = paste0(diagram, collapse = "")
}
}
x <- list(diagram = diagram)
htmlwidgets::createWidget(name = "DiagrammeR", x = x, width = width,
height = height, package = "DiagrammeR")
}
#Replace mermaid()-function in DiagrammeR-package
if(!require("R.utils")) install.packages("R.utils")
library(R.utils)
reassignInPackage(name="mermaid", pkgName="DiagrammeR", mermaid.new, keepOld=FALSE)
# Test new function
DiagrammeR::mermaid("mer.mmd")
You can preview your codes as simple as running them like this:
library(DiagrammeR)
DiagrammeR(
"
**graph LR
A-->B**
")
You should be able to see
this
I have been trying to create a R shiny dashboard including a sankey network. It is working without any problem, however some of the plots seem quite clutter due to high number of nodes and connections based on some input parameters. As an alternative solution, i am trying to implement zooming feature triggered by double click by the user, but I am getting an error of "unused element" by shiny.
The part of the ui code including double click is:
sankeyNetworkOutput("diagram",dblclick = "plot1_dblclick",
brush = brushOpts(id = "plot1_brush",resetOnNew = TRUE)
The server side code is:
output$diagram<- renderSankeyNetwork({
sankeyNetwork(Links = rv1()$links, Nodes = rv1()$nodes,
Source = "IDsource", Target = "IDtarget",
Value = "value", NodeID = "name",
iterations = 0, sinksRight=TRUE,
fontSize=13, nodePadding=20)
observeEvent(input$plot1_dblclick, {
brush <- input$plot1_brush
if (!is.null(brush)) {
ranges$x <- c(brush$xmin, brush$xmax)
ranges$y <- c(brush$ymin, brush$ymax)
} else {
ranges$x <- NULL
ranges$y <- NULL
}
})
})
I would really appreciate if I can get any help regarding to that!
Thanks!
I want send in a Pagination-embed with a music list because whan an embed is lower at 1024 letters it doesn't send.
I want send in many pages (4musics max per pages)
Sorry for my english, i'm french...
console.log(_serverQueue.songs)
let q = ``;
for(var i = 1; i < _serverQueue.songs.length; i++) {
q += `\n${i + 1}. **${_serverQueue.songs[i].title}**`;
}
let resp = [
{name: `Now Playing`, value: _serverQueue.songs[0].title},
{name: `Queue`, value: q},
];
//Putting it all together
const FieldsEmbed = new Pagination.FieldsEmbed()
.setArray({word: `Queue`})
.setAuthorizedUsers([message.author.id])
.setChannel(message.channel)
.setElementsPerPage(4)
.setPageIndicator(true)
.formatField('Playlist :', el => el.word)
FieldsEmbed.embed
.setColor('#008000')
.setTitle('Playlist :')
FieldsEmbed.build()
}
As per the Documentation of https://www.npmjs.com/package/discord-paginationembed
I explained the steps with Comments
const Discord = require('discord.js');
const Pagination = require('discord-paginationembed');
const songText = ["This is a long SongText", "That is Split up Over", "Multiple Sites", "End of Song"];
// The Splitting can happen via Discord.Js Util Class, it has a Splitter
const embeds = [];
for (let i = 1; i <= 4; ++i)
embeds.push(new Discord.MessageEmbed().setFooter('Page ' + i).setDescription(songText[i - 1]));
// Create Embeds here with the Content and push them into the Array
const myImage = message.author.displayAvatarURL();
new Pagination.Embeds()
.setArray(embeds)
.setAuthorizedUsers([message.author.id])
.setChannel(message.channel)
.setPageIndicator(true)
.setPage(1)
// Methods below are for customizing all embeds
.setImage(myImage)
.setThumbnail(myImage)
.setTitle('Test Title')
.setDescription('Test Description')
.setURL(myImage)
.setColor(0xFF00AE)
.build();
I am trying to implement the following layout:
Name: James
Gender: Male
Followers: Brian, Jason and Mike.
I can imagine that the top level is to use CKStackLayout, but for each entry, e.g. "Name: James", how can I make the Name right align within a Box?
I was using something like the following, wrap the text within a fixed width component and set the label component to use NSTextAlignmentRight alignment, but it doesn't work and both left and right are just 'left-align':
static CKComponent *singleLine(NSString *left, NSString *right)
{
CKStackLayoutComponent *stackComponent =
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionHorizontal,
.alignItems = CKStackLayoutAlignItemsStretch,}
children:{
{.component = [CKStaticLayoutComponent
newWithView:{}
size:{.width = CKRelativeDimension(10)}]},
{.component =
[CKStaticLayoutComponent
newWithView:{}
size:{.width = CKRelativeDimension(88)}
children:{
{
.component =
[CKLabelComponent
newWithLabelAttributes:{
.string = left,
.alignment = NSTextAlignmentRight,
.font = [UIFont boldSystemFontOfSize:14.0],
.maximumNumberOfLines = 1
}
viewAttributes:{}],
}
}],
},
{
.component =
[CKLabelComponent
newWithLabelAttributes:{
.string = right,
.alignment = NSTextAlignmentLeft,
.font = [UIFont systemFontOfSize:14.0],
.maximumNumberOfLines = 1
}
viewAttributes:{}],
.spacingBefore = 10.0
}
}];
return stackComponent;
}
Thanks!
I think your solution is a good one. An alternate solution would be to write your own custom layout by overriding computeLayoutThatFits:. It's best to avoid this generally, but for complex layouts like forms it can be a lifesaver.
May be you should give the outer stacklout(which wrap multil single line, and has the vertical layout direction): .alignItems = CKStackLayoutAlignItemsStretch
I'm using a combo chart from the google graph api (combo chart type). I want to add custom tooltips to add information about each point in the graph, but one of the value is replaced by the tooltip.
Here a very similar example graphic:
adding tooltip to graphs
Supposing that I'm using that graph. In my case, the value 106 (for the year 2011), is replaced by Growth 14% (the tooltip value)
Here the code that generates the data:
function gcomboChart () {
var data = new google.visualization.DataTable();
var dataVal =
[
["January",37903,655396,3411359,"Tooltip January"],
["February",33813,559595,3035931,"Tooltip February"],
["March",54073,725638,4561690,"Tooltip March"]
];
data.addColumn('string','month');
data.addColumn('number','Value1');
data.addColumn('number','Value2');
data.addColumn('number','Value3');
data.addColumn({type:'string', role:'tooltip'});
data.addRows(dataVal);
return(data);
}
//Here the code that generates the graph:
function drawChartComboChartID14cc19be5eef() {
var data = gcomboChart();
var options = { focusTarget: 'category'};
options["allowHtml"] = true;
options["seriesType"] = "bars";
options["series"] = {0: {targetAxisIndex:1,type:"line"}};
options["series"] = {0: {targetAxisIndex:2,type:"line"}};
options["vAxes"] = [{title:'Left Axis',format:'#,###',titleTextStyle:{color: 'orange'},textStyle:{color: 'orange'},textPosition:'out'},
{title:'Right Axis',format:'#,###',titleTextStyle:{color: 'blue'},textStyle:{color: 'blue'},textPosition:'out'}];
options["width"] = 1000;
options["height"] = 600;
options["pointSize"] = 9;
var chart = new google.visualization.ComboChart(
document.getElementById('ComboChart'));
chart.draw(data,options);
}
If you use the code, you'll see that the value of the third variable (Value3), is overwritten by the tooltip. I don't know hoy to get rid of that problem.
I want to show the three values of 'Value1-3' plus the tooltip
Can you please give me a hand?
Thanks!
Tooltips by default will replace the tooltip for that data point. It will not add an additional tooltip. To get around this, you need to add an additional series, and format the tooltip manually within that data value. You can then hide it from the legend, and have it display all nice as follows:
Here is the code:
function gcomboChart () {
var data = new google.visualization.DataTable();
//{v: x, f: y} allows you to set a manual format for each data point
var dataVal =
[
["January",37903,655396,3411359,{v: 0, f:"Tooltip January"}],
["February",33813,559595,3035931,{v: 0, f:"Tooltip February"}],
["March",54073,725638,4561690,{v: 0, f:"Tooltip March"}]
];
data.addColumn('string','month');
data.addColumn('number','Value1');
data.addColumn('number','Value2');
data.addColumn('number','Value3');
// Changed to standard data rather than tooltip role
data.addColumn('number','');
data.addRows(dataVal);
return(data);
}
//Here the code that generates the graph:
function drawVisualization() {
var data = gcomboChart();
var options = { focusTarget: 'category'};
options["allowHtml"] = true;
options["seriesType"] = "bars";
// the below line makes sure the tooltip is not shown in the legend
options["series"] = {0: {targetAxisIndex:0,type:"line"},3: {visibleInLegend:false}};
options["vAxes"] = [{title:'Left Axis',format:'#,###',titleTextStyle:{color: 'orange'},textStyle:{color: 'orange'},textPosition:'out'},
{title:'Right Axis',format:'#,###',titleTextStyle:{color: 'blue'},textStyle:{color: 'blue'},textPosition:'out'}];
options["width"] = 1000;
options["height"] = 600;
options["pointSize"] = 9;
var chart = new google.visualization.ComboChart(
document.getElementById('visualization'));
chart.draw(data,options);
}
Note: I should have switched series 3 to a line as well so that it doesn't push the bars over one. Change the series setting as follows to make it look nicer: options["series"] = {0: {targetAxisIndex:0,type:"line"},3: {visibleInLegend:false,type:"line"}};