choose labels to show inside legend of jqplot - limit

the jqPlot displays labels of ALL the series it has on the graph. I want to show only some of the series on the labels. The thing is that some of lines are just there to show proper limit for values (visually) - some points are above, some below. For now I simply put empty string for labels, but the label point in the label area is still there - it doesn't look good.
Here is the code:
series:[
{lineWidth:1, color: '#d8d8d8', showMarker: false},
{lineWidth:0.5, color: 'red', showMarker: false},
{lineWidth:1, color: '#d8d8d8', showMarker: false},
{lineWidth:1, color: '#d8d8d8', showMarker: false},
{lineWidth:1, color: '#76a4e8', showMarker: false},
{lineWidth:1, color: '#d8d8d8', showMarker: false},
{lineWidth:0.5, color: 'red', showMarker: false},
{lineWidth:1, color: '#d8d8d8', showMarker: false},
{lineWidth:1, color: '#d8d8d8', showMarker: false},
{
lineWidth:0.5,
color: 'green',
rendererOptions: {animation: {speed: 1500}},
markerOptions:{color: 'green',
style:'filledSquare'},
},
//here are the series with real values - they come from php in red or orange
],
legend:{
renderer: jQuery.jqplot.EnhancedLegendRenderer,
show: true,
hideZeros: true,
location: 'e',
//labele with names
//labels: [ 'SD+4', 'SD+3', 'SD+2', 'SD+1','Perfect value', 'SD-1', 'SD-2', 'SD-3', 'SD-4', 'Real Values', 'Vales to high'],
//labele with empty points
labels: [ ' ', ' ', ' ', ' ','Perfect value', ' ', ' ', ' ', ' ', 'Real Values', 'Vales to high'],
placement: 'outsideGrid'
}
As you see it doesn't look too good. Only Perfect value, real values, and values too high/low should be shown.

Related

Executing var video_overview = $('#upl_overview_id').summernote('code'); returns object not html text

My initialization:
function init_video_summernote(id_val,my_placeholder,my_width,my_height)
{
$( id_val ).summernote('destroy');
$( id_val ).summernote(
{
placeholder: my_placeholder,
//height: my_height,
//width: my_width,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
lineHeights: ['1.0', '1.2', '1.4', '1.5', '1.6', '1.8', '2.0', '3.0'],
fontNames: [
'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
'Helvetica Neue', 'Impact', 'Lucida Grande',
'Tahoma', 'Times New Roman', 'Verdana'
],
styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
lang: {
'en-US': {
font: {
bold: 'Bold',
italic: 'Italic',
underline: 'Underline',
clear: 'Remove Font Style',
height: 'Line Height',
name: 'Font Family'
},
image: {
image: 'Picture',
insert: 'Insert Image',
resizeFull: 'Resize Full',
resizeHalf: 'Resize Half',
resizeQuarter: 'Resize Quarter',
floatLeft: 'Float Left',
floatRight: 'Float Right',
floatNone: 'Float None',
shapeRounded: 'Shape: Rounded',
shapeCircle: 'Shape: Circle',
shapeThumbnail: 'Shape: Thumbnail',
shapeNone: 'Shape: None',
dragImageHere: 'Drag image here',
dropImage: 'Drop image',
selectFromFiles: 'Select from files',
url: 'Image URL',
remove: 'Remove Image'
},
link: {
link: 'Link',
insert: 'Insert Link',
unlink: 'Unlink',
edit: 'Edit',
textToDisplay: 'Text to display',
url: 'To what URL should this link go?',
openInNewWindow: 'Open in new window'
},
table: {
table: 'Table'
},
hr: {
insert: 'Insert Horizontal Rule'
},
style: {
style: 'Style',
normal: 'Normal',
blockquote: 'Quote',
pre: 'Code',
h1: 'Header 1',
h2: 'Header 2',
h3: 'Header 3',
h4: 'Header 4',
h5: 'Header 5',
h6: 'Header 6'
},
lists: {
unordered: 'Unordered list',
ordered: 'Ordered list'
},
options: {
help: 'Help',
fullscreen: 'Full Screen',
codeview: 'Code View'
},
paragraph: {
paragraph: 'Paragraph',
outdent: 'Outdent',
indent: 'Indent',
left: 'Align left',
center: 'Align center',
right: 'Align right',
justify: 'Justify full'
},
color: {
recent: 'Recent Color',
more: 'More Color',
background: 'Background Color',
foreground: 'Foreground Color',
transparent: 'Transparent',
setTransparent: 'Set transparent',
reset: 'Reset',
resetToDefault: 'Reset to default'
},
shortcut: {
shortcuts: 'Keyboard shortcuts',
close: 'Close',
textFormatting: 'Text formatting',
action: 'Action',
paragraphFormatting: 'Paragraph formatting',
documentStyle: 'Document Style'
},
history: {
undo: 'Undo',
redo: 'Redo'
}
}
}
} );
}
When I execute this code to get the html to store in a subsequent db insert.
var video_overview = $('#upl_overview_id').summernote('code');
console.log('OVERVIEW:'+video_overview);
This snippit of code is called from within a Dropzone sending event function.
I get the following in the console output
OVERVIEW:[object Object]
Instead of the text to store in the DB any ideas what I am missing here?
Never mind this was caused by including summernote.js more than once

