Reputation: 109
I am using RStudio to deal with C3 Gauge Chart. Since I am not much informed about javascript. I am having a trouble to do some small things such as adding a title.
I would like to add a title on it. However, I am having a trouble with it. Please help! Here is the code below.
output$gauge1 <- renderC3Gauge({
PTable <- Projects
if (input$accountname != "All") {
Projects <- Projects[Projects$AccountName == input$accountname,]
}
if (input$sponsorname != "All") {
Projects <- Projects[Projects$SponsorName == input$sponsorname,]
}
if (input$typename != "All") {
Projects <- Projects[Projects$TypeName == input$typename,]
}
Projects
C3Gauge(mean(Projects$PercentComplete))
})
}
shinyApp(ui=ui,server=server)
--------------------------------------------------------
HTMLWidgets.widget({
name: 'C3Gauge',
type: 'output',
factory: function(el, width, height) {
// TODO: define shared variables for this instance
return {
renderValue: function(x) {
// create a chart and set options
// note that via the c3.js API we bind the chart to the element with id equal to chart1
var chart = c3.generate({
bindto: el,
data: {
json: x,
type: 'gauge',
},
gauge: {
label:{
//returning here the value and not the ratio
format: function(value, ratio){ return value;}
},
min: 0,
max: 100,
width: 15,
units: 'value' //this is only the text for the label
}
});
},
resize: function(width, height) {
// TODO: code to re-render the widget with a new size
}
};
}
});
Upvotes: 1
Views: 1046
Reputation: 8217
By deafult C3.js cannot add title to gauge chart, but you can do it with D3.js, which C3 is based on.
You have to add oninit callback into param object:
var chart = c3.generate({
oninit: function()
{
d3
.select(el)
.select("svg")
.append("text")
.attr("x", "50%" )
.attr("y", "100%")
.style("text-anchor", "middle")
.text("Your chart title goes here");
},
Upvotes: 2