i am trying to plot a funnel chart using flot.js library ,taking an external json file as input but although the json is fetched it is not working as a datasource and the chart is not being plotted.
guys i have a json file SAMPLE.JSON
[
{
"data": 10,
"label": "a"
},
{
"data": 81,
"label": "b"
},
{
"data": 20,
"label": "c"
},
{
"data": 90,
"label": "d"
}
]
but it not working as a datasource for the Plot function of the folt.js library
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Funnel Charts</title>
<link href="css/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flot.funnel.js"></script>
<script type="text/javascript">
$(function() {
var data;
$.getJSON("sample.json", function(json) {
data=json;
console.log(data);
});
var placeholder = $("#placeholder");
$.plot('#placeholder', data, {
series:{
funnel: {
show: true,
stem: {
height: 0.2,
width: 0.4
},
margin: {
//right: 0.15
},
label:{
show: true,
align: "center",
threshold: 0.05,
formatter: labelFormatter
},
highlight: {
opacity: 0.2
}
},
},
grid: {
hoverable: true,
clickable: true
}
});
placeholder.bind("plotclick", function(event, pos, obj) {
if (!obj) {
return;
}
alert(obj.series.label + ": " + obj.series.value);
});
function labelFormatter(label, series) {
return "<div style='font-size:11pt; text-align:center; padding:2px; color:#fff;'>"+series.value+"</div>";
}
});
</script>
</head>
<body>
<div id="header">
<h2 style='text-align:center'>Funnel Charts</h2>
</div>
<div id="content">
<h3 id="title"></h3>
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="length:250px,width:250px"></div>
</div>
</div>
</body>
</html>
Your data is in the wrong format. From the plugin documentation, the expected data format is (your data isn't in an array of arrays):
var data = [
{
label: "a",
data: [ [ 1, 10 ] ]
},
{
label: "b",
data: [ [ 1, 81 ] ]
},
{
label: "c",
data: [ [ 1, 20 ] ]
},
{
label: "d",
data: [ [ 1, 90 ] ]
}
];
This JS Fiddle has a working example of a funnel chart with your data.
Related
I use Chart.js v4.2.1
<html>
<head>
<meta charset="utf-8" />
<title>Bar chart</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<canvas id="barchart"></canvas>
</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById('barchart');
var chart = new Chart(canvas,
{
type: 'bar',
data:
{
labels: ["Audi", "VW", "KIA"],
datasets:
[
{
label: "Cars",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f"],
data: [2601, 4769, 602],
},
],
},
});
</script>
</html>
To get number of bars I execute chart.data.datasets[0].data.length and get 3.
To get the Y-value for the first bar I do chart.data.datasets[0].data[0] and get 2601.
How do I get the X-values (X-coordinates) for the bars?
(I am not interested in using any plugin).
Added:
Here is a sample where chart.scales.x is defined but chart.scales.y is not.
This happen when I add yAxisID which I need in my complete work.
<html>
<head>
<meta charset="utf-8" />
<title>Bar chart</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<canvas id="barchart"></canvas>
<div id="debug"></div>
</div>
<script type="text/javascript">
var canvas = document.getElementById('barchart');
var chart = new Chart(canvas,
{
type: 'bar',
data:
{
labels: ["Audi", "VW", "KIA"],
datasets:
[
{
label: "Cars",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f"],
data: [2601, 4769, 602],
yAxisID: "cars",
},
],
},
options:
{
scales:
{
cars:
{
position: "left",
ticks:
{
color: "red",
},
grid:
{
display: true,
},
},
},
},
});
var dataSets = chart.data.datasets;
var xPos = chart.scales.x.getPixelForValue(dataSets[0].data[0]);
try
{
var yPos = chart.scales.cars.getPixelForValue(dataSets[0].data[0]); // --> here y is undefined
document.getElementById("debug").innerHTML = "xPos=" + xPos + ", yPos=" + yPos;
}
catch(e)
{
document.getElementById("debug").innerHTML = "xPos=" + xPos + "<br>" + e;
}
</script>
</body>
</html>
You can use the following code: chartInstance.scales.x.getPixelForValue(chart instance.data.labels[labelIndex]
I am using billboard js to develop a pie chart with animation. I am unable to do the onload animation so, How will apply onload animation?
Here is the example of onload animation. Please help us.
Here is my code in codepen
HTML Code
<div id="chart"></div>
JS code:
bb.generate({
"data": {
"columns": [
["data1", 30],
["data2", 50]
],
"type": "pie",
"xLocaltime": true,
"xSort": true
},
"legend": {
"show": false
},
"clipPath": true,
"gauge": {
"width": 0,
"startingAngle": 0,
"expand": {
"duration": 88
}
},
"pie": {
"label": {
"threshold": 100
}
},
"donut": {
"label": {},
},
"tooltip": {
"show": false,
"grouped": false
},
interaction: {
enabled: false
}
});
Thanks!
The key point is initialize with '0' data and then load your final data.
// (1) Initialize with 0
var chart = bb.generate({
"data": {
"columns": [
["data1", 0],
["data2", 0]
],
});
// (2) then load data via .load() api
chart.load( ... );
Try with the Run code snippet.
var chart = bb.generate({
"data": {
"columns": [
["data1", 0],
["data2", 0]
],
"type": "pie"
},
"legend": {
"show": false
},
"pie": {
"label": {
show: false
}
},
interaction: {
enabled: false
}
});
setTimeout(() => {
chart.load({
"columns": [
["data1", 30],
["data2", 50]
],
});
}, 1000);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>billboard.js</title>
<script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
I want to put gaps between bars.
I tried ;
...
bar:{
width: {
ratio: 0.5
}
},
...
The code above didn't work for me.
The question is: why doesn't it work or how can I make it work?
Try some thing like:
var colors = ['#1f77b4', '#aec7e8', '#ff7f0e'];
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['value: ', 20, 14, 3]
],
type: 'bar',
labels: true,
color: function(color, d) {
return colors[d.index];
}
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3']
}
},
bar: {
width: {
ratio: 0.5,
}
},
grid: {
focus: {
show: false
}
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" />
</head>
<body>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.js"></script>
</body>
</html>
I'm trying to display a discreteBarChartfrom my JSON object.
When i try a static example it works well, but dynamically it doesn't work.
NB: I want to use my objectData and not the data scope in my html code
This is my code:
JS code :
var app = angular.module('plunker', ['nvd3']);
app.factory('getObjectService', function( $http){
return {
getObject : function() {
return $http.get('http:/..');
}
}
})
app.controller('MainCtrl', function($scope,getObjectService) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d){return d.label;},
y: function(d){return d.number + (1e-10);},
showValues: true,
valueFormat: function(d){
return d3.format(',.4f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
getObjectService.getObject().then(function(resp) {
$scope.myObject = resp.data.items;
}, function(err) {
console.error('ERR', err);
})
$scope.data = [
{
key: "Cumulative Return",
values: [
{
"label" : "A" ,
"number" : 29.765957771107
} ,
{
"label" : "B" ,
"number" : 33.765957771107
} ,
{
"label" : "C" ,
"number" : 38.765957771107
}
]
}
]
});
HTML code :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Discrete Bar Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
<!-- here i want to use my object and not the data scope -->
<nvd3 options="options" data="myObject"></nvd3>
<br>See more
</body>
</html>
Any advice ?
Is there a way to list let's say 2 charts on the same page where each chart has its data xml file? What I'm doing is generating xml files from rrdtool and I would like to view all charts for the same device on one page.
Here's the code I have that works for one chart:
test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="js/test.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "xml/test.xml",
dataType: "xml",
success: function(xml) {
var series = []
//define series
$(xml).find("entry").each(function() {
var seriesOptions = {
name: $(this).text(),
data: []
};
options.series.push(seriesOptions);
});
//populate with data
$(xml).find("row").each(function() {
var t = parseInt($(this).find("t").text()) * 1000
$(this).find("v").each(function(index) {
var v = parseFloat($(this).text())
v = v || null
if (v != null) {
options.series[index].data.push([t, v])
};
});
});
options.title.text = "CPU - Last 3 hours"
$.each(series, function(index) {
options.series.push(series[index]);
});
chart = new Highcharts.Chart(options);
}
})
</script>
</head>
<body>
<div id="cpu" style="width: 800px; height: 400px; margin: 0 auto; padding: 20px"></div>
</body>
</html>
test.js
Highcharts.setOptions({
global: {
useUTC: false
}
});
options = {
chart: {
renderTo: 'cpu',
type: 'area',
},
title: {
text: 'CPU'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H. %M',
}
},
yAxis: {
title: {
text: 'Utilization %'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.x) + ': ' + Highcharts.numberFormat(this.y, 2) + ' %';
}
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[1]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: true,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: []
}
And XML file - test.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xport>
<meta>
<start>1396030800</start>
<step>300</step>
<end>1396030800</end>
<rows>4</rows>
<columns>1</columns>
<legend>
<entry>cpu</entry>
</legend>
</meta>
<data>
<row><t>1396030800</t><v>2.8000000000e+01</v></row>
<row><t>1396031100</t><v>2.9780000000e+01</v></row>
<row><t>1396031400</t><v>3.1596666667e+01</v></row>
<row><t>1396041600</t><v>NaN</v></row>
</data>
</xport>
I encountered the same problem and just solved it!
Before the ready() function:
var chart;
var chart1;
$( document ).ready(function() {
your code....
I created two options, each options render to a different container
options = {
chart: {
renderTo: 'container',
type: 'area',
},
options2 = {
chart: {
renderTo: 'container2',
type: 'area',
},
and use the code below to add to different container:
chart = new Highcharts.Chart(options);
chart1 = new Highcharts.Chart(options2);
then in your html:
<div id="container">
<div id="container2">
Hope this brief explanation helps. Feel free to ask me if anything is not clear to you.
Cheers,