I'm using flot as a plotting javascript utility.
Here is the sample I'm using which allows toggle...
https://github.com/flot/flot/blob/master/examples/series-toggle/index.html
What I want to achieve is to move the legend to the right side of the plot as having several curves causes the legend to grow big and block the view.
I tried the "aboveData" option as the api suggested:
$.plot("#placeholder", data, {
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0
},grid: {show:true, aboveData:false},
});
It did not do anything.
Then I tried changing the css to add a "left" property to the table:
.legend table {
border-spacing: 5px;
left:800px;
}
which does move the legend table to right but there is an opaque white div container left behind.
Any idea how to remove it?
You method kinda works if you use the parent legend div instead of the table:
.legend {
position: absolute;
left:800px;
}
This is probably not the best way to achieve your goals though. flot provides the ability to relocate the legend to a container (div) of your choice. So to put the legend right of the plot, I'd do:
<div id="flotGraph" style="width: 400px; height: 400px; float: left"></div>
<div id="legendContainer" style="float: left"></div>
And then use the legend container property:
$.plot("#placeholder", data, {
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0
},
legend: {
container: $('#legendContainer')
}
});
Here's an example.
Related
I created a multiple line chart vertically in order with Chart.Js. Now I want to add vertical scroll, so that I can view other other graph too by scrolling vertically.
I don't see a option for this in the docs. Any ideas?
What type of vertical scroll are you trying to achieve? If you are trying to scroll the whole chart vertically, why not just put the canvas element used by Chart.JS inside of a div.
E.g.
<div id="chartContainer">
<canvas id="myChart"></canvas>
</div>
And then add CSS giving heights to canvas and a smaller height / overflow-y to the container.
#chartContainer{ overflow: scroll, height: 300px; } #myChart{ height: 600px; }
Edit 1
The snippet above works for me. Without seeing a pen, it is difficult to understand what the specific problem with your chart is and how this snippet works differently from your expected behaviour.
Without a pen or more detail I'm only able to guess, but is the problem that you have added the overflow property to the container, but that no scroll occurs (i.e. the full chart is shown)?
If so, it may just be that the chart's size is smaller than the container's overflow boundary (which can easily be tested by inspecting the canvas and container elements in your browser to see whether the canvas is larger than the container). If this is the case, and you would like to increase the size of the chart (so as to force the overflow to occur whenever the page is viewed), you can do so using the guidance in the chart.js documentation.
Basic example of such config below:
HTML, separating scroll container and chart container to allow separate sizing of the chart element:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div id="scrollContainer">
<div id="chartContainer">
<canvas id="myChart" ></canvas>
</div>
</div>
CSS, adding size to the chartContainer to size the chart:
#scrollContainer{
height: 300px;
overflow-y: auto;
}
#chartContainer{
height: 600px;
width: 500px;
position: relative;
}
JavaScript chart object, with the aspect ratio property set to false:
new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: [1500,1600,1700,1800,1900,2001],
datasets: [{
data: [86,114,106,86,114,106],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,282,350,411],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,168,170,178],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}
]
},
options: {
maintainAspectRatio: false
}
});
demo:
new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: [1500,1600,1700,1800,1900,2001],
datasets: [{
data: [86,114,106,86,114,106],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,282,350,411],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,168,170,178],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}
]
},
options: {
maintainAspectRatio: false
}
});
#scrollContainer{
height: 300px;
overflow-y: auto;
}
#chartContainer{
height: 600px;
width: 500px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div id="scrollContainer">
<div id="chartContainer">
<canvas id="myChart" ></canvas>
</div>
</div>
I'm trying to display a Chart.js graph inside a <canvas>, and this canvas is wrapped inside a <div>.
I want the graph to be responsive, have a fixed height of 700px and a width of 80% of the page's width. On top of all, I want this graph to be centered inside the page ! My code is below
HTML
<div class='chartContainer'>
<canvas id="canvas"></canvas>
</div>
CSS
.chartContainer{
text-align: center;
}
canvas{
width: 80% !important;
height: 700px !important;
margin: 0;
}
JAVASCRIPT
new Chart(canvasContext, {
type: 'line',
data: {
labels: hourLabels,
datasets: dataToRender
},
options: {
responsive: true,
maintainAspectRatio: false
});
My problem is : I can't center it, the <div> takes the whole page but the <canvas> seems to have a margin applied to it even though it doesn't appear inside the DOM console...
Screenshot of the apparent margin
Can anyone point my problem ? Thank you very much :-)
Put this in your CSS
canvas{
margin: 0 auto;
}
I am using KendoUI's radial gauge, and I want to add a label right between the 0 tick and the 300 tick. The initalization takes in an object that can have a label attribute but that configures the actual tick label whereas I want to add a new word centered in the middle such as "Pounds", "Miles", etc.
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge
$("#gauge").kendoRadialGauge({
pointer: {
value: 37.4
},
scale: {
startAngle: -30,
endAngle: 210,
minorUnit: 5,
majorUnit: 25,
min: 0,
max: 100,
}
});
Here's a fiddle to try it with: http://jsfiddle.net/sThK3/104/
UPDATE 1/25/2017:
It is certainly possible, but even after reading their code I don't understand where the labels are coming from: http://demos.telerik.com/kendo-ui/radial-gauge/car-dashboard
Unfortunately it appears like your objective may not be feasible in the way you were hoping for.
After looking more closely at telerik's radial gauge example you linked I found an image resource used for this: http://demos.telerik.com/kendo-ui/content/dataviz/dashboards/car-dashboard.png
This image contains the labels you're referring to of {k/mh, x1000 RPM} and the images for the gas/temp on the right.
Floating a label over the gauge may be an alternative? Or building your own background-image that will contain the label you wanted. :(
That would be referred to in your CSS like follows:
#gauge-container {
margin: 0 auto;
overflow: hidden;
width: 614px;
height: 324px;
background: transparent url("../content/dataviz/dashboards/car-dashboard.png") no-repeat 50% 50%;
}
replacing ../content/dataviz/dashboards/car-dashboard.png with your image that has the right label in it for you
I'm going to see if I can figure out how to float a label on this using your jsfiddle example.
EDIT: I got the goods for you now. Looks like by using the appropriate css you can float a label in the middle of your radial.
I accomplished this with the following:
JS:
$("#gauge").append("<label>Test</label>");
CSS:
label {
margin-left: 50%;
margin-right: 50%;
float: center;
}
Im using a highchart pie chart to create a donut chart but would like the legend icons to be circles any ideas??? Below is the mockup and the actual web version. Thanks...
In recent versions of Highcharts you can use symbolWidth: width and symbolRadius: width/2 inside legend: {}.
See this JSFiddle demonstration: http://jsfiddle.net/Wzs9L/
I prepared solution based on pie chart. Legend is generated on data points, automatically as HTML list. Then all elements gets colors from series, and use CSS3 to generate circle object (border-radius). As a result you need to add click event.
http://jsfiddle.net/N3KAC/1/
$legend = $('#customLegend');
$.each(chart.series[0].data, function (j, data) {
$legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');
});
$('#customLegend .item').click(function(){
var inx = $(this).index(),
point = chart.series[0].data[inx];
if(point.visible)
point.setVisible(false);
else
point.setVisible(true);
});
CSS:
.symbol {
width:20px;
height:20px;
margin-right:20px;
float:left;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.serieName {
float:left;
cursor:pointer;
}
.item {
height:40px;
clear:both;
}
Another way to achieve this can be overriding the style using CSS.
Simply add class below to your stylesheet:
.highcharts-legend-item rect {
width: 12px;
height: 12px; /* height = width */
rx: 50%;
ry: 50%;
}
and this would override the default style for the SVG Rectangle element.
There's quite an easy fix. Just set the following properties in chartoptions:
chartoptions.legend.symbolHeight = 12;
chartoptions.legend.symbolWidth = 12;
chartoptions.legend.symbolRadius = 6;
For further reference, check highcharts api documentation.
Checkout this jsFiddle.
I'm trying to show the progress of a fundraiser using some kind of donut chart. Many people use a thermometer style or progress bar for that but I really would like to get as closer as possible of something like this:
After I spent a lot of time researching I came up with a very easy solution to plot the donut using flot, here is the demo: http://jsfiddle.net/6b7nZ
$(function () {
var data = [
{ label: "Donated", data: 20, color: '#f00' },
{ label: "Goal", data: 78, color: '#D3D3D3' }
];
$.plot($("#donut"), data,
{
series: {
pie: {
innerRadius: 0.7,
show: true,
label: { show: false }
}
},
legend: { show: false }
});
});
What I'm missing now is a way to add the centered label.
I don't have to say that if anyone can point me to a jQuery plugin or something like that it will be even better.
Well, something like this could work. I would think that you would want to set your goal to 100, however, to make the donut look like it is reflecting the correct percentage.
HTML
<div id="donutHolder">
<div id="donut"></div>
<span id="donutData"></span>
</div>
CSS
#donutHolder {
width: 350px;
height: 350px;
text-align: center;
line-height: 350px;
font-size: 80px;
color: #f00;
position: relative;
}
#donut {
width: 100%;
height: 100%;
}
#donutData {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}
Added JQuery
$("#donutData").text(Math.round(data[0].data/data[1].data*100)+"%");
I created this one useful (for me) cause this solution lets you set degrees values inside class by using less
<div class="radial_meter radial-222">
<span class="first"><em></em></span>
<span class="second"><em></em></span>
</div>
you can see a DEMO