How to use the dc.lineChart function in dc
To help you get started, we’ve selected a few dc examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Graylog2 / graylog2-server / javascript / src / components / sources / SourceLineChart.jsx View on Github 
renderLineChart(dimension, group, onDataFiltered) {
var lineChartDomNode = $("#dc-sources-line-chart")[0];
var width = $(lineChartDomNode).width();
$(document).on('mouseup', "#dc-sources-line-chart svg", (event) => {
$(".timerange-selector-container").effect("bounce", {
complete: () => {
// Submit search directly if alt key is pressed.
if (event.altKey) {
UniversalSearch.submit();
}
}
});
});
this._lineChart = dc.lineChart(lineChartDomNode);
this._lineChart
.height(200)
.margins({left: 35, right: 20, top: 20, bottom: 20})
.dimension(dimension)
.group(group)
.x(d3.time.scale())
.renderHorizontalGridLines(true)
// FIXME: causes those nasty exceptions when rendering data (one per x axis tick)
.elasticX(true)
.elasticY(true)
.transitionDuration(30)
.colors(D3Utils.glColourPalette())
.on("filtered", (chart) => {
dc.events.trigger(() => {
var filter = chart.filter();
onDataFiltered(filter);case 'line':
graph = dc.lineChart(domNode);
D3Utils.tooltipRenderlet(graph, '.chart-body circle.dot', tooltipTitleFormatter);
break;
case 'area':
graph = dc.lineChart(domNode);
graph.renderArea(true);
D3Utils.tooltipRenderlet(graph, '.chart-body circle.dot', tooltipTitleFormatter);
break;
case 'bar':
graph = dc.barChart(domNode);
graph.centerBar(true);
D3Utils.tooltipRenderlet(graph, '.chart-body rect.bar', tooltipTitleFormatter);
break;
case 'scatterplot':
graph = dc.lineChart(domNode);
graph.renderDataPoints({radius: 2, fillOpacity: 1, strokeOpacity: 1});
D3Utils.tooltipRenderlet(graph, '.chart-body circle.dot', tooltipTitleFormatter);
break;
default:
throw "Unsupported renderer '" + config.renderer + "'";
}
if (config.renderer === 'line' || config.renderer === 'area') {
graph.interpolate(config.interpolation);
}
// Bar charts with clip padding overflow the x axis
if (config.renderer !== 'bar') {
graph.clipPadding(5);
}instance.renderCharts = (parsedData) => {
const {
timeStampDimension,
timeStampGroup,
statusCodeDimension,
statusCodeGroup,
responseTimeDimension,
responseTimeGroup,
timeScaleForLineChart,
timeScaleForRangeChart,
xScaleForBar,
binwidth,
} = parsedData;
// Init charts
const requestsOverTime = dc.lineChart('#requestsOverTime-chart');
const overviewChart = dc.barChart('#overviewChart-chart');
const statusCodeCounts = dc.rowChart('#statusCodeCounts-chart');
const responseTimeDistribution = dc.barChart('#responseTimeDistribution-chart');
requestsOverTime
.height(350)
.renderArea(true)
.transitionDuration(300)
.margins({ top: 5, right: 20, bottom: 25, left: 40 })
.ordinalColors(['#2fa4e7'])
.x(timeScaleForLineChart)
.dimension(timeStampDimension)
.group(timeStampGroup)
.rangeChart(overviewChart)
.brushOn(false)
.renderHorizontalGridLines(true)case 'line':
graph = dc.lineChart(domNode);
tooltipSelector = '.chart-body circle.dot';
break;
case 'area':
graph = dc.lineChart(domNode);
graph.renderArea(true);
tooltipSelector = '.chart-body circle.dot';
break;
case 'bar':
graph = dc.barChart(domNode);
graph.centerBar(true);
tooltipSelector = '.chart-body rect.bar';
break;
case 'scatterplot':
graph = dc.lineChart(domNode);
graph.renderDataPoints({ radius: 2, fillOpacity: 1, strokeOpacity: 1 });
tooltipSelector = '.chart-body circle.dot';
break;
default:
throw new Error(`Unsupported renderer '${config.renderer}'`);
}
if (renderTooltip && tooltipSelector) {
D3Utils.tooltipRenderlet(graph, tooltipSelector, tooltipTitleFormatter);
}
if (config.renderer === 'line' || config.renderer === 'area') {
graph.interpolate(config.interpolation);
}
// Bar charts with clip padding overflow the x axiscreateChart(){
let startTime = 0;
let cf = crossfilter([{date: startTime, lossValue: 0}]);
let lossData = this.props.currData;
AddData();
let timeDimension = cf.dimension(function(d){ return d.date; });
let totalGroup = timeDimension.group().reduceSum(function(d){ return d.lossValue; });
let lineChart = dc.lineChart("#loss","lossChart")
.brushOn(false)
.width(500)
.height(220)
.elasticY(true)
.x(d3.scale.linear().domain([0, lossData.length-1]))
.dimension(timeDimension)
.group(totalGroup);
let loop = setInterval(function(){
AddData();
if(lossData.length == startTime){
clearInterval(loop);
}
lineChart.x(d3.scale.linear().domain([0, lossData.length-1]));
lineChart.render("lossChart");
}, 1000);create(config, domNode, tooltipTitleFormatter) {
let graph;
switch (config.renderer) {
case 'line':
graph = dc.lineChart(domNode);
D3Utils.tooltipRenderlet(graph, '.chart-body circle.dot', tooltipTitleFormatter);
break;
case 'area':
graph = dc.lineChart(domNode);
graph.renderArea(true);
D3Utils.tooltipRenderlet(graph, '.chart-body circle.dot', tooltipTitleFormatter);
break;
case 'bar':
graph = dc.barChart(domNode);
graph.centerBar(true);
D3Utils.tooltipRenderlet(graph, '.chart-body rect.bar', tooltipTitleFormatter);
break;
case 'scatterplot':
graph = dc.lineChart(domNode);
graph.renderDataPoints({radius: 2, fillOpacity: 1, strokeOpacity: 1});
D3Utils.tooltipRenderlet(graph, '.chart-body circle.dot', tooltipTitleFormatter);
break;
default:
throw "Unsupported renderer '" + config.renderer + "'";
}.transitionDuration(500)
.mouseZoomable(false)
.margins({
top: 10,
right: 10,
bottom: 20,
left: 40
})
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.xUnits(timePeriodUnits)
.renderlet(function(chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
})
.compose([
dc.lineChart(runningChart)
.dimension(timeOpenDimension)
.colors('red')
.renderDataPoints({
radius: 2,
fillOpacity: 0.8,
strokeOpacity: 0.8
})
.group(runningtotalGroup, "Accumulative Job Count"),
dc.lineChart(runningChart)
.dimension(closeTimeDimension)
.colors('blue')
.group(runningclosedGroup, "Accumulative Jobs Closed")
.dashStyle([5, 1])
.xyTipsOn(true)
.renderDataPoints({
radius: 2,.renderHorizontalGridLines(true)
.xUnits(timePeriodUnits)
.renderlet(function(chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
})
.compose([
dc.lineChart(runningChart)
.dimension(timeOpenDimension)
.colors('red')
.renderDataPoints({
radius: 2,
fillOpacity: 0.8,
strokeOpacity: 0.8
})
.group(runningtotalGroup, "Accumulative Job Count"),
dc.lineChart(runningChart)
.dimension(closeTimeDimension)
.colors('blue')
.group(runningclosedGroup, "Accumulative Jobs Closed")
.dashStyle([5, 1])
.xyTipsOn(true)
.renderDataPoints({
radius: 2,
fillOpacity: 0.8,
strokeOpacity: 0.8
})
])
.x(d3.scaleTime().domain([new Date(start), new Date(end)]))
.elasticY(true)
.brushOn(false)
.xAxis();dc
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
