I am using PDFmake in my django project to generate pdf files. I want to download multiple files using one button clicked. That's why I planned to use jsZIP to download all the file in a zip format.
function downloadAllPayslip(){
var employeeIdLst = getSelectedPayslipEmployeeIds();
$.ajax({
type: 'GET',
url: '{% url "salary:ajax-download-all-payslip" %}',
data: {
'month': dateVar.getMonth()+1, // number
'year': dateVar.getFullYear(),
'employee_id_lst': JSON.stringify(employeeIdLst),
},
dataType: 'json',
success: function (data) {
var lastDay = new Date(dateVar.getFullYear(), dateVar.getMonth() + 1, 0);
var lastDayStr = lastDay.toString("MM/dd/yyyy");
var lastDayStrSplit = lastDayStr.split("/");
var monthName = months[parseInt(lastDayStrSplit[0]) - 1];
var monthNameS = monthName.slice(0, 3);
var year = lastDayStrSplit[2];
var day = lastDayStrSplit[1];
var zip = new JSZip();
var bufferPDFList = [];
var docDefinitionArr = [];
var docDefinitionBufferArr = [];
var content;
var dataPDF;
var nameArr = [];
for (var i = 0; i < data.length; i++) {
// Employee info
var dailyStartTime = moment(data[i].daily_start_time, 'HH:mm:ss').format('h:mm A');
var dailyExitTime = moment(data[i].daily_exit_time, 'HH:mm:ss').format('h:mm A');
var employeeId = data[i].e_id;
var employeeName = data[i].name;
nameArr.push(employeeName);
var employeeType = data[i].type;
var employeeDesignation = data[i].designation;
var employeeDepartment = data[i].department;
var employeeJoinDate = data[i].join_date;
var weekends = data[i].weekends;
var shift = dailyStartTime + ' - ' + dailyExitTime;
var breakDuration = data[i].break_duration;
var leaveBalanceDict = data[i].leave_balance_dict;
var leaveDataDict = []
for (var leaveType in leaveBalanceDict) {
var leaveDict = leaveBalanceDict[leaveType];
var total = leaveDict.total;
var taken = leaveDict.taken;
var accrued = leaveDict.accrued;
var remained = accrued - taken;
leaveDataDict.push({
'Leave Types': leaveType,
'Leave Entitled(days)': total,
'Leave Taken(days)': taken,
'Leave Accrued(days)': accrued,
'Leave Remained(days)': remained
})
}
// Salary details
if (data[i].is_overtime) {
var overtimeAddition = data[i].overtime_addition + ' (+' + formatHHMM(data[i].overtime_hour) + ')';
}
else {
var overtimeAddition = 'N/A';
}
var basicPay = data[i].basic_salary;
var overtimePay = overtimeAddition;
var lessWorkDeduction = data[i].less_work_deduction + "(" + formatHHMM(data[i].work_hour_deficit) + ")"
var unpaidLeaveDeduction = data[i].unpaid_leave_deduction + "(" + data[i].unpaid_leave_count + "days)"
var additionalPay = data[i].salary_addition;
var totalPay = data[i].total_salary;
var taxDeduction = data[i].tax_deduction+ "(" + data[i].percent_tax + "%)";
var netSalary = data[i].net_salary;
var comment = data[i].comment;
var companyName = '{{ company_name }}'
// Generate pdf
var docDefinition = {
footer: function(currentPage, pageCount) {
return {
columns: [
{
text: currentPage.toString() + ' of ' + pageCount, alignment: 'center'
}
]
};
},
pageSize: 'A4',
pageMargins: [40, 80, 40, 60],
content: [
{ text: companyName, style: 'header', alignment: 'center' },
{ lineHeight: 2, text: 'Pay Slip', fontSize: 15, alignment: 'center' },
{ lineHeight: 2, text: 'Pay Period: 01 ' + monthNameS + ' ' + year + ' - ' + day + ' ' + monthNameS + ' ' + year , fontSize: 12, alignment: 'center', bold: true },
{ text: 'Employee Information', style: 'subheader'},
{
columns: [
{
width: 120,
fontSize: 10,
text: 'Employee Name\n' +
'Employee ID\n' +
'Employee Type\n'+
'Designation'
},
{
width: 155,
fontSize: 10,
text: ': ' + employeeName + '\n' +
': ' + employeeId + '\n' +
': ' + employeeType + '\n' +
': ' + employeeDesignation + '\n'
},
{
width: 120,
fontSize: 10,
text: 'Department\n' +
'Join Date\n' +
'Weekends\n' +
'Shift'
},
{
width: 155,
fontSize: 10,
text: ': ' + employeeDepartment + '\n' +
': ' + employeeJoinDate + '\n' +
': ' + weekends + '\n' +
': ' + shift + '\n' +
' (Break: ' + breakDuration + 'min)'
}
]
},
{ text: 'Leave Information', style: 'subheader'},
{
columns: [
{ width: 20, text: '' },
table(leaveDataDict, ['Leave Types', 'Leave Entitled(days)', 'Leave Taken(days)', 'Leave Accrued(days)', 'Leave Remained(days)']),
]
},
{ text: 'Salary Information', style: 'subheader'},
{
style: 'table',
table: {
body: [
['Basic', 'Overtime', 'Additional', 'Unpaid Leave Deduction', 'Less Work Deduction', 'Total Pay', 'Tax Deduction', 'Net pay'],
[basicPay, overtimePay, additionalPay, unpaidLeaveDeduction, lessWorkDeduction, totalPay, taxDeduction, netSalary]
]
}
},
],
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10]
},
subheader: {
fontSize: 15,
bold: true,
margin: [0, 10, 0, 5]
},
tableHeader: {
bold: true,
fontSize: 13,
color: 'black'
},
table: {
fontSize: 9,
margin: [0, 5, 0, 15]
},
},
}
pdfFilename = 'Payslip-' + employeeName + '-' + monthNameS + year + '.pdf'
// pdfMake.createPdf(docDefinition).download('Payslip-' + employeeName + '-' + monthNameS + year, window);
pdfMake.createPdf(docDefinition).getBase64(function(data) {
zip.file(pdfFilename, data);
// var content = zip.generate();
// location.href="data:application/zip;base64,"+content;
});
}
console.log(zip);
var content = zip.generate();
location.href="data:application/zip;base64,"+content;
}
});
}
this is my code. I am looping over all the data to generate multiple pdf. Then passing the pdfs to jsZIP. but all the time zip file is returning empty.
Is this the right way to download multiple pdf in jsZIP?
Related
Can someone help me. how to create a filename when I'm downloading a PDf file. What happens on me, its creating a random filename for my PDF. I want to set a specific filename('Sample Name') if I download it.
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function(){
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
};
//console.log(reader.onloadend);
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
$('#btnPDF').click(function(){
dashboard.fireChange('prmAction', 'Export');
var name = Utils.getQueryParameter('user');
const month = ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const qtr = ['1st', '2nd', '3rd', '4th'];
// page size A4: [595.28, 841.89]
var rptHeightP1 = 350.28;
var rptHeight = 505.28;
var rptWidth = 791.89;
var pgMargin = [50,20,50,50];
var now = new Date();
var today = month[now.getMonth()] + ' ' + now.getDate() + ', ' + now.getFullYear();
if (now.getMonth() === 0){
var qtrToday = qtr[0];
}
else{
var qtrToday = qtr[(Math.floor((now.getMonth()) / 3))];
}
var logo = '/pentaho/api/repos/%3Ahome%3AEISv4%3APM%3ADQ%20Dashboards%3AECLIP%3Aimg%3Alogo.png/content';
toDataURL(logo, function(dataUrl) {
//console.log('RESULT:', dataUrl);
headerIcon = dataUrl;
});
var breadcrumbs = document.getElementById('breadcrumbs').innerHTML;
breadcrumbs = breadcrumbs.replace(/\n|<.*?>/g,'');
var row1 = '';
var row2 = '';
chartsToCanvas(document.querySelector('#row1')).then(function(row){row1 = row;
chartsToCanvas(document.querySelector('#row2')).then(function(row){row2 = row;
chartsToCanvas(document.querySelector('.container')).then(function(dashboard){
//Used to format the output of the pdf document
var docDefinition = {
pageSize: 'A4',
pageOrientation: 'landscape',
pageMargins: [50,20,50,50],
content: [
{image: headerIcon, fit: [50,50], width: 110, alignment: 'center', margin: [0,10,0,0]},
{text: 'Republic of the Philippines', fontSize: 9, alignment: 'center'},
{text: 'Sample',bold: 'true', fontSize: 12, alignment: 'center'},
{text: 'Sample Address', fontSize: 9, alignment: 'center'},
{text: 'https://www.dilg.gov.ph', fontSize: 9, alignment: 'center'},
{
text: 'Data Quality Dashboard',
fontSize: 12,
alignment: 'center',
bold: true,
margin: [0,10,0,0]
},
{
text: '(as of ' + qtrToday + ' Quarter of FY ' + now.getFullYear() + ')',
alignment: 'center',
fontSize: 8,
margin: [0,0,0,10]
},
{
image: row2,
alignment: 'center',
width: rptWidth,
maxHeight: rptHeight
}
],
footer: function(currentPage, pageCount) {
return {
margin: [100,2,100,2],
alignment: 'center',
fontSize: 9,
columns: [
{
text: 'Printed by: ' + name + ' | ' + today,
alignment: 'left'
},
{
text: ' SYSTEM | ' + currentPage.toString() + ' of ' + pageCount,
alignment: 'right'
}
]
};
}
};
//create the pdf file
pdfMake.createPdf(docDefinition).open();
});
});
});
});
Can someone help me. how to create a filename when I'm downloading a PDf file. What happens on me, its creating a random filename for my PDF. I want to set a specific filename('Sample Name') if I download it.
Please Check my script where can I possible put the filename. Thank you so much
I have a chart I want to update as data comes in from an mqtt channel. However, I don't see how to append the steps series on the correct message.
var chart = c3.generate({
bindto: '#epoch-report',
data: {
columns: [
['steps',]
]
},
axis:{
x: {
max: .1,
label: {
text: "Epoch"
}
},
y: {
max: .1,
label: {
text: "Step",
}
}
}
});
if (topic == "/epoch/update") {
var j = JSON.parse(new TextDecoder("utf-8").decode(payload));
var msg = "<br> Epoch: " + j.id + " steps: " + j.steps + " winner: " + j.winner;
document.getElementById('epoch-report').innerHTML += msg;
console.log("Now I want to add data to ");
console.log(chart.data.values);
} else if (topic == "/epoch/setup") {
var j = JSON.parse(new TextDecoder("utf-8").decode(payload));
console.log("setting up epoch dash with max steps " + j.maxsteps);
}
I do not seem to be able to access chart.data.columns['step'] or anything similar. How do I add to steps?
I'm using vis.js v. 4.12.0. I've noticed that sometimes using Graph2d some points are not connected.
.
I think this behaviour depends on points distance; does someone knows how to force points connection?
#selten98: Sure, here my code:
for (var i in plot) {
groups.add({
content: labelArray[i],
id: plot[i],
options: {
shaded: {
orientation: "bottom"
}
}
});
for (var j in GD) {
if (GD[j].hasOwnProperty(plot[i])) {
items.push({
group: plot[i],
label: {
className: "visibility-hidden label-group-" + labelArray[i],
content: GD[j][plot[i]].toFixed(1),
xOffset: -10 / 3 * GD[j][plot[i]].toFixed(1).length,
yOffset: 20
},
x: new Date(GD[j].timestamp),
y: Number(String(GD[j][plot[i]]).replace(",", "."))
});
}
}
}
for (var i = 0; i < items.length; i++) {
if (i == 0) {
groups.add({
content: groupId,
id: groupId,
style: "stroke:" + arr_color[properties],
options: {
shaded: {
orientation: "bottom",
style: "fill:" + arr_color[properties]
},
drawPoints: {
styles: "stroke:" + arr_color[properties] + ";fill:" + arr_color[properties]
}
}
});
items[i].group = groupId;
scope.labels[properties].max = Number(items[i].y).toFixed(1);
scope.labels[properties].min = Number(items[i].y).toFixed(1);
} else {
if (items[i].label.className == items[i - 1].label.className) {
if (items[i].x.getTime() - items[i - 1].x.getTime() > Number(type[1]) * 60 * 1000) {
groupId++;
groups.add({
content: groupId,
id: groupId,
style: "stroke:" + arr_color[properties],
options: {
shaded: {
orientation: "bottom",
style: "fill:" + arr_color[properties]
},
drawPoints: {
styles: "stroke:" + arr_color[properties] + ";fill:" + arr_color[properties]
}
}
});
}
items[i].group = groupId;
scope.labels[properties].max = Math.max(scope.labels[properties].max, Number(items[i].y)).toFixed(1);
scope.labels[properties].min = Math.min(scope.labels[properties].min, Number(items[i].y)).toFixed(1);
} else {
groupId++;
properties++;
groups.add({
content: groupId,
id: groupId,
style: "stroke:" + arr_color[properties],
options: {
shaded: {
orientation: "bottom",
style: "fill:" + arr_color[properties]
},
drawPoints: {
styles: "stroke:" + arr_color[properties] + ";fill:" + arr_color[properties]
}
}
});
items[i].group = groupId;
scope.labels[properties].max = Number(items[i].y).toFixed(1);
scope.labels[properties].min = Number(items[i].y).toFixed(1);
}
}
}
var container = document.getElementById("graph");
container.innerHTML = "";
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {
left: {
format: function (value) {
return Number(value).toFixed(1);
}
}
},
drawPoints: {
style: "circle"
},
orientation: "top",
showCurrentTime: true,
end: new Date(end),
max: new Date(end),
min: new Date(start),
start: new Date(start)
};
startTime = options.start.getTime();
endTime = options.end.getTime();
var graph2d = new vis.Graph2d(container, dataset, groups, options);
I have the website that runs on javascript 1.7.1 and everytime i click a button that runs the Javascript method, the web load becomes far more heavier and continuously run the javascript up to the point that the site starts to lag.Here is an example of my JS method:
function makeGraph() {
var cityValue = [];
var cityValue2 = [];
var cityName = [];
var numIndex = [];
var tDelivery = [];
var tIdle = [];
var tRepair = [];
var tReady = [];
var barColor = "";
var cityString = "";
var chrt = document.getElementById("myCanvas");
var cityList = [];
cityList = arguments;
$.ajax({
url: '../api/values',
type: 'GET',
datatype: 'json',
success: function (data) {
for (var j = 1; j < cityList.length; j++)
{
cityString = cityString + "||" + " data[i].Names==\"" + cityList[j] + "\"";
}
cityString = "data[i].Names==\"" + cityList[0] + "\""+cityString;
for (var i = 0; i < data.length; i++) {
if (eval(cityString)) {
numIndex.push(i);
}
}
for (var k = 0; k < numIndex.length; k++) {
cityValue.push(data[numIndex[k]].ValuesDouble);
cityValue2.push(data[numIndex[k]].ValuesDouble2);
cityName.push(data[numIndex[k]].Names);
tDelivery.push(data[numIndex[k]].truckDelivery);
tIdle.push(data[numIndex[k]].truckIdle);
tRepair.push(data[numIndex[k]].truckRepair);
tReady.push(data[numIndex[k]].truckReady);
}
if (numIndex.length > 0) {
for (var h = 0; h < numIndex.length - 1; h++) {
barColor = barColor + "{y:" + cityValue2[h] + ",color:'" + setGraphColor(cityValue2[h], cityValue[h]) + "'}" + ",";
}
barColor = "[" + barColor + "{y:" + cityValue2[numIndex.length-1] + ",color:'" + setGraphColor(cityValue2[numIndex.length-1],cityValue[numIndex.length-1]) + "'}" + "]";
}
else {
barColor = "[" + barColor + "{y:" + data[numIndex[0]].ValuesDouble2 + ",color:'" + setGraphColor(data[numIndex[0]].ValuesDouble2, data[numIndex[0]].ValuesDouble) + "'}" + "]";
}
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor: 'black'
},
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b><br/><div>__________________________</div><hr>';
$.each(this.points, function () {
s += '<br/><span style="color:' + this.series.color + '">\u25CF</span><b>' + this.series.name + '</b>: ' + this.y;
});
return s;
},
shared: true
},
title: {
text: ''
},
xAxis: {
categories: cityName,
},
yAxis: {
min: 0,
tickInterval: 500,
title: {
text: ''
}
},
legend: {
verticalAlign: 'top',
reversed: false,
backgroundColor: 'lightgrey'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Daily Schedule',
data: eval(barColor)
},
{
name: 'Actual Delivery',
data: cityValue,
color: '#33FF66'
},
{
name: '0%-69%',
//data: cityValue,
color: '#FF3366'
},
{
name: '70%-89%',
// data: cityValue,
color: '#FFCC33'
},
{
name: '90%-100%',
// data: cityValue,
color: '#003DF5'
}]
});
});
//////////////GRAPH 2 INFLUENCE///////////
$(function () {
Highcharts.chart('container2', {
chart: {
type: 'column',
backgroundColor: 'black'
},
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b><br/><div>__________________________</div><hr>';
$.each(this.points, function () {
s += '<br/><span style="color:' + this.series.color + '">\u25CF</span><b>' + this.series.name + '</b>: ' + this.y;
});
return s;
},
shared: true
},
title: {
text: ''
},
xAxis: {
categories: cityName,
},
yAxis: {
min: 0,
max:80,
tickInterval: 20,
title: {
text: ''
}
},
legend: {
verticalAlign: 'top',
reversed: false,
backgroundColor: 'lightgrey'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'Truck Delivery',
data: tDelivery,
color: '#33FF66'
},
{
name: 'Truck Idle',
data: tIdle,
color: '#FFCC33'
},
{
name: 'Truck Repair',
data: tRepair,
color: '#FF3366'
},
{
name: 'Truck Ready',
data: tReady,
color: '#003DF5'
}]
});
});
//////////////GRAPH 3 INFLUENCE///////////
$(function () {
Highcharts.chart('container3', {
chart: {
type: 'column',
backgroundColor: 'black'
},
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b><br/><div>__________________________</div><hr>';
$.each(this.points, function () {
s += '<br/><span style="color:' + this.series.color + '">\u25CF</span><b>' + this.series.name + '</b>: ' + this.y;
});
return s;
},
shared: true
},
title: {
text: ''
},
xAxis: {
categories: cityName,
},
yAxis: {
min: 0,
tickInterval: 500,
title: {
text: ''
}
},
legend: {
verticalAlign: 'top',
reversed: false,
backgroundColor: 'lightgrey'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'Staff On Duty',
data: cityValue,
color: '#33FF66'
},
{
name: 'Staff Present',
data: cityValue,
color: '#003DF5'
},
{
name: 'Staff Absent',
data: cityValue,
color: '#FF3366'
}]
});
});
}
})
}
I also have run a developer tool in IE 11 which shows me that it is indeed from the nonstop javascript loop. I was wondering if anyone could help me stop the JS loop so that it is not continuous.(I am also using SignalR and i dont know if this is one of the factors).Thanks in advance.
These are the header tags:
<meta name="viewport" content="width=device-width" />
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="Scripts/highcharts/4.2.0/highcharts.js"></script>
<script src="Scripts/Chart.min.js"></script>
<script src="Scripts/Chart.js"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
and yes, I am using highchart.js in this function and the button is that so i can refresh and sort the graph according to the buttons i clicked which in these cases are categories of cities.
It seems that over 500 points causes our highstocks markers not to show at all - you can see
http://www.ethnographicedge.com/topic/senkaku-trial-400/ (400 pts) vs http://www.ethnographicedge.com/topic/senkaku-trial-600-s1/ (600pts). The data that's not showing is the "event" represented by the green sphere.
I've looked into editing the turboThreshold, but no luck..
Here's a simplified jsfiddle, and my full code below:
jsfiddle.net/marquex/etdL7/1
when you change the var points = 200; to 400, the red dot doesn't display. Is there a way to force certain mandatory points to show, regardless of the data size?
graphdata = <?php echo topic_data(get_the_ID()); ?>;
extradata = <?php echo extra_data(get_the_ID()); ?>;
eventdata = <?php global $events; echo json_encode($events) ?>;
eventdata.sort(function(a,b){
return a.date - b.date;
});
;(function($){
var parseData,
container = $('#graphcontainer'),
last = false,
m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
;
if(! container.length)
return;
getEventPoint = function(e,idx){
var color = 'gray';
if(e.forecast == 'fore_successful_down')
color = 'red';
else if(e.forecast == 'fore_successful_up')
color = 'green';
return {
x: parseInt(e.stringdate),
y: parseInt(e.value),
marker: {
enabled: true,
radius:8,
fillColor: color,
lineWidth:3,
lineColor: 'white',
states: {
hover: {
enabled: true,
radius:8,
fillColor: 'white',
lineWidth:3,
lineColor: color
}
}
},
name: idx
}
}
dateDay = function(day){
if( day % 10 == 1)
return day + 'st';
if( day % 10 == 2)
return day + 'nd';
if( day % 10 == 3)
return day + 'rd';
return day + 'th';
}
formatDate = function(timestamp){
var date = new Date(timestamp);
return m_names[date.getMonth()] + ' ' + date.getDay() + ', ' + date.getFullYear();
}
tooltipFormatter = function(data){
var point = data.points[0],
name = point.point.name,
output = '<div class="tooltip-date">' + formatDate(data.x) + '</div><div class="tooltip-value"><span class="tooltip-unit"><?php the_field("value_text") ?>:</span> ' + data.y + '</div>';
if(typeof name !== "undefined"){
var e = eventdata[name];
return '<div class="tooltip-date">' + formatDate(data.x) + '</div>' +
'<div class="tooltip-title">' + e.number + '</div>' +
'<div class="tooltip-trend tooltip-' + e.trend + '"></div> <!-- I will resize the image > background-size: -->' +
'<div class="tooltip-cycle">' + e.cycle + '</div>';
}
if(data.points[1])
output += '<div class="tooltip-secondary><div class="tooltip-value"><span class="tooltip-unit"><?php the_field("extra_value_text") ?>:</span> ' + data.points[1].y + '</div>'
return output;
}
parseData = function(data, eventsData){
var parsedData = [],
eventIdx = 0,
events = eventsData ? eventsData.slice(0) : [],
e = events[0]
;
if(e)
e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
for (var i = 0; i < data.length; i++) {
var item = data[i],
timestamp = false;
if(item.date && item.date.match(/^\d{4}\/\d{2}\/\d{2}$/) && item.value && parseFloat(item.value) == item.value){
timestamp = (new Date(item.date)).getTime();
if(e && timestamp > e.stringdate > last) {
parsedData.push(getEventPoint(e, eventIdx));
parsedData.push([timestamp, parseFloat(item.value)]);
e = events[++eventIdx];
if(e)
e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
}
else if(e && timestamp == e.stringdate) {
parsedData.push(getEventPoint(e, eventIdx));
e = events[++eventIdx];
if(e)
e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
}
else
parsedData.push([timestamp, parseFloat(item.value)]);
}
};
while(e){
parsedData.push(getEventPoint(e, eventIdx));
e = events[++eventIdx];
if(e)
e.stringdate = (new Date(e.date.substring(0,4) + '/' + e.date.substring(4,6) + '/' + e.date.substring(6,8))).getTime();
}
return parsedData;
};
var series = [{
name: 'Topic Data',
data: parseData(graphdata, eventdata),
color: '#666'
}];
if(extradata && extradata.length){
series.push({
name: 'Extra Data',
data: parseData(extradata),
yAxis: 1,
color: '#fbb800'
});
}
var yAxis = [{
title: {
text: '<?php the_field("value_text") ?>',
style: { color: '#BBBBBB', fontSize: '1.2em' },
margin: 12,
},
labels: {
enabled: false,
formatter: function() {
return this.value
}
},
height: 300,
lineColor: '#FFFFFF'
}];
if(extradata && extradata.length){
yAxis[0].lineWidth = 2;
yAxis.push({
title: {
text: '<?php the_field("extra_value_text") ?>'
},
height: 200,
top:350,
offset:0,
lineWidth:2,
lineColor: '#FFFFFF'
});
}
container.highcharts('StockChart', {
chart: {
type: 'spline',
events: {
load: function(e){
$('#tapapubli')
.detach()
.addClass('tapapubli')
.appendTo('#graphcontainer');
}
}
},
rangeSelector: {
enabled: false,
buttons:[
{
type: '<?php echo $initial_zoom["type"] ?>',
count: <?php echo $initial_zoom["count"] ?>,
text: 'Initial'
},
{
type: 'All',
text: 'Reset'
}
],
},
scrollbar: {
enabled: false,
},
navigator: {
maskFill: 'rgba(170, 170, 170, 0.75)',
series: {
color: '#FFD600',
lineColor: '#AE8800'
}
},
xAxis: {
labels: {
enabled: false
},
lineColor: '#FFF', /* BITBUCKET */
tickColor: '#666666',
tickLength: 0,
tickWidth: 1,
tickPosition: 'outside',
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: '%e of %b',
}
},
yAxis: yAxis,
plotOptions: {
lineColor: 'green',
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false
},
pointInterval: 36000000000,
point: {
events: {
click: function(){
//console.log(this);
if(this.name)
window.location.href = '#event-' + eventdata[this.name].number;
}
}
}
}
},
series: series,
tooltip: {
formatter: function(){
return tooltipFormatter(this);
},
useHTML: true,
borderColor: '#333',
shadow: false,
borderRadius: 0
}
});
if(!window.chart)
window.chart = container.highcharts();
})(jQuery);
var getPointRecursive = function(date, list){
if(list.length < 5){
var found = false;
for (var i = 0; i < list.length; i++) {
var point = list[i];
};
}
}
var getSeriesPoint = function(date){
}
As #Sebastian Bochan said, you just need to set plotOptions.series.dataGrouping.enabled = false explicitly. Then the problem will disappear.