I'm using flot to display some data on a bar graph. But my data isn't displaying for some reason, and I have no idea why.
My data series is correct as far as I can see, but it still won't show.
JsFiddle: http://jsfiddle.net/9jhpyne4/1/
Code:
var plotData = [
[1, 12.35],
[2, 34.6],
[3, 56.7],
[4, 4.35]
];
$.plot($("#main-chart"), plotData, {
bars: {
show: true,
lineWidth: 0,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.1
}]
}
}
});
Data which you pass to plot function needs to have some metadata (like label and color):
var data = [
[1, 12.35],
[2, 34.6],
[3, 56.7],
[4, 4.35]
];
var dataset = [{ label: "a label", data: data, color: "red" }];
https://jsfiddle.net/9jhpyne4/3/
The console throw an error regarding your #main-chart width & height as invalid.
Changing your width & height from percentage to pixel based seems to fixed the error.
HTML
<div id="main-chart" style="width:200px;height:200px;"></div>
Here's your updated fiddle
You need to specify the width and height.
<div id="main-chart" style="width:200px;height:200px;"></div>
And You need to change a little your plotData variable to:
var plotData = [
[[1,0], [1, 12.35]],
[[2,0], [2, 34.6]],
[[3,0], [3, 56.7]],
[[4,0], [4, 4.35]]];
You can see a complete example here: here
Related
I would like to find an approach on how to draw 2 lines in ECharts and fill up the space between them like this:
So that each line has it's own color. Depending on order of lines - area is filled into one color or another (see image).
Is there a native way of doing it? I found that some people are mentioning extensions, but nobody is providing any kind of instructions on how to write them from scratch.. Nor I found any examples on official documentation page. I would appreciate if somebody could point me to correct direction on how to achieve this goal.
In the worst case - I would accept other libraries if they have such very needed option.
The best I could do is this:
var chartOptions = {
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'value'
}],
series: [{
type: "line",
data: [[0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 2]],
}, {
type: "line",
data: [[0, 2], [1, 3], [2, 4], [3, 8], [4, 5], [5, 0]],
}],
};
var aChart = echarts.init(document.getElementById('aGraph'));
aChart.setOption(chartOptions);
I've used areaStyle to fill the area between the axisLine and the data. I would try to solve this issue by adding the green/yellow areaStyle to the green series, adding a pink areaStyle to the red series, and then adding a white areaStyle to a new series made up from the min values from the other two series. Combined with a lineStyle with a width of 0, you could mostly achieve the look in the sketch, however, the minimum series fill would probably also obscure the interior grid lines.
I want to set a custom color for missing values in plotly javascript and cannot figure out how.
In the following example the missing value is represented by null in the array given to the color property.
<script src="https://cdn.plot.ly/plotly-latest.js" ></script>
<div id="myDiv" style="width:100%;height:100%" ></div>
<script>
var color_scale = [[0, "#ff0000"], [1, "#00ff00"]];
var trace = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
marker: {
color: [1, 2, 3, null],
colorscale: color_scale
},
mode: 'markers',
type: 'scatter'
};
var data = [trace];
Plotly.newPlot('myDiv', data);
</script>
If I understand correctly, you want to break out of the defined color-scale from #ff0000 to #00ff00?
in the marker.color-array, you can also specify strings, which can contain any way of defining a color: hex-notation, name, rgb, ...
So this should be along the lines of what you are looking for:
color: [1,2,3,'#0000ff'],
Is it possible to have multiple charts inside each other:
Please check js fiddle for "single" and what I would like is to have that as a first one, inside second one and so on...
var data = [
{
label: "title 1",
value: 32,
color: "#444334"
}, {
label: "title 2",
value: 51,
color: "#f0f0f0"
}, {
label: "title 3",
value: 17,
color: "#8ba43a"
}];
Check image attached (sorry about bad graphic)
Thanks.
You can do this with jqplot or chart.js
An example from jsplot:
$(document).ready(function(){
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
var plot3 = $.jqplot('chart3', [s1, s2], {
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: true,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead.
dataLabels: 'value'
}
}
});
});
According to the jqplot page, it requires minimum of jquery 1.9.1, along with it's main jqplot, plus jqplot pieRenderer/donutRenderer scripts and the jqplot css.
The code above will produce something like this:
You can add another series, which will create a third circle.
i'm new to highcharts.
I already browse in highcharts example. but, every time I look for the sample, it came with the column bar chart like this :
All I want is like this :
But I dont know how. Maybe you can help me figured it out.
Thank you.
You can simply set x/y pairs for each of points. Then set column.grouping to false: http://jsfiddle.net/27u9zuhj/
plotOptions: {
column: {
grouping: false
}
},
series: [{
name: 'John',
data: [ [0, 5], [1, 3], [2, 4]]
}, {
name: 'Jane',
data: [ [3, 2], [4, 2]]
}]
I want to create a flot bar chart that will display true and false figures, like my example below.
I want the true bar to be green and the false one to be red. I've tried using the colors array but it doesn't work properly.
My current code:
var options3 = {grid: {hoverable: true},series: {bars: {show: true,barWidth: 0.6,align: "center"}},yaxis: {min:0,tickSize: 1},xaxis: {mode: "categories",ticks: [ [0, 'True'], [1, 'False'] ],tickLength: 0},tooltip: true,tooltipOpts: {content: '%y Votes', defaultTheme: false}, colors: [ "#FF0000", "#00FF00"]};
var data3 = [ [0, 3], [1, 9] ];
$(document).ready(function() {
$.plot('#graph3', [data3], options3);
});
Example: http://joshblease.co.uk/Maths/Admin/chart.php#graph3
The problem is that you have only one data series, which is assigned the first color in your array (red). You will get the result you want if you replace
var data3 = [ [0, 3], [1, 9] ];
with
var data3 = [
[[0, 3]],
[[1, 9]]
];
Then use data3 in the plot instead of [data3]. See the jsFiddle.