I'm trying to implement a simple bar chart with labels. I'm making use of the github barchart example of graphael.
I'm getting the following error when I'm try to add the label function to my code below. There also seems to be an open issue on this on Github.
TypeError: paper.labelise is not a function
The line number being pointed out by the error is line 344 in g.bar.js .
Anybody got a workaround for this error ? I'm using Raphaël 2.0.2 and g.Raphael 0.51 .
The code from that line number as part of g.bar.js is:-
var label = paper.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total);
The sample code which throws this error is:-
<!--<!doctype html>-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Static Bar Charts</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8">
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.bar.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder"),
data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
r.text(160, 10, "Single Series Chart").attr(txtattr);
// r.text(480, 10, "Multiline Series Chart").attr(txtattr);
// r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
// r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
var labels = ["Company X", "Company Y", "Company Z"]
var barChart = r.barchart(10, 10, 300, 220, [[9,5,2]], 0, {stacked: true, type: "soft"}) .label([labels]);
//r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"}).label([['C', 'D', 'E', 'G', 'L', 'M', 'P', 'S1']]);
//barChart.label(['a','b','c']);
// r.barchart(330, 10, 300, 220, data1);
// r.barchart(10, 250, 300, 220, data2, {stacked: true});
// r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
};
</script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
<div id="holder"></div>
<p>
Demo of G Raphael JavaScript library.
</p>
</body>
</html>
I know it's late but this is the third result in google when searching for the same problem.
How i got around it was to use this file for the g.bar.js
https://raw.githubusercontent.com/jhurt/g.raphael/master/g.bar.js
And then i just:
barChart.label([['label1','label2']], true);
Related
I started off with this example: https://www.amcharts.com/demos/floating-bar-chart/ but want the floating-aspect also cover a date axis. This way I will be able to color a rectangular area in my charts.
I made the following changes:
Changed the x-axis to a date axis
Changed the y-axis to a value axis
Changed the data correspondingly
Changed the data-fields in the series-definition to use openValueXField, valueXField for the dates and openValueYField and valueYField for the values
Something (vertical colored lines) are displayed in the most left part of the chart but no colored areas.
When using values for both axes it works perfectly but not with dates. I hope some of you knows what is wrong here. The Amcharts Demo's only provide example with one axis.
The two source codes are included hereafter.
//
// Source Code for two numeric axis -> working
//
<meta content="text/html;charset=utf-6" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: 8,
endTime: 11,
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: 10,
endTime: 13,
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
91,31 43%
//
// Source Code for one date and one numeric axis -> NOT working
//
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: new Date(2021, 1, 28),
endTime: new Date(2021, 3, 17),
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: new Date(2021, 2, 5),
endTime: new Date(2021, 5, 7),
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {
pan:"zoom",
minimumDate: new Date(2021, 1, 18),
maximumDate: new Date(2021, 7, 20),
}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
94,3 97%
I have created a line chart using dc.js and crossfilter. The chart currently looks like this:
Required:
I want the legend of active inactive on top left to position below(bottom) of the chart in center and the x-axis tick label should start from Jan to Dec. I am adding my code below. Thank you.
const dateNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, active: 1000, inactive: 100, type: "tab", city: " "},
{date: "2011-11-14T16:20:19Z", quantity: 2, active: 190, inactive: 100, type: "tab", city: "Berlin"},
{date: "2011-11-14T16:28:54Z", quantity: 1, active: 300, inactive: 200, type: "visa", city: " "},
{date: "2011-11-14T16:30:43Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: "Amsterdam"},
{date: "2011-11-14T16:48:46Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T16:53:41Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T16:54:06Z", quantity: 1, active: 100, inactive: 0, type: "cash", city: " "},
{date: "2011-11-14T16:58:03Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T17:07:21Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T17:22:59Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T17:25:45Z", quantity: 2, active: 200, inactive: 0, type: "cash", city: " "},
{date: "2011-11-14T17:29:52Z", quantity: 1, active: 200, inactive: 100, type: "visa", city: ""}
];
data.forEach(function(d){
var tempDate = new Date(d.date);
d.date = tempDate;
})
var facts = crossfilter(data);
var all = facts.groupAll();
//table
var dateDimension = facts.dimension(function(d){ return d.date; });
//line chart
var dateGroup = dateDimension.group().reduceSum(function(d){ return d.active; });
var dateGroupTip = dateDimension.group().reduceSum(function(d){ return d.inactive; });
var minDate = dateDimension.bottom(1)[0].date;
var maxDate = dateDimension.top(1)[0].date;
var lineChart = dc.lineChart("#test")
.width(700)
.height(200)
.brushOn(false)
.margins({top:10,bottom:30,right:10,left:70})
.dimension(dateDimension)
.group(dateGroupTip,"inactive")
.stack(dateGroup,"active")
.renderHorizontalGridLines(true)
.renderArea(true)
.renderDataPoints(true)
// // .interpolate('basis')
// lineChart.xAxis().ticks(d3.timeMonth, 1)
// lineChart.xAxis().tickFormat(d3.timeFormat('%b'))
.clipPadding(data.length)
.legend(dc.legend().y(10).x(0).itemHeight(12).gap(5))
// .xAxis()
// .ticks(d3.time.month, 7)
// .tickFormat(d3.time.format('%e'));
// .xAxis().tickFormat(d3.time. format('%B'))
// .xUnits(d3.time.months)
.x(d3.scaleLinear().domain([minDate,maxDate]))
lineChart.yAxis().ticks(6);
lineChart.xAxis().ticks(12);
dc.renderAll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="dc.css"/>
<script src="d3.js"></script>
<script src="crossfilter.js"></script>
<script src="dc.js"></script>
</head>
<body>
<div id="test"></div>
<!-- <script src="app.js"></script> -->
<script src="play.js"></script>
</body>
</html>
Looks like you've figured most of it out, and got confused by the D3 version 3 to version 4 API changes?
Many of the lines you have commented out were correct except for these changes - stuff like d3.time.months changing to d3.timeMonths. You're not the only one - these changes caused a lot of confusion for all of us.
The last steps are
Use time scales: .x(d3.scaleTime().domain([minDate,maxDate]))
Round the dates down to the beginning of the month using d3.timeMonth, both in the dimension definition and in the minDate/maxDate calculation, e.g. var dateDimension = facts.dimension(function(d){ return d3.timeMonth(d.date); });
Tell the chart how to calculate the number of points to show: .xUnits(d3.timeMonths)
Format the x axis ticks: lineChart.xAxis().tickFormat(d3.timeFormat('%B'))
You had most of these, only commented out. Probably because you found examples using the D3v3 API, and they caused errors?
As for the legend, dc.js doesn't do anything sophisticated here - you just have to lay it out manually, setting the margins on the chart to allow enough space, and setting x and y on the legend to put the legend where you want it.
I found that
lineChart
.margins({top:10,bottom:60,right:25,left:40});
.legend(dc.legend().y(165).x(325).itemHeight(12).gap(5))
worked pretty well, but you'll have to adjust it to taste (and, unfortunately, when changes to your data cause the sizes of things to change).
Here's a working fiddle.. I took the liberty of changing your example data so that it includes the desired months.
You're going to run into trouble with this design if your data spans multiple years, but I guess you can cross that bridge when you come to it.
dynamically Change The Kendo chart legend unselect on apply custom color
$("#chart").kendoChart({
series: [
{ data: [6, 2, 3], name: "Task 1" },
{ data: [1, 5, 2], name: "Task 2" }
],
legendItemClick: function(e){
e.sender.options.legend.inactiveItems.markers.color = "red";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
$("#chart").kendoChart({
series: [
{ data: [6, 2, 3], name: "Task 1" },
{ data: [1, 5, 2], name: "Task 2" }
],
legendItemClick: function(e){
e.sender.options.legend.inactiveItems.markers.color = "red";
}
});
e.sender.options.legend.inactiveItems.markers.color = "<Use Your Custom Color>";
This Line Of Code Place At LegendItemClick Templet Or Function.I think.... This is Use full To Succeed Your need.
Is it posible to decrease the show entries in datatable. I want to only show 5 entries instead of 10.
change the iDisplayLength. This for example:
$(document).ready(function() {
$('#tbl_id').dataTable({
"aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
"iDisplayLength": 5
});
} );
I tried the code:
paper.rect(100, 100, 300,300).animate({transform :"t0,0r120t-0,0"}, 2000, "bounce");
in the stie http://raphaeljs.com/playground.html
And it workes greate, but in my code I cant get the object to rotate on place. Please help? The one I want to rotate is the var blueRect.
Tis is my code:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>SVG/VLM</title>
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<style>
#artboard{
width: 240px;
height: 150px;
}
</style>
<script src="raphael.js"></script>
<script type="text/javascript">
var paper;
var blueRect;
var redRect;
var rightButton;
var stopButton;
var xEnd;
function init(){
paper = Raphael("artboard");
// Bakgrunden
var background = paper.rect( 0, 0, "100%", "90px", 0 );
background.attr({fill: "#f3f3ff", "stroke-width": 1, "stroke": "#000"});
// Blåa rektangeln
blueRect = paper.rect( 35, 20, "50px", "50px", 0);
blueRect.attr({fill: "#aaaaff", "stroke-width": 3, "stroke": "#000"});
// Röda rektangeln
redRect = paper.rect( 150, 20, "50px", "50px", 0);
redRect.attr({fill: "#ffaaaa", "stroke-width": 3, "stroke": "#000"});
//Knapparna
rightButton = paper.rect(5, 100, "50px", "22px", 0);
rightButton.attr("fill", "#ff0000");
leftButton = paper.rect(65, 100, "50px", "22px", 0);
leftButton.attr("fill", "#00ff00");
sidewaysButton = paper.rect(125, 100, "50px", "22px", 0);
sidewaysButton.attr("fill", "#0000ff");
stopButton = paper.rect(185, 100, "50px", "22px", 0);
stopButton.attr("fill", "#000");
xEnd = 150;
// Kör funktionen sideways()
go();
};
function go(){
rightButton.click(
function rotateRight(){
blueRect.animate({transform:"t0,0r120t-0,0"}, 2000, "bounce");
});
sidewaysButton.click(
function sine(){
if( xEnd == 150 )
xEnd = 50;
else
xEnd = 150;
redRect.animate( {x: xEnd}, // Attributet som ska animeras följt av till vilket värde den ska animeras
1000, // Tiden
"sine", // Ease funktion
function (){ sine(); } // Anropar sig själv igen för att upprepa funktionen.
);
});
stopButton.click(
function stop(){
redRect.stop();
});
}
</script>
</head>
<body onload="init()">
<div id="artboard"></div>
</body>
</html>
And I'm sorry about all the Swedish comments, hope that dosen't matter for you to understand my code.
In this particular case you would need to get it to rotate around its center by specifying the centre points, so the transform would look like...
blueRect.animate({transform:"r120,60,45"}, 2000, "bounce")
If its variable where it will be, you could get the centre point from getBBox()
jsfiddle