How to change path fill color for Kendo bar / line chart?

Click here for demo - https://dojo.telerik.com/#rikinshah/EQiMupoG
I have lots of elements for navigation in headers and icon buttons in footer. all of them are using svg > path elements.
I want to change color for all path elements except Kendo Chart which also contains path elements.
In css I use this to make all to use same color :
path {
fill: #4b4c4c
}
but this also changes color for Kendo chart background.
I tried using :not selector for div ID to fill path for kendo and also tried
chartArea: {
background: "#4b4c4c",
},
path: {
fill: "#4b4c4c"},
fill: {
color: "4b4c4c"}
none of this changes path for svg element in kendo graph.
<div id="kendoChart" class="demo-section k-content wide" style="margin-left: -3px;">
<div id="chart"></div>
</div>
function createChart() {
$("#chart").kendoChart({
theme: "flat",
chartArea: {
background: "transparent",
},
legendItemClick: function (e) {
e.preventDefault();
},
seriesDefaults: {
type: "column",
width: 90,
gap: 1,
},
legend: {
position: "bottom",
spacing: 15,
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
},
series: [{
data: [parseFloat(($('#room-revenue1').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue2').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue3').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue4').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue5').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue6').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue7').text()).replace(/,/g, "")), ],
name: "Room Revenue",
color: "#4472c3",
width: 500,
tooltip: {
visible: true,
template: "#= series.name #: #= kendo.format('{0:C2}',value) #",
font: "12px sans-serif",
},
}, {
type: "line",
data: [$('#rooms-sold1').text(),
$('#rooms-sold2').text(),
$('#rooms-sold3').text(),
$('#rooms-sold4').text(),
$('#rooms-sold5').text(),
$('#rooms-sold6').text(),
$('#rooms-sold7').text()],
name: "Room Sold",
color: "#12ccbe",
axis: "Rooms Sold",
width: 2,
markers: { visible: true },
tooltip: {
visible: true,
template: "#= series.name #: #= value #",
font: "12px sans-serif",
},
}],
render: function (e) {
var el = e.sender.element;
el.find("text:contains(Room Revenue)")
.parent()
.prev("path")
.attr("stroke-width", 3);
el.find("text:contains(Room Sold)")
.parent()
.prev("path")
.attr("stroke-width", 0);
},
valueAxes: [
{
visible: false,
majorGridLines: {
visible: true,
width: 0.5,
dashType: "solid",
color: "#ededed"
}
},
{
name: "Rooms Sold",
color: "#4e4141",
visible: false,
line: { visible: false },
majorGridLines: {
visible: false
},
}],
categoryAxis: {
categories: [($('#date1').text()).substring(0, 3),
($('#date2').text()).substring(0, 3),
($('#date3').text()).substring(0, 3),
($('#date4').text()).substring(0, 3),
($('#date5').text()).substring(0, 3),
($('#date6').text()).substring(0, 3),
($('#date7').text()).substring(0, 3)],
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
majorGridLines: {
visible: false,
},
},
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart(), 400);
I want to keep kendo chart background color / path fill color unchanged.

How to set different color on annotations?

