I have a kendo linear gauge defined like this...
$("#gauge").kendoLinearGauge({
pointer: {
value: 4.5,
shape: "arrow"
},
scale: {
majorUnit: 1,
minorUnit: 1,
max: 6,
ranges: [
{
from: 0,
to: 1,
color: "#ffc700"
}, {
from: 1,
to: 2,
color: "#ff7a00"
}, {
from: 2,
to: 3,
color: "#c20000"
}, {
from: 3,
to: 4,
color: "#FF0000"
}, {
from: 4,
to: 5,
color: "#00FF00"
}, {
from: 5,
to: 6,
color: "#0000FF"
}
]
}
});
And this produces a gauge that looks like this...
What I want to do is replace the numeric labels with string values like "Unverified", "Verified", "Open", etc so that I end up with something more akin to this...
I'm fairly confident that I should be able to do this using a template, but I can't get even the simplest of examples (including the one shown below from the telerik website) to work.
$("#linear-gauge").kendoLinearGauge({
scale: {
labels: {
// labels template
template: "#= value #%"
}
}
});
Can anyone offer any suggestions?
Create a template function
template: function (rec) {
var label;
switch (rec.value) {
case 0:
label = 'un verified';
break;
case 1:
label = 'verified';
break;
default:
label = 'open';
}
return label;
}
http://dojo.telerik.com/#harsh/EgeVa
Related
I am using chartjs to show one month attendance data, what I want to acheive is to show each day data with different colors like Present, absent and leave. I want labels on top and by click on that label user should be able to hide/show that particular label data, below is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- HTML -->
<canvas id="chartJsDiv"></canvas>
<script>
function attendanceSummaryChart3(attendence)
{
var datasets = [];
var labels_data = [];
var num_of_hour = [];
var bar_colours = [];
var border_colr = [];
var real_data_count = attendence.length;
for (var i = 0; i < real_data_count; i++) {
var mydate = new Date(attendence[i].date);
var month = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"][mydate.getMonth()];
var str = mydate.getDate() + ' ' +month;
labels_data.push(str);
if(parseFloat(attendence[i].hours.replace(':','.')) < 6.00)
{
if(attendence[i].is_leave != null)
{
var applied_leave_type = attendence[i].is_leave_applied.leave_type.slug;
if(applied_leave_type == "work-from-home")
{
// Full hours in case work from home
num_of_hour.push('9');
bar_colours.push('RGB(25, 135, 84)');
border_colr.push('rgba(3, 126, 25, 0.85)');
// creating datasets
datasets.push({label: 'Work From Home', data: '9', backgroundColor: 'RGB(25, 135, 84)' });
}
else
{
// Leave applied
if(parseFloat(attendence[i].hours.replace(':','.')) == 0)
{
num_of_hour.push('-9');
bar_colours.push('RGB(25, 135, 84)');
border_colr.push('rgba(14, 8, 191, 0.8)');
// creating datasets
datasets.push({label: 'On Leave', data: '-9', backgroundColor: 'RGB(25, 135, 84)'});
}
else
{
num_of_hour.push(parseFloat(attendence[i].hours.replace(':','.')));
bar_colours.push('RGB(25, 135, 84)');
border_colr.push('rgba(14, 8, 191, 0.8)');
// creating datasets
datasets.push({label: 'Half Leave', data: parseFloat(attendence[i].hours.replace(':','.')), backgroundColor: 'RGB(25, 135, 84)'});
}
}
}
else
{
if(parseFloat(attendence[i].hours.replace(':','.')) == 0)
{
// If absent and no leave is applied
num_of_hour.push('-9');
bar_colours.push('RGB(255, 0, 0)');
border_colr.push('rgba(6, 108, 166, 0.8)');
// creating datasets
datasets.push({label: 'Absent (No Leave Applied)', data: '-9', backgroundColor: 'RGB(255, 0, 0)' });
}
else
{
// If present and didn't complete 06 hours in office
num_of_hour.push(parseFloat(attendence[i].hours.replace(':','.')));
bar_colours.push('RGB(255, 0, 0)');
border_colr.push('rgba(255, 99, 132, 1)');
// creating datasets
datasets.push({label: 'Present (Half Time)', data: parseFloat(attendence[i].hours.replace(':','.')), backgroundColor: 'RGB(255, 0, 0)' });
}
}
}
else
{
// Full hours
num_of_hour.push(parseFloat(attendence[i].hours.replace(':','.')));
bar_colours.push('RGB(0, 255, 0)');
border_colr.push('rgba(75, 192, 192, 1)');
// creating datasets
datasets.push({label: 'Present', data: parseFloat(attendence[i].hours.replace(':','.')), backgroundColor: 'RGB(25, 135, 84)' });
}
}
console.log(datasets);
const ctx = document.getElementById('chartJsDiv').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels_data,
datasets: [
{
label: ['Attendence'],
data: num_of_hour,
backgroundColor: bar_colours,
borderColor: border_colr,
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
},
});
}
</script>
I am attaching a screenshot below currently I only have one label but I want multiple labels based on multiple colors bar
You need to use a second dataset to achieve this:
Then you can fill null values in both datasets where you dont use the values of that dataset, so null values on the places where value is negative in positive dataset and vice versa in other one.
Then you can use the property skipNull to make it so the bars dont take up space:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, null, 3, 5, null, 3],
backgroundColor: 'green'
},
{
label: '# of Points',
data: [null, -11, null, null, -3, null],
backgroundColor: 'red'
}
]
},
options: {
skipNull: true
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>
should be this part
label: ['Attendence', 'newLabel', 'xxx'],
under
const ctx = document.getElementById('chartJsDiv').getContext('2d');
I've been trying to make the x-axis grid lines to be behind the content of a c3js bar chart.
I toyed with z-index which didn't work. I tried with opacity which didn't work either.
Here is the JSFiddle with the code I was using.
https://jsfiddle.net/chaitanya81/rvhb0fy4/1/
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
columns: [
['x', 'M','T','W','TH','F','SA','SU'],
['revenue', 200, 300, 200, 400, 500, 700, 600.56]
],
type: 'bar'
},
color: {
pattern: ["#ff9900"]
},
axis: {
x: {
type: 'category', // this needed to load string x value
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
grid: {
x: {
lines: [
{value: "M"},
{value: "T"},
{value: "W"},
{value: "TH"},
{value: "F"},
{value: "SA"},
{value: "SU"}
]
}
},
bar: {
width: {
ratio: 0.4
}
},
legend: {
hide: true
},
tooltip: {
contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value;
for (i = 0; i < data.length; i++) {
if (! (data[i] && (data[i].value || data[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(data[i].x) : data[i].x;
text = "<div id='tooltip' class='d3-tip'>";
}
value = valueFormat(data[i].value, data[i].ratio, data[i].id, data[i].index);
text += "<span class='value'>$" + value + "</span>";
text += "</div>";
}
return text;
}
},
transition: {
duration: 1000
}
});
Any one tried this with c3js charts?
Thanks in Advance.
You can set grid.lines.front to false
var chart = c3.generate({
bindto: '#chart',
data: {
...
},
grid: {
lines: {
front: false
}
}
});
https://jsfiddle.net/Yosephsol/bwu70xgq/
The grid line layer comes over the chart elements (bars) layer, and SVG the z-index is set by the order of the elements in the document.
You could use your regions to give the same effect. One way is
CSS
.border {
stroke: #000;
fill: transparent;
}
.whiteborder {
stroke: white;
fill: transparent;
}
Script
regions: [
{ axis: 'x', start: -0.5, end: 0, class: 'border' },
{ axis: 'x', start: -0.5, end: 1, class: 'border' },
{ axis: 'x', start: -0.5, end: 2, class: 'border' },
{ axis: 'x', start: -0.5, end: 3, class: 'border' },
{ axis: 'x', start: -0.5, end: 4, class: 'border' },
{ axis: 'x', start: -0.5, end: 5, class: 'border' },
{ axis: 'x', start: -0.5, end: 6, class: 'border' },
{ axis: 'x', start: -0.5, end: 6.5, class: 'whiteborder' },
],
The last line is to get rid of the top border (you can't style different borders of a rect differently - there's an alternative [hack] using stroke-dasharray, but it depends on the relative height and width of your regions)
Fiddle - https://jsfiddle.net/d611yq7x/
I am creating a line chart using c3.js. I want to remove the default indicator line to x-axis with the tooltip.
I have tried tooltip formatting but the line remains same.
How this can be done?
grid:{
focus:{
show:false
}
}
May be at that time when person answer this question config parameter not provided but now you can do it through above mention configuration. Reference http://c3js.org/reference.html#grid-focus-show
Example code below
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
grid:{
focus:{
show:false
}
}
});
Just override the following css property in .c3-xgrid-focus class:-
.c3-grid .c3-xgrid-focus {
visibility : hidden !important;
}
I could not quickly find a config parameter to turn this feature off in the api doc.
point: {
show: false
},
False to hide the points and true for show the points
Note:
Make sure that you are going to write this after the loading the data and along with your other settings in c3 Generate function
Here is the Example:
http://c3js.org/reference.html#point-show
In below code I have highlighted the code with a comment:
var chart = c3.generate({
bindto: '#CYCLE_CHART',
data: {
columns: [
["Cycletime"].concat(objCycle.cData), ["Downtime"].concat(objDowntime.dData), ["StdCycletime"].concat(objStdCycle.stdCData), ["StdLoadunloadtime"].concat(objStdLUtime.stdLUData),
],
type: 'spline',
types: {
Cycletime: 'bar',
Downtime: 'bar'
},
names: {
Cycletime: 'Cycle time',
Downtime: 'Load time',
StdCycletime: 'Std Cycle time',
StdLoadunloadtime: 'Std Load time'
},
},
axis: {
x: {
label: {
text: 'Cycles',
position: 'outer-center'
},
max: 10,
min: 1,
},
y: {
label: {
text: 'Seconds',
position: 'outer-middle'
},
max: Y_axis,
min: 1,
}
},
// Here!
point: {
show: false
},
tooltip: {
show: true
}
});
According to BonifatiusK´s comment, you should hide them by editing the chartOptions.
{
tooltip: {
show: false
}
}
Overriding CSS properties of c3 is not a good idea.
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.
being new to cytoscapeweb 2, i am following one of the provided example in order to learn how to use the API.
i cant make it work and firebug reports the following message:
Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)
var n = this.nodesGroup.getBBox();
in my html document, the cytoscapeweb div is embedded in a jquery tab widget (just to provide context)
somewhere in my.html
<div id="tabs">
<ul>
<li>Interactors Selection</li>
<li>Interactome Builder</li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
<div id="cy"></div>
</div>
</div>
and in foo.js
function cytoscapeInit() {
alert ("intializing cytoscape");
// create a mapper for node size
var nodeSizeMapper = {
continuousMapper: {
attr: {
name: "weight",
min: 0,
max: 100
},
mapped: {
min: 15,
max: 30
}
}
};
// call cytoscape web on the `cy` div
$("#cy").cytoscapeweb({
// define the elements in the graph
elements: {
nodes: [
{ data: { id: "a", weight: 43 }, classes: "foo" },
{ data: { id: "b", weight: 2 }, classes: "bar" },
{ data: { id: "c", weight: 88 }, classes: "foo bar" }
],
edges: [
{ data: { id: "ab", source: "a", target: "b", weight: 32 }, classes: "foo" },
{ data: { id: "bc", source: "b", target: "c", weight: 12 }, classes: "bar baz" },
{ data: { id: "ca", source: "c", target: "a", weight: 96 }, classes: "baz foo" },
{ data: { id: "ac", source: "a", target: "c", weight: 65 }, classes: "bar" }
]
},
// define the layout to use
layout: {
name: "preset",
positions: {
"a": { x: 30, y: 30 },
"b": { x: 125, y: 131 },
"c": { x: 200, y: 50 }
},
fit: false,
stop: function(){
cy.reset();
cy.center();
}
},
// define the visual style (like css) of the graph
style: {
selectors: {
"node":{
shape: "ellipse",
fillColor: "#888",
height: nodeSizeMapper,
width: nodeSizeMapper,
labelText: {
passthroughMapper: "id"
}
},
".yay": {
fillColor: "red",
lineColor: "red",
targetArrowColor: "red"
},
"edge": {
lineColor: "#ccc",
targetArrowColor: "#ccc",
width: {
continuousMapper: {
attr: {
name: "weight"
},
mapped: {
min: 2,
max: 5
}
}
},
targetArrowShape: "triangle"
},
"node:selected": {
fillColor: "#333"
},
"edge:selected":{
lineColor: "#666",
targetArrowColor: "#666"
}
}
},
// define the callback for when cytoscape web is ready
ready: function( cy ){
window.cy = cy;
}
});
Did i miss something obvious?
If so, all apologies.
(1) Don't put alerts in your code like that even when you're testing. It can break asynchronous code, like initialising Cytoscape Web or doing an AJAX call. Use console.log() instead.
(2) You're probably hiding the Cytoscape Web div, cy, with the tabs. You shouldn't be using display: none;, because the Cytoscape Web viewport will then be 0x0 px. Try something like position: absolute; left: -9999px; or similiar for hiding. This entails modifying whatever class name jQuery uses for hidden tabs (probably .ui-state-hidden or something similar).
(3) I'll look into making the renderer code more tolerant of hidden Cytoscape Web divs.
I have a better solution to this problem:
Execute jquery tab just after all of the graphs are loaded.
http://cytoscape.github.io/cytoscape.js/#core/events/cy.ready
for(var t = 0, tot=pageList.length; t<tot; t++) //draw graph for all pages
{
var currPage = pageList[t];
getData(currPage);
}
function getData(currPage)
{
//initiate graph, do stuff...
//graph ready
window[currPage + "Container"].ready(function(e)
{
if (currPage.indexOf(lastPage) != -1)//executetabsafterlastgraphisdrawn
{
setTabs();
}
});
}