I am facing a problem when trying to run a tutorial involving cross filter, d3, and dc. I am facing a problem similar to this. When I adjust the code to the proposed solutions. I still get an error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
</head>
<body style="background-color: #CBD0E7">
</body>
<div id="graphdiv"></div>
<div id="legenddiv"></div>
<div id="chart-line-hitsperday"></div>
<script type="text/javascript">
var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
var instance = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.total = d.http_404 + d.http_302 + d.http_200;
});
print_filter("data");
var dateDim = instance.dimension(function(d) { return d.date; });
var hits = dateDim.group().reduceSum(function(d) { return d.total; });
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
var hitslineChart = dc.lineChart("#chart-line-hitsperday"); // reference error number 1 is here.
hitslineChart
.width(500).height(200)
.dimension(dateDim)
.group(hits)
.x(d3.time.scale().domain([minDate,maxDate]));
dc.renderAll();
function print_filter(filter){
var f=eval(filter);
if (typeof(f.length) != "undefined") {}else{}
if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
}
</script>
</html>
and I get the following error:
"data(12) = [
\
{\"date\":null,\"quantity\":2,\"total\":null,\"tip\":0,\"type\":\"cash\"},
{\"date\":null,\"quantity\":1,\"total\":null,\"tip\":100,\"type\":\"visa\"}
]"
"error"
"ReferenceError: dc is not defined
at https://null.jsbin.com/runner:32:29"
Related
I'm trying to make the X Axis at my charts show scale that looks like - "minutes:seconds" (mm:ss)
but all I could do is make it a scale of year and monthes by:
new Date();
I really couln't find any guide that I understood...
This is my JS code:
window.onload = function () {
let d = new Date();
let secondsString = d.getSeconds();
let minString = d.getMinutes();
var totalTime = `${minString}${secondsString}` * 1;
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Coins"
},
data: [{
type: "spline",
name: "Bitcoin",
showInLegend: true,
dataPoints: [
{x: new Date(), y: 1200},
{x: new Date(), y: 1300},
{x: new Date(), y: 1400}
]
},
]
});
chart.render();
}
How do I change the x Axis string ?
Currectly it looks like this:
The x Axis scale shows 2,834. I want it to be: 28:34.
Setting valueFormatString to "HH:mm" should work fine in your case.
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Coins"
},
axisX: {
valueFormatString: "HH:mm"
},
data: [{
type: "spline",
name: "Bitcoin",
showInLegend: true,
dataPoints: [
{x: new Date(2019, 09, 17, 02, 15, 20), y: 1200},
{x: new Date(2019, 09, 17, 08, 15, 20), y: 1300},
{x: new Date(2019, 09, 17, 14, 15, 20), y: 1400}
]
},
]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
We have the following mixed line chart / bar chart in C3:
a bar chart with two groups (light/dark blue is one group, gray is the
other group)
two other data sets represented as line with stroke-width = 0 that represent the limit for group1 and group2.
How can we place the circle shape for line1 aligned with the bar for group1 and the circle shape for line2 aligned with the two bars of group2?
In the following example, we basically would want one of the two circles to be moved slightly to the right so to align with the center of a group and the other one slightly to the left.
var chartSettings = {
padding: {
left: 120,
right: 120
},
bindto: '#chart',
data: {
x: 'Dates',
type: 'bar',
types: {
line1: 'line',
line2: 'line'
},
groups: [
['data2', 'data3'],
],
colors: {
data1: '#f3e274',
data2: '#85bdde',
data3: '#ccebfb'
},
},
bar: {
width: {
ratio: 0.50
}
},
point: {
r: 8
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%d-%m-%Y'
}
},
y: {
label: { // ADD
text: '',
position: 'outer-middle'
},
},
}
};
var date1 = new Date(2015, 1, 1, 0,0, 0,0);
var date2 = new Date(2015, 3, 1, 0,0, 0,0);
var date3 = new Date(2015, 6, 1, 0,0, 0,0);
var xAxis = ['Dates', date1, date2,date3];
var line1 = ['line1', 50, 60,55];
var line2 = ['line2', 70, 75,60];
var data1 = ['data1', 40, 35,30];
var data2 = ['data2', 5, 10,10];
var data3 = ['data3', 20, 15,30];
chartSettings.data.columns = [xAxis,
line1,
line2,
data1,
data2,
data3];
c3.generate(chartSettings);
#cr-chart .c3-line-accordatoTotale {
stroke-width: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="chart"/>
var chartSettings = {
bindto: '#chart',
data: {
x: 'Dates',
type: 'bar',
types: {
line1: 'line',
line2: 'line'
},
groups: [
['data2', 'data3'],
],
names: {
line1: 'Limit for data1',
line2: 'Limit for data2 + data3',
data1: 'Data1',
data2: 'Data2',
data3: 'Data3'
},
},
bar: {
width: {
ratio: 0.50 // this makes bar width 50% of length between ticks
}
},
point: {
r: 8
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%d-%m-%Y'
}
},
y: {
label: { // ADD
text: '',
position: 'outer-middle'
}
},
}
};
var date1 = new Date(2016, 1, 1, 0, 0, 0, 0);
var date2 = new Date(2016, 3, 1, 0, 0, 0, 0);
var date3 = new Date(2016, 6, 1, 0, 0, 0, 0);
var xAxis = ['Dates',date1,date2,date3];
var line1 = ['line1', 50, 70,80];
var data1 = ['data1', 30, 40, 60];
var line2 = ['line2', 70, 60,40];
var data2 = ['data2',10,15,20];
var data3 = ['data3',15,30,5];
chartSettings.data.columns = [xAxis,
line1,
line2,
data1,
data2,
data3];
c3.generate(chartSettings);
#chart .c3-line-line1 {
stroke-width: 0px;
}
#chart .c3-line-line2 {
stroke-width: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="chart"/>
It would be nice if you attached some jsfiddle.
But at this point I can say that you probably need to look inside .c3-chart-lines container and find desired line eighter by order:
.c3-chart-line:first-child // or last-child?
or by data name:
.c3-chart-line.c3-target-YOUR-ORANGE-DATA-NAME
Hope this helps.
As the title suggests, I am using a Kendo UI Grid in a View within an MVC application.
Now, on the click of a particular cell I need to pass the row index and column header (which that cell belongs to) to a function written in a .cs file in the application.
Any help is appreciated.
Thanks :)
P.S.: If you think that I am not providing sufficient information please let me know since I am a newbie programmer!
You can achieve this by using ondatabound event for reference please check the below code snippet.
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
});
}
Full code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var products = [{
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 3,
ProductName: "Aniseed Syrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "48 - 6 oz jars",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "36 boxes",
UnitPrice: 21.3500,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: 'number' },
UnitsInStock: { type: 'number' },
ProductName: { type: 'string' },
QuantityPerUnit: { type: 'string' },
UnitPrice: { type: 'number' },
}
}
},
},
dataBound: onDataBound,
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "UnitsInStock", title: "UnitsInStock" },
{ field: "QuantityPerUnit", title: "QuantityPerUnit" },
{ field: "UnitPrice", title: "UnitPrice" },
]
});
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
});
}
</script>
</body>
</html>
Let me know if any concern.
Fiddle: http://jsfiddle.net/tvinci/J9ghN/
I've created a pie chart broken down by year and I've set the min and max range for the line chart based off the dimension. However, when I select a year, the range does not update. Am I doing something wrong?
var yearRingChart = dc.pieChart("#chart-ring-year");
var tpslineChart = dc.lineChart("#chart-tps");
var data2 = [
{date: "10/01/2012", hits: 1, tps: 100, http_status:200},
{date: "10/01/2012", hits: 1, tps: 90, http_status:302},
{date: "01/02/2013", hits: 1, tps: 100, http_status:200},
{date: "01/02/2013", hits: 1, tps: 10, http_status:302},
{date: "01/03/2013", hits: 0, tps: 300, http_status:200},
{date: "01/03/2013", hits: 1, tps: 10, http_status:302},
{date: "01/04/2013", hits: 1, tps: 90, http_status:200},
{date: "01/04/2013", hits: 1, tps: 0, http_status:302},
];
var ndx2 = crossfilter(data2);
// normalize/parse data
var parseDate = d3.time.format("%m/%d/%Y").parse;
data2.forEach(function(d) {
d.date = parseDate(d.date);
d.Year=d.date.getFullYear();
});
var yearDim = ndx2.dimension(function(d) {return +d.Year;});
var tpsDim = ndx2.dimension(function(d) {return d.date;});
var tps_total = yearDim.group().reduceSum(function(d) {return d.tps;});
var tps_graph = tpsDim.group().reduceSum(function(d) {return d.tps;});
var minDate = tpsDim.bottom(1)[0].date;
var maxDate = tpsDim.top(1)[0].date;
yearRingChart
.width(200).height(200)
.dimension(yearDim)
.group(tps_total)
.innerRadius(50);
tpslineChart
.width(500).height(200)
.dimension(tpsDim)
.group(tps_graph)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.day)
.yAxisLabel("TPS")
.elasticY(true)
.margins({ top: 10, left: 50, right: 10, bottom: 50 })
//.renderlet(function (chart) {chart.selectAll("g.x text").attr('dx', '-30').attr('transform', "rotate(-90)");})
;
dc.renderAll();
I have just started working with crossfilter and d3.js ... I'm trying some snippets given in the API reference... I Have the following data
var payments = crossfilter([
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
]);
I can create dimension via type as
var paymentsByTotal = payments.dimension(function(d) { return d.type; });
My question is that how can i filter an array of strings. I tried:
paymentsByTotal.filterRange(["cash","visa"]);
But I didn't get the expected result!
Any suggestions?
With the sourcecode in the master branch of Crossfilter.js, there is no provision for union of filters, you have to get the code from Jason Davies' union branch.
Then, you should be able to do paymentsByTotal.filter("cash","visa"); and get the desired output.
Appears that a filterFunction(function) has been added since the previous response, so that you can now do this with:
paymentsByTotal.filterFunction(function(d) { return d === "visa" || d === "cash" });
If you have an array of values, and you don't want to specify the explicit logic (i.e. d === "visa" ) for each item, then you can extend sai's filterFunction solution to check if the value is included in your array. Doing it this way just makes things easier if your array of items to filter is large or likely to change.
var items = ['Visa', 'Cash'];
paymentsByTotal.filterFunction(function(d) { return items.indexOf(d) > -1;});