I want to give different color and auraColor to annotations on google combo chart. Anyone can say if is it posible and how?
This is current options;
annotations: {
stemColor: 'none',
textStyle: {
fontName: 'Arial',
color: 'white',
auraColor: 'grey',
fontSize: 11,
alwaysOutside: true,
}
},
Also i've tryed this but it doesn't work;
annotations: {
0:{stemColor: 'none',
textStyle: {
fontName: 'Arial',
color: 'white',
auraColor: 'grey',
fontSize: 11,
alwaysOutside: true
}},
1:{stemColor: 'none',
textStyle: {
fontName: 'Arial',
color: 'black',
auraColor: 'red',
fontSize: 11,
alwaysOutside: true,
}},
2:{stemColor: 'none',
textStyle: {
fontName: 'Arial',
color: 'blue',
auraColor: 'white',
fontSize: 11,
alwaysOutside: true,
}}
},
Thanks in advance
try using the series option...
series: {
0:{
annotations: {
stemColor: 'none',
textStyle: {
fontName: 'Arial',
color: 'white',
auraColor: 'grey',
fontSize: 11,
alwaysOutside: true
}
}
},
1:{
annotations: {
stemColor: 'none',
textStyle: {
fontName: 'Arial',
color: 'black',
auraColor: 'red',
fontSize: 11,
alwaysOutside: true,
}
}
},
...

Legend does not come in bold in firefox and chrome for highcharts with pie

Below is my code for a pie chart:
legend: { margin: 1, padding: 4, layout: 'horizontal', align: 'center', verticalAlign: 'bottom', itemWidth: 189, borderWidth: 0, enabled: true, useHTML: false, labelFormatter: function () { return (this.y == 0 || this.y == null || this.y == '') ? "" : (this.name); }, itemMarginBottom: 8, itemStyle: { color: '#333333', fontWeight: 'bold', fontFamily: 'Arial', fontSize: '10px', lineHeight: '15px' }, symbolWidth: 11, x: -7, symbolPadding: 8 }
However the legend text is not bold till i change the font to 10.5 which i think is too big.
Below is the html generated in FF:THis happens in both Chrome and Firefox. IE is working fine.
<text x="19" y="13" style="font-family:Arial;font-size:10.4px;cursor:pointer;color:#333333;font-weight:bold;line-height:15px;fill:#333333;" text-anchor="start" zIndex="2">
Is there something I can do about this?
For me it is bolded, compare: http://jsfiddle.net/3bQne/233/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container2'
},
legend: {
margin: 1,
padding: 4,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemWidth: 189,
borderWidth: 0,
enabled: true,
useHTML: false,
labelFormatter: function () {
return (this.y == 0 || this.y == null || this.y == '') ? "" : (this.name);
},
itemMarginBottom: 8,
itemStyle: {
color: '#333333',
//fontWeight: 'bold',
fontFamily: 'Arial',
fontSize: '10px',
lineHeight: '15px'
},
symbolWidth: 11,
x: -7,
symbolPadding: 8
},
series: [{
showInLegend: true,
type: 'pie',
data: [3.45, 4.21, 5.11]
}]
});
And image:

How to label my bar chart with numbers?

I am using gchart and I am trying to use markers to label my bar char with numbers. So that ever bar has a number value on top of it.
I tried
markers: [$.gchart.marker('number', 'red', -1)]
markers: [$.gchart.marker('number', 'red', -1, -1)]
markers: [$.gchart.marker('number', 'red', -1, 'every')]
markers: [$.gchart.marker('number', 'red', -1, 'every1')]
I can only make it appear on the one bar. I want it to show up on every bar.
What am I doing wrong?
See it has no label on the first one.
https://chart.apis.google.com/chart?chs=400x500&cht=bvg&chd=t:55|47&chco=FDFF0F,1FEEFF&chm=N,ff0000,-1,-1,10,0&chdl=test2|test1&chdlp=b|l&chxt=x,y&chxl=0:|atest
$('#id').gchart({
type: 'barVertGrouped',
markers: [$.gchart.marker('number', 'red',-1)],
height: 500,
width: 400,
series: data, // xml data from server.
legend: 'bottom',
extension: { chxt: 'x,y', chxl: '0:|atest' }
});
For non-stacked bar graphs, you need to add a marker per series:
$('#id').gchart({
type: 'barVertGrouped',
markers: [
$.gchart.marker('number', 'red',0),
$.gchart.marker('number', 'blue',1)
],
height: 500,
width: 400,
series: [
$.gchart.series('test1', [47], 'blue'),
$.gchart.series('test2', [60], 'red')
],
legend: 'bottom',
extension: { chxt: 'x,y', chxl: '0:|atest' }
});

Resources