I have a page that is capable of charting multiple csv files through highcharts with an add button that dynamically creates a div that then charts the file. The problem is that I need to save it so that when the page reloads, the multiple charts added stays and does not get refreshed. A delete all button is also included so it removes all the dynamically added divs.
I have currently tried localStorage.getitem however it does not replicate the graph created with all its functionality, just an image.
https://jsfiddle.net/j_darmawan/m5vcu08e/
$('#super').html(window.localStorage.getItem('content'));
$('#delete').click(function() {
localStorage.removeItem('content');
alert('removed');
$('#container').empty();
});
$('#save').click(function() {
var html = $('#super').html();
window.localStorage.setItem('content', html);
alert('saved');
});
Here is the method to save the data in local storage of browser and retrive the same while reload
Storing data in local storage:
localStorage.setItem('chart_'+count, JSON.stringify(storeData));
Here count is incremented value to store the multiple charts data in localStorage.
Retrieving data from localStorage:
var dynamicData = JSON.parse(localStorage.getItem('chart_'+i));
Since we are storing JSON object it needs to be parse again while fetching it.
Code is working in fiddle:https://jsfiddle.net/jk25L9er/
Since there is CORS issue in StackOverflow code is tested in jsfiddle
var defaultData = 'https://raw.githubusercontent.com/j-darmawan/Charting/master/samplebar.csv';
var urlInput = document.getElementById('fetchURL');
var pollingCheckbox = document.getElementById('enablePolling');
var pollingInput = document.getElementById('pollingTime');
var count = 1;
//localStorage.clear();
console.log(localStorage);
$(function(){
var numbercnt = 1;
$('button.add').click(function(e){
e.preventDefault();
console.log(numbercnt);
createChart('',numbercnt);
})
function createChart(dynamicData = '',number ='') {
$('#super').append('<div id="bton"><button type="button" class="design_button" id="chart_'+number+'">Remove chart below</button><div id="settings'+number+'"></div></div>');
if(dynamicData == ''){
var storeData = {
'csvURL' : urlInput.value,
'enablePolling' : pollingCheckbox.checked === true,
'dataRefreshRate' : parseInt(pollingInput.value, 10),
'firstRowAsNames' : false,
};
localStorage.setItem('chart_'+number, JSON.stringify(storeData));
}else{
var storeData = dynamicData;
numbercnt = localStorage.getItem('chart_total');
}
var chartData = {
csvURL: storeData.csvURL,
enablePolling:storeData.enablePolling,
dataRefreshRate: storeData.dataRefreshRate,
firstRowAsNames: storeData.firstRowAsNames,
complete: function(csv) {
csv.series[0].data.forEach(function(point, i) {
csv.series[0].data[i] = {
x: point[0],
y: point[1],
customInfo: csv.series[1].data[i][1]
}
})
csv.series.pop()
}
};
Highcharts.chart('settings' + number,{
chart: {
type: 'line'
},
title: {
text: 'Sample' + ' Slip'
},
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
data: chartData,
series: [{
name: 'Slip'
}],
yAxis: {
plotLines: [{
value: 0,
color: 'black',
width: 2,
zIndex: 1
}]
},
plotOptions: {
series: {
color: 'red',
negativeColor: 'green'
}
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>Last Updated: <b>{point.customInfo}</b>'
}
});
if (pollingInput.value < 1 || !pollingInput.value) {
pollingInput.value = 1;
}
numbercnt++;
localStorage.setItem('chart_total', numbercnt);
}
$('#super').on('click','button.design_button', function(e){
e.preventDefault();
$(this).parent().remove();
// Remove from localstorage 2019-09-12 11:50:03
localStorage.removeItem($(this).attr("id"));
});
function loadDynamicData(){
var length = localStorage.getItem('chart_total');
for(var i =1;i<=length ;i++){
if(localStorage.getItem('chart_'+i)){
var dynamicData = JSON.parse(localStorage.getItem('chart_'+i));
console.log(dynamicData)
createChart(dynamicData,i);
}
}
}
loadDynamicData();
});
urlInput.value = defaultData;
// We recreate instead of using chart update to make sure the loaded CSV
// and such is completely gone.
// pollingCheckbox.onchange = urlInput.onchange = pollingInput.onchange = createChart;
// Create the chart
//createChart();.ld-label {
width: 200px;
display: inline-block;
}
.ld-row {}
.ld-url-input {
width: 500px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Slip Charting</title>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<h1>Slip Charting</h1>
<div class="ld-row">
<label class="ld-label">
Enable Polling
</label>
<input type="checkbox" checked="checked" id="enablePolling" />
</div>
<div class="ld-row">
<label class="ld-label">
Polling Time (Seconds)
</label>
<input class="ld-time-input" type="number" value="2" id="pollingTime" />
</div>
<div class="ld-row">
<label class="ld-label">
Project Number
</label>
<input class="ld-url-input" type="text" id="fetchURL" />
</div>
<button type="button" id="add" class="design_button add">Draw</button>
<div id ="super">
<div id="container">
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="./script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>