I want to show the current value of chart into the pointer tool-tip, If there any way to add tool-tip please suggest, please check gauge screenshot
There is no built in method for this afaik. So you can use the kndoUI tooltip object like this:
In the gauge config, I assign a unique CSS color to the pointer so I can easily query for the SVG element
$("#gauge").kendoRadialGauge({
pointer: {
value: $("#gauge-value").val(),
color: "rgba(255,102,0,.999)"
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180
}
});
Then setup the tooltip widget so that onShow, the content is set to the current value of the gauge. The filter attribute points at any dom object with our unique fill color.
var tooltip = $('#gauge').kendoTooltip({
filter: '[fill="rgba(255,102,0,.999)"]',
position: "center",
content: $("#gauge").data("kendoRadialGauge").value(),
show: function(e) {
e.sender.options.content = $("#gauge").data("kendoRadialGauge").value();
e.sender.refresh();
}
}).data("kendoTooltip");
Here is a dojo DEMO
Related
I'm using FabricJS in my web application. As I draw shapes, I notice that the control widget for all the objects are rectangular. Can the shape of a control widget be modified to fit the actual shape of the object? Say, a circle with a circular control widget.
I went through the Controls Customization demo. But there is no option to modify the shape of a control widget.
I need to modify the shape of the control widgets for the following purpose:
In my application whenever an object is clicked, its fill colour is toggled between black and white. In this case(refer the image below), because the circle has a rectangular control widget, clicking the pointed pixel selects the circle instead of the rectangle. I also hide the control widget from appearing by using hasControls property. So, the user will not know anything about the control widget. So, is the shape of the control widget editable?
I don't think there is an easy way to do that with fabric.js without writing a whole bunch of extra code. Fabric.js always draws a rectangle bounding box and uses it for selection controls. However, since you're planning on hiding the controls anyway, it sounds like you might be better off using perPixelTargetFind.
When true, object detection happens on per-pixel basis rather than on
per-bounding-box
Here's a quick demo:
const canvas = new fabric.Canvas('c', {
preserveObjectStacking: true,
perPixelTargetFind: true
})
const circle = new fabric.Circle({
radius: 50,
left: 50,
top: 50,
stroke:'green',
fill: 'white',
hasControls: false,
hasBorders: false
})
const rect = new fabric.Rect({
width: 200,
height: 150,
left: 50,
top: 25,
stroke: 'green',
fill: 'black',
hasControls: false,
hasBorders: false
})
canvas.on('mouse:down', (e) => {
const obj = e.target
if (obj) {
obj.set({
fill: obj.fill === 'white' ? 'black' : 'white'
})
canvas.requestRenderAll()
}
})
canvas.add(circle, rect)
circle.bringToFront()
canvas.requestRenderAll()
body {
background: ivory;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>
I am working on a Gantt-like task display using HTML5 canvas, and the Konvajs canvas library.
Deconstructing a Gantt chart into its components leads me currently to a view as below. Here 1 is the list of tasks, 2 is the task bar area, 3 is a task bar, and 4 is a text cell.
For this question I am seeking code to construct 1 & 4. The data to be displayed will be delivered in plain JS objects with a nested list of tasks where each task has a number, name, assigned-to person name, start date, end date, days duration, and % complete.
So the requirement is to be able to construct a spreadsheet-like panel such as is seen on the left hand side of a Gantt chart.
I have something part developed which I shall post as an answer. However this seems like such as common need that I am hoping there is someone out there with code they can cut & paste into SO to lead the way.
Note: Gantt in sample image is from Vertex42.
So here is my own fumbling attempt at an approach. Can anyone improve upon it or am I going down the wrong road.
EDIT: I now have a fledgling component for drawing text into the spreadsheet-like cells, including the percent complete shading. To keep this answer uncluttered, this additional component is in this codepen.
// this is the object that defines our grid
//
var gridData = { name: 'grid1', width: 350, height: 400, rowHeight: 24, padding: 4, fill: 'azure', gridLineColor: '#ccc', header: {size: 16, fill: 'black', color: 'white' }, data: {size: 16, fill: 'azure', color: 'black' },
row: [
{ cells: // row 1
[
{ width: 50, text: 'Item', style: 'header'},
{ width: 240, text: 'Name', style: 'header'},
{ width: 60, text: 'Status', style: 'header'},
]
},
{ cells: // row 2
[
{ text: '1'},
{ text: 'Find tea pot'},
{ text: '100%'},
]
},
{ cells: // row 3
[
{ text: '2'},
{ text: 'Boil water'},
{ text: '60%'},
]
}
]
}
// From here on could be wrapped into a component that churns out grids. Maybe you pass in the id of the stage container
// and the data model you want to produce, etc.
// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 600, height: 300});
// Add a layer
var layer = new Konva.Layer({draggable: false});
stage.add(layer);
// make a main group for the grid, call it a panel. Assigning a name may be handy later
var panel = new Konva.Group({name: gridData.name});
layer.add(panel); // Add the panel to the layer
// a group has no visual properties. Add a background rect to hold the colour fill
var panelRect = new Konva.Rect({width: gridData.width, height: gridData.height, fill: gridData.fill})
panel.add(panelRect);
var topLeft = {x: 0, y: 0}; // Since we are drawing a grid, we need to compute the position of each cell
for (var i = 0; i < gridData.row.length; i = i + 1){
topLeft.x = 0; // reset x at start of each row
// iterate for each cell on the row
for (var j = 0; j < gridData.row[i].cells.length; j = j + 1){
var cell = new Konva.Rect({name: 'cellBg', // assign a name for later searching
x: topLeft.x, y: topLeft.y, // position as computed
width: gridData.row[0].cells[j].width, // use the first row from celldate to get the cell width
height: gridData.rowHeight, // grid has a uniform row height
stroke: gridData.gridLineColor, // and line colour
strokeWidth: 1, // use a set line width but you can add to the gridData object as needed.
fill: (i === 0 ? gridData.header.fill : gridData.data.fill), // use the given header text color
});
panel.add(cell);
// Add text to the cell. Note that if you wanted to be using alignments you would need to draw the text off-screen and
// get width/height of that text then use those values for positioning calculations. Once you have the rect size of the
// text, all the alignments are simple math.
var text = new Konva.Text({ x: topLeft.x + gridData.padding, // add padding to locate the text nicely into the cell
y: topLeft.y + gridData.padding,
// use the given text size
fontSize: (i === 0 ? gridData.header.size : gridData.data.size),
// use the given header text color
fill: (i === 0 ? gridData.header.color : gridData.data.color),
text: gridData.row[i].cells[j].text, // set the text value.
listening: false // stop text interfering with mouse events
});
panel.add(text);
cell.on('mouseover', function(evt){
var shape = evt.target;
$(shape).data('bgColor', shape.fill());
shape.fill('lime');
layer.draw();
})
cell.on('mouseout', function(evt){
var shape = evt.target;
shape.fill($(shape).data('bgColor'));
layer.draw();
})
topLeft.x = topLeft.x + gridData.row[0].cells[j].width; // offset the computed next cell x value by the width of the cell
}
topLeft.y = topLeft.y + gridData.rowHeight; // offset the computed next cell y value by the height of the row
}
layer.draw();
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
I have a kendo tooltip for a field, that can contain a very long values. The default position of the tooltip is on the left of the field, however, if there's not enough space for a tooltip on the left, it automatically switches to the right. The problem i have, that sometimes, there's not enough space for a tooltip on the right either. I want to somehow control the behaviour of the tooltip in that case, and position it the way i want. Is there a way?
I had a similar situation and found the code to dynamically place a tooltip. Perhaps this will help you.
var p = $(SomeWrapper).offset();
$(element).kendoTooltip({
top: p.top,
left: p.left,
frame: false,
callout: false,
show: function (e) {
e.sender.popup.element.css('margin-top', '-10px');
e.sender.popup.element.css('margin-left', p.left + 'px');
},
width: 500,
height: 300,
position: "bottom"
});
I am creating a jQuery mobile app using the mvc3. In this I have created the jqPlot pie chart.
It does not show colors for all slices of the pie chart,
i.e it sometimes show color for one slice even when there are four slices in the chart, and for the other three slices it shows white background instead of its defined slice background color.
I want it to show every time a full chart with solid color fill.
The image of jqPlot pie-chart:
http://i.stack.imgur.com/qH4o9.png
I am using this code:
jQuery(document).ready(function ($) {
var data = [
['Correct Answers', #Correct_Answer], ['Incorrect Answers', #Incorrect_Answer], ['Skipped Answers', #Skipped_Answer],
['Unseen Answers', #Unseen_Answer]
];
var plot1 = $.jqplot('score_chart', [data],
{
seriesColors: ["#83abc0", "#64d6f4", "#3399ff", "#03597a"],
highlightColors: ["#ADC7D5", "#99E3F6", "#78BAFE", "#568FA6"],
seriesDefaults: {
// Make this a pie chart.
fill: true,
renderer: $.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
padding: 5,
fill: true,
fillAndStroke: true,
showDataLabels: true
}
},
legend: { show: true, location: legendlocation },
});
});
Can anyone help me with this issue?
Your problem is not in this code. I did a sample from the code you have provided and it works fine. See here.
Are you sure you have all JavaScript and CSS files correctly imported?
I'm running jqPlot and for some reason the color-coded squares that should show up inside the pie renderer's legend are not appearing. I'm wondering if it has anything to do with the fact that I'm using twitter bootstrap? I'm not using any other css libraries.
var plot1 = jQuery.jqplot('chartdiv', [graphData],
{
grid: {
shadow: false,
background: '#FFFFFF',
},
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true,
padding: 20,
startAngle: 270
}
},
legend: {
show: true,
location: 'e',
fontSize: 11,
marginTop: 10,
}
});
Are you sure you are loading the CSS of the jqPlot correctly (i.e. the url/href is pointing into the right location)?
This is your code with jquery.jqplot.css loaded.
This is your code without the css.
This one is with both the jquery.jqplot.css and the bootstrap (downloaded without jQuery plugins and not linking the img folder that comes with the download). Here all appear correctly, thus you must double check the href of the jquery.jqplot.css.