I've been struggling with this for 3 days, and no luck.
I want to get the reduceCount values once I've applied some filters, I Guess this is basic
but every tutorial or blog, doc that talks about crossfilter shows the very same example :(
Eg: How do I get the number of distinct countries only for visa?
var payments = crossfilter([
{date: "2011-11-14T16:17:54Z", country: 'DE', total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", country: 'MX', total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", country: 'US', total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:28:54Z", country: 'US', total: 200, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", country: 'FR', total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", country: 'CA', total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", country: 'MX', total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", country: 'ES', total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", country: 'US', total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", country: 'CA', total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", country: 'US', total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", country: 'ES', total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", country: 'FR', total: 200, tip: 100, type: "visa"}
]);
var typeDimension = payments.dimension(function(d) { return d.type; });
var totalDimension = payments.dimension(function(d) { return d.total; });
var countryDimension = payments.dimension(function(d) { return d.country; });
var totalGroup = totalDimension.group();
var typeGroup = typeDimension.group();
var countryGroup = countryDimension.group();
var totalSize = totalGroup.reduceCount().size(); // 5 Distinct total amounts
var typeSize = typeGroup.reduceCount().size(); // 3 Distinct types
var countrySize = countryGroup.reduceCount().size(); // 6 Distinct countryes
var visaFilter = typeDimension.filter('visa'); // Filter by Visa type
payments.groupAll().reduceCount().value(); // Ok We have 3 payments
countryDimension.top(Infinity); // This will return the 3 payment objects
countryDimension.group().reduceCount().size(); // Still shows 5 Distinct amounts
countryDimension.group(function(d, v){console.log(d, v); return d;});
countryDimension.group().all(); // Will return group by countryes and number of payment on each country
Thanks a lot!
Related
I am messing around with highcharts for a company project and I have the name/number from calculations (totals) being displayed int he legend. The problem is they also display on the graph. I can't for the life of me figure out how to turn them off on the chart, yet leave them on in the legend. I've read through the API and maybe I missed it but could use some help if you all don't mind.
Code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Here is my code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
You have added total value in the series name
name: 'Results: '+results[2][0],
So it is showing in charts as well as in legend.
Instead of this you should use custom param in series defination like
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot,num)=>{return tot+num}),
type: 'spline',
marker: {
radius: 5
}
}]
Above I added total param in series, then I will use labelFormatter to show the total value in legend.
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}, {
name: 'Results2',
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4],
total: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container" style="height: 400px"></div>
Fiddle demo
I think that removing the series-label module script from your HTML document is a solution which you are looking for.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Demo: https://jsfiddle.net/BlackLabel/f6rya8k3/
API: https://api.highcharts.com/highcharts/plotOptions.series.label
I have a wrong point data shown.
It doesn't show the correct data, check out the picture.
Startpoint is Date.UTC(2016, 06, 30) and not the Date.UTC(2016, 07, 30) as in the tooltip. Here is the result I get:
$(function() {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Waterflow'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Flow im Mio'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Main',
data: ([
[Date.UTC(2016, 06, 30), 3072.541365],
[Date.UTC(2016, 07, 31), 3315.618228],
[Date.UTC(2016, 08, 31), 3367.458135],
[Date.UTC(2016, 09, 30), 3370.195785],
[Date.UTC(2016, 10, 31), 3424.501986],
[Date.UTC(2016, 11, 30), 3479.865412],
[Date.UTC(2016, 12, 31), 3521.730275],
])
}, ]
});
});
In Date.UTC(Year,Month*,Day,Hour,Minute,Seconds) the Month is starting from 0. This is mentioned in the documentation.
So to specify the month June you have to use 5 and not 6.
How could I achieve the chart below as accurate as possible?
I'm trying to achieve the chart in the picture below with highcharts, the problem I have is that I can't achieve the gradients and the purple cut-line
this is what I have donde so far : jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
options: {
title: {
text: "Historical report"
},
heigth: 200
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
plotBands: [
{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: 'John',
data: [3, 9, null, 5, 4, 10, 12],
lineColor: "#5A66AF"
}, {
name: 'Jane',
data: [1, 10, null, 3, 3, 5, 4],
lineColor: '#47a06b'
}, {
name: 'Roberto',
data: [10, 15, null, 15, 9, 9, 4],
lineColor: '#2ba9db'
}
]
});
});
The line is achieved by the DashStyle property:
http://api.highcharts.com/highcharts#plotOptions.line.dashStyle
The gradient fill is a matter of defining the gradient stops in the fillColor property:
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/
(though, FWIW, that extreme white end to the gradient is reeeeally distracting...)
I am trying to draw a chart as below but the x axis stops at end of year 11 which it does not at the moment. I set max to 19 but it did not work.How can I get rid of those grey lines after end of Year 11?
Also for x-axis labels I want to decrease the font size of second category ([1,2,3,4]) and Year with bigger font but in label styles the font size property applies to all labels.
var l=19;
var m=-0.6;
new Highcharts.Chart({
chart: {
renderTo: elementId,
spacingLeft: 10,
spacingRight: 10
},
title: {
text: subject
},
xAxis: {
categories: [{
name: "Year 7",
categories: [1, 2, 3, 4]
}, {
name: "Year 8",
categories: [1, 2, 3, 4]
}, {
name: "Year 9",
categories: [1, 2, 3, 4]
}, {
name: "Year 10",
categories: [1, 2, 3, 4]
}, {
name: "Year 11",
categories: [1, 2, 3, 4]
}],
labels: {
style: {
fontSize: '7.5px'
}
},
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: -1
}],
//max: l
},
yAxis: [{
labels: {
enabled: false
},
title: {
text: null
},
min: 0,
max: 1000
},
{
title: {
text: null
},
labels: {
style: {
fontSize: '7.5 px'
},
align: 'left',
x: 3,
formatter: function () {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
}
},
tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000],
gridLineColor: 'white',
opposite: true,
min: 0,
max: 1000
}],
series: [{
type: 'line',
data: [[m, 0], [l, 280]],
color: '#A5DEC1',
}, {
type: 'line',
data: [[m, 80], [l, 360]],
color: '#94D0A3',
},
...
strong text
Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/
In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values:
var l = 19.5;
var m = -0.5;
Now modify extremes and plotLines:
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: m
}],
max: l - 0.5,
min: m + 0.5,
i am facing quite a problem which is to create the nice graph from http://www.amcharts.com/ but i need to retrieve data from my sql database. But i don't know how to place inside. Please guide me. Below is the way how the graph displayed, but i wanted to work with data from database. Thank you.
<script type="text/javascript">
var chartData = generateChartData();
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var value = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: value
});
}
return chartData;
}
AmCharts.makeChart("chartdiv", {
type: "stock",
pathToImages: "../amcharts/images/",
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: true,
title: "Value",
eraseAll: false,
labels: [{
x: 0,
y: 100,
text: "Click on the pencil icon on top-right to start drawing",
align: "center",
size: 16
}],
stockGraphs: [{
id: "g1",
valueField: "value",
bullet: "round",
bulletColor: "#FFFFFF",
bulletBorderColor: "#00BBCC",
bulletBorderAlpha: 1,
bulletBorderThickness: 2,
bulletSize: 7,
lineThickness: 2,
lineColor: "#00BBCC",
useDataSetColors: false
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
},
drawingIconsEnabled: true
}],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
</script>
Can you generate this script in your code behind ( using a string builder for example ) then use this
ScriptManager.RegisterStartupScript(this, this.GetType(), "", "'" + YourStringBuild.toString() + "'", true);