I have successfully implemented this kind of Google Publisher Tags code before, but now I cannot get ads to appear. The documentation shows no examples of GPT in an array, so I'm not sure what to do.
I used a third party to generate publisher tags, as Google itself now makes you create a publisher tag each time for every ad.
Here is my tag code:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
var gptAdSlots = [];
googletag.cmd.push(function() {
//blog
var BlogAdSpace3Map = googletag.sizeMapping().
addSize([992, 0], [728,90]).//desktop
addSize([768, 0], [468,60]). //tablet
addSize([200, 0], [320, 50]). //phone
build();
//momentum
var MOMAdSpace1Map = googletag.sizeMapping().
addSize([992, 0], [970,250]).//desktop
addSize([768, 0], [728,90]). //tablet
addSize([200, 0], [320,100]). //phone
build();
var MOMAdSpace3Map = googletag.sizeMapping().
addSize([992, 0], [728,90]).//desktop
addSize([768, 0], [468,60]). //tablet
addSize([200, 0], [320, 50]). //phone
build();
var MOMAdSpace4Map = googletag.sizeMapping().
addSize([992, 0], [728,90]).//desktop
addSize([768, 0], [468,60]). //tablet
addSize([200, 0], [320, 50]). //phone
build();
var MOMAdSpace6Map = googletag.sizeMapping().
addSize([992, 0], [[468,60]).//desktop and tablet
addSize([200, 0], [320,50]). //phone
build();
//blog ad spots
gptAdSlots[0] = googletag.defineSlot('/27450918/BLOG_AdSpace2_SB_T_Square', [[300,250]], 'div-gpt-ad-8571790-1')
.addService(googletag.pubads());
gptAdSlots[1] = googletag.defineSlot('/27450918/BLOG_AdSpace3_MC_B_Leaderboard', [[728,90],[468,60],[320,50]], 'div-gpt-ad-8571790-2').defineSizeMapping(BlogAdSpace3Map).addService(googletag.pubads());
gptAdSlots[2] = googletag.defineSlot('/27450918/BLOG_AdSpace5_SB_M_WideSkyScraper', [[300,600]], 'div-gpt-ad-8571790-3').addService(googletag.pubads());
gptAdSlots[3] = googletag.defineSlot('/27450918/BLOG_AdSpace7_SB_B_Square', [[300,250]], 'div-gpt-ad-8571790-4').addService(googletag.pubads());
gptAdSlots[4] = googletag.defineSlot('/94124639/Ad_Space_E_Half_Page_Sidebar_Live', [300, 600], 'div-gpt-ad-1492297948399-4').addService(googletag.pubads());
//momentum ad spots
gptAdSlots[5] = googletag.defineSlot('/27450918/MOM_AdSpace1_MC_T_LargeBillboard', [[970,250],[728,90],[320,100]], 'div-gpt-ad-7254248-1').defineSizeMapping(MOMAdSpace1Map).addService(googletag.pubads());
gptAdSlots[6] = googletag.defineSlot('/27450918/MOM_AdSpace2_SB_T_Square', [[300,250]], 'div-gpt-ad-7254248-2').addService(googletag.pubads());
gptAdSlots[7] = googletag.defineSlot('/27450918/MOM_AdSpace3_MC_B_Leaderboard', [[728,90],[468,60],[320,50]], 'div-gpt-ad-7254248-3').defineSizeMapping(MOMAdSpace3Map).addService(googletag.pubads());
gptAdSlots[8] = googletag.defineSlot('/27450918/MOM_AdSpace4_MC_MT_Leaderboard', [[728,90],[468,60],[320,50]], 'div-gpt-ad-7254248-4').defineSizeMapping(MOMAdSpace4Map).addService(googletag.pubads());
gptAdSlots[9] = googletag.defineSlot('/27450918/MOM_AdSpace5_SB_M_WideSkyScraper', [[300,600]], 'div-gpt-ad-7254248-5').addService(googletag.pubads());
gptAdSlots[10] = googletag.defineSlot('/27450918/MOM_AdSpace6_MC_MB_StandardBanner', [[468,60],[320,50]], 'div-gpt-ad-7254248-6').defineSizeMapping(MOMAdSpace6Map).addService(googletag.pubads());
gptAdSlots[11] = googletag.defineSlot('/27450918/MOM_AdSpace7_SB_B_Square', [[300,250]], 'div-gpt-ad-7254248-7').addService(googletag.pubads());
googletag.pubads();
googletag.enableServices();
});
</script>
Related
I have several stacked column series displayed as "totalPercent".
For example:
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "footfall";
series.dataFields.valueYShow = "totalPercent";
series.dataFields.dateX = "datetime";
These display properly.
I'm trying to add a line to my series' of stacked columns.
For example:
var trend = chart.series.push(new am4charts.LineSeries());
trend.dataFields.valueY = "benchline";
trend.dataFields.dateX = "datetime";
trend.data = [ {"datetime": new Date(2021, 3, 23, 10),"benchline": 65},
{"datetime": new Date(2021, 3, 24, 13),"benchline": 65},
{"datetime": new Date(2021, 3, 26, 13),"benchline": 65}];
trend.strokeWidth = 2
trend.stroke = trend.fill = am4core.color("#c00");
trend.legendSettings.labelText = "Demos benchmark";
The 'benchline' values get included in the total from which the 'totalPercent' is calculated for the stacked columns, squashing the first 3 (same number as I have points in my LineSeries).
Is there some way to include the LineSeries without distorting the columns?
Fiddle with full code.
The trick was to add a second axis and attach the LineSeries to that axis.
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.title.text = "Percent";
valueAxis2.renderer.opposite = true;
valueAxis2.min = 0;
valueAxis2.max = 100;
valueAxis2.strictMinMax = true;
valueAxis2.renderer.labels.template.adapter.add("text", function(text) {
return text + "%";
});
var trend = chart.series.push(new am4charts.LineSeries());
trend.dataFields.valueY = "benchline";
trend.dataFields.dateX = "datetime";
trend.data = [ {"datetime": new Date(2021, 3, 23, 10),"benchline": 65},
{"datetime": new Date(2021, 3, 24, 13),"benchline": 65},
{"datetime": new Date(2021, 3, 26, 13),"benchline": 65}];
trend.strokeWidth = 2
trend.stroke = trend.fill = am4core.color("#c00");
trend.legendSettings.labelText = "Demos benchmark";
trend.yAxis = valueAxis2;
I have created a series chart using AmCharts version 4.
I have a red line that represents created cases and green line that represent closed cases. However my legend is blue for both lines. How can I get the legend color to fit the graph color?
I added color in the data section.
My code is here:
<script>
am4core.ready(function() {
var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);
chart.data = [
{
"x": "Mon 1",
"created_value": 1,
"created_color": am4core.color("red"),
"closed_value": 2,
"closed_color": am4core.color("green")
},
{
"x": "Tue 2",
"created_value": 4,
"created_color": am4core.color("red"),
"closed_value": 2,
"closed_color": am4core.color("green")
},
{
"x": "Wed 3",
"created_value": 3,
"created_color": am4core.color("red"),
"closed_value": 1,
"closed_color": am4core.color("green")
}
];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "x";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "created_value";
series1.dataFields.categoryX = "x";
series1.name = "Opprettet";
series1.propertyFields.stroke = "created_color";
series1.propertyFields.fill = "created_color";
series1.strokeWidth = 1;
series1.tooltipText = "Opprettet: {valueY}";
// Create series 2
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "closed_value";
series2.dataFields.categoryX = "x";
series2.name = "Lukket";
series2.propertyFields.stroke = "closed_color";
series2.propertyFields.fill = "closed_color";
series2.tooltipText = "Lukket: {valueY}";
// Legend
chart.legend = new am4charts.Legend();
chart.legend.labels.template.text = "[bold {color}]{name}[/]";
// Tooltips
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = valueAxis;
}); // end am4core.ready()
</script>
<div id="chartdiv_cases_created_per_day" style="height: 300px;"></div>
Seems like you're combining data and js-objects. That might be what you want but I would perhaps suggest that you separate them, as it would make it easier that day you need to add data from server.
There is no need to include the color for each point. Most likely you want the same color for all the points in the same series.
That you can achieve like this:
series.stroke = am4core.color(color);
series.fill = am4core.color(color);
You have already named the series in the data as created_value and closed_value so we can easily make a function that adds the data, names the series' and colorize them :)
In which turn you just call
createSeries("created_value", "Created", "red");
createSeries("closed_value", "Closed", "green");
Full code (I'm sure there's more refactoring you could do):
am4core.useTheme(am4themes_animated); // Not needed, but looks cool ;)
// Create chart instance
var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);
// Add data
chart.data = [{
"date": new Date(2018, 0, 1),
"created_value": 362,
"closed_value": 699
}, {
"date": new Date(2018, 0, 2),
"created_value": 269,
"closed_value": 450
}, {
"date": new Date(2018, 0, 3),
"created_value": 700,
"closed_value": 358
}, {
"date": new Date(2018, 0, 4),
"created_value": 490,
"closed_value": 367
}, {
"date": new Date(2018, 0, 5),
"created_value": 500,
"closed_value": 485
}, {
"date": new Date(2018, 0, 6),
"created_value": 550,
"closed_value": 354
}, {
"date": new Date(2018, 0, 7),
"created_value": 420,
"closed_value": 350,
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
function createSeries(field, name, color) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.name = name;
series.tooltipText = "{dateX}: [b]{valueY}[/]";
series.strokeWidth = 2;
series.stroke = am4core.color(color);
series.fill = am4core.color(color);
// Set up tooltip
series.adapter.add("tooltipText", function(ev) {
var text = "[bold]{dateX}[/]\n"
chart.series.each(function(item) {
text += "[" + item.stroke.hex + "]●[/] " + item.name + ": {" + item.dataFields.valueY + "}\n";
});
return text;
});
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#fff");
series.tooltip.label.fill = am4core.color("#00");
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
return series;
}
createSeries("created_value", "Åpnet", "red");
createSeries("closed_value", "Lukket", "green");
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
chart.cursor.maxTooltipDistance = 0;
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv_cases_created_per_day"></div>
I have the following code from edited from: How to plot pie charts as subplots with custom size with Plotly in Python
import plotly
import plotly.offline as py
import plotly.graph_objs as go
py.init_notebook_mode(connected=True)
labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
values = [4500,2500,1053,500]
domains = [
{'x': [0.0, 0.33], 'y': [0.0, 0.50]},
{'x': [0.33, 0.66], 'y': [0.0, 0.50]},
{'x': [0.66, 1], 'y': [0.0, 0.50]},
{'x': [0.0, 0.33], 'y': [0.50, 1]},
{'x': [0.33, 0.66], 'y': [0.50, 1]},
{'x': [0.66, 1], 'y': [0.50, 1]},
]
traces = []
valueslist = []
for domain in domains:
trace = go.Pie(labels = labels,
values = values,
domain = domain)
traces.append(trace)
layout = go.Layout(height = 600,
width = 600,
autosize = False,
title = 'Main title')
fig = go.Figure(data = traces, layout = layout)
py.iplot(fig, show_link = False, image='png')
I am trying to plot 6 pie charts at one time with different values and different titles for each chart. How should I add these extra lists? Assume, I have the following lists to add:
values1 = [5, 6, 1, 2]
values2 = [1, 4, 5, 6]
values3 = [2, 6, 2, 4]
values4 = [1, 5, 3, 7]
values5 = [25, 51, 33, 47]
#with following titles:
title = 'title0'
title1 = 'title1'
title2 = 'title2'
title3 = 'title3'
title4 = 'title4'
title5 = 'title5'
I'm integrating Doughnut Chart using angular-chart.js and I want to use custom color based on chart label value.
//Controller
vm.labels = ["A", "B", "C"];
vm.data = [1, 2, 3];
//HTML
<canvas id="doughnut" class="chart chart-doughnut"
chart-data="vm.data"
chart-labels="vm.labels"
chart-options="options"
chart-colors = "colours"
chart-legend = "true" >
</canvas>
and i'm setting the color like below
ChartJsProvider.setOptions({
colours: ['#DD1C2C', '#E03E2D','#E35B2B'],
responsive: true
});
It works perfect only if all A,B and C are there (A => #DD1C2C B=> #E03E2D and C=>#E35B2B)
But for the following case
$scope.labels = ["A", "C"];
$scope.data = [1, 3];
A => #DD1C2C and C=>#E03E2D
Expected : A => #DD1C2C and C=>#E35B2B
Did you try to fill the missing parts with empty string and 0 like
$scope.labels = ["A", "", "C"];
$scope.data = [1, 0, 3];
Im trying to filter column 'time' in visualization data table using getFilteredRows(filters) method.I provided column value with minimum and maximum values as,
var timesheet_dataTable = new google.visualization.DataTable(data, 0.6);
var time_filter = timesheet_dataTable.getFilteredRows([{column: 3, minValue: '2:28 PM', maxValue: '3:01 PM'}]);
and then created data view with setRows method to display the data but the table displayed without filtering the data.I checked with other column values and received proper output.So whether 'timeofday' data type is supported in this type of filters?
Is there any other method to filter column based on time?
Update:
This is the code for formatting and passing value to the visualization table.Value of variable startTime will be like '14:28:12'.
val datetimeStart: String = "Date(0,0,0,"
val datetimeEnd: String = ")"
val simpleDateTimeFormat = new SimpleDateFormat("HH,mm,ss")
Json.obj("v" -> JsString(datetimeStart + (simpleDateTimeFormat.format(tsl.startTime)).toString() + datetimeEnd))
before displaying in visualization table i have used formatter as:
var formatter_short1 = new google.visualization.DateFormat({pattern:'h:mm aa'});
formatter_short1.format(timesheet_dataTable,3);
The "timeofday" data type is supported by the filter method, you just need to use it correctly:
// filter column 3 from 2:28PM to 3:01PM
var time_filter = timesheet_dataTable.getFilteredRows([{
column: 3,
minValue: [14, 28, 0, 0],
maxValue: [15, 1, 0, 0]
}]);
var view = new google.visualization.DataView(timesheet_dataTable);
view.setRows(time_filter);
Make sure you are using the view you create to draw your chart, instead of the DataTable:
chart.draw(view, options);
[edit - example for filtering "datetime" type column]
// filter column 3 from 2:28PM to 3:01PM
var time_filter = timesheet_dataTable.getFilteredRows([{
column: 3,
minValue: new Date(0, 0, 0, 14, 28, 0, 0),
maxValue: new Date(0, 0, 0, 15, 1, 0, 0)
}]);
var view = new google.visualization.DataView(timesheet_dataTable);
view.setRows(time_filter);