We Keep Coding

Custmizing timeline time format and aspect

Im trying to customize 2 things of this fiddle but im finding some trouble: https://jsfiddle.net/eLqmpawz/
Fix the problem where, wher you have small device, all the lines screw up (like in the pic).
var data = {
"type": "timeline",
"elements": {
"colorFunction": function(text, data, dataset, index) {
return Color('black');
},
"showText": true,
"textPadding": 4
}
}
}
Can please anybody help? Thanks

Chart.Js -"Cannot read property 'datasets' of undefined" when trying to update chart

I've looked into quite a few threads on here regarding how to dynamically update chart.js charts. I've tried to follow the answers as best I can, however every time I try to update the chart periodically with data from my database i get the aforementioned error.
I declare sentimentMainContent, which is to be the chart object when the page is fully loaded. Within the document ready function the getStatsUpdate function exists, which makes periodic calls to a database to retrieve data regarding the positive and negative sentiment for the home and away team for a game of football.
Upon retrieving the data, it will first create the chart (it does this when statsRenderCount is 0), and will subsequently update it. It does the first part of creating the graph with the data from the initial call correctly, however subsequent calls will enter the else statement and try to update the chart. Here I receive the "Cannot read property 'datasets' of undefined" error.
As far as my understanding goes, it's as if it isn't recognising that sentimentMainContent exists, as if it doesn't exist within its scope, however I know this can't be correct, as I've declared it at the very start of the document ready load function, within which getStatsUpdate() sits. So sentimentMainContent can't be undefined, surely?
$(document).ready(function(){
var sentimentMainContent = 0;
...
...
...
function getStatsUpdate(){
...
var result = initialResponse.split("___");
tweet_time = result[0]
home_avg = result[1];
home_positive = result[2];
home_negative = result[3];
home_neutral = result[4];
away_avg = result[5];
away_positive = result[6];
away_negative = result[7];
away_neutral = result[8];
var home_sentiment = {
labels: [
homeTeam + " Positive",
homeTeam + " Negative",
awayTeam + " Positive",
awayTeam + " Negative",
],
datasets: [
{
data: [home_positive, home_negative, away_positive, away_negative],
backgroundColor: [
"#F5003F",
"#3C9BFF",
"#26FF9A",
"#FFE951"
],
borderColor: [
"black",
"black",
"black",
"black",
"black",
"black"
],
borderWidth: [
"0.5",
"0.5",
"0.5",
"0.5",
"0.5",
"0.5",
],
hoverBackgroundColor: [
"#F5003F",
"#FAFAFA",
"#3C9BFF",
"#26FF9A",
"#FF5720",
"#FFE951"
]
}
]
};
if(statsRenderCount == 0)
{
alert("re-rendering!");
sentimentMainContent = new Chart(document.getElementById("sentiment-stat"), {
type: 'doughnut',
data: home_sentiment,
options: {
cutoutPercentage: 60,
responsive: true,
legend: {
display: false
},
tooltips: {
filter: function(item, home_sentiment) {
var label = home_sentiment.labels[item.index];
if (label) return item;
}
}
}
});
statsRenderCount += 1;
}
else
{
alert("updating");
sentimentMainContent.home_sentiment.datasets[0] = home_sentiment;
sentimentMainContent.update();
}
}
I also tried sentimentMainContent.home_sentiment = home_sentiment; as it seemed that the approach was flawed in that sentimentMainContent.home_sentiment.datasets[0] represents the datasets array, and I was assigning to this the entire home_sentiment variable, which seemed incorrect. Regardless, when I make this change, no error occurs, however the chart doesn't update at all.
Is there something glaringly obvious I'm overlooking here?

How do you create a stacked bar chart in d3 when each individual segment is an object?

I'm trying to create a chart in d3 so it appear as such: https://ibb.co/j13i5T
The data format is the following and cannot change:
var data = [
{
"year": "1991",
"color":"purple",
"value":12,
},
{
"year":"1991",
"color":"red",
"value":8,
},
{
"year": "1992",
"color":"red",
"value":20,
},
{
"year": "1993",
"color":"blue",
"value":9,
},
{
"year": "1993",
"color":"red",
"value":7,
},
{
"year": "1993",
"color":"purple",
"value":3,
},
]
I've been able to get each object to get placed in the corresponding year, but I'm struggling to stack them.
This is the code, however although it shows on my computer locally, I haven't made it work in the fiddle: https://jsfiddle.net/joat1/kug91hm0/34/
If there's a better way to go about things overall as well, am definitely open to advice.

As I commented above, my preferred solution is to use ChartJS for these kinds of projects. I went ahead and took a quick stab at recreating your example chart with a (relatively) simple data transform to map your incoming data into a format that ChartJS can read.
The codepen for that is here https://codepen.io/jsanderlin/pen/dKqEod
I would look at the code performing the data mapping/preprocessing for ChartJS below, as that is the most complicated bit of JavaScript involved in this process. The rest of the JS/HTML is just pulled from ChartJS documentation and the Stacked Chart sample here.
data.forEach((val) => {
// Add the label if it doesn't exist already
if(!barChartData.labels.includes(val.year)) {
barChartData.labels.push(val.year);
}
// Search for the correct dataset
let valsDataset;
let datasetName = `Dataset ${val.color}`;
barChartData.datasets.forEach((dataset) => {
if(dataset.label === datasetName) valsDataset = dataset;
});
// Add the dataset if it doesn't exist already
if(valsDataset === undefined) {
valsDataset = {
label: datasetName,
backgroundColor: val.color,
data: []
}
barChartData.datasets.push(valsDataset);
}
// Find the correct index of the data array for this value, by looking up the year
let valIndex = barChartData.labels.indexOf(val.year);
// Set the correct data attribute according to val.value
valsDataset.data[valIndex] = val.value;
});
Fun project to work on this afternoon ;)

Highcharts not displaying charts through angular controller

I started playing with highcharts for a project I am doing. Highcharts was displaying properly when I dumped a massive array of data into it, but now that I am trying to parse through groups of data that I retrieved through MongoDB I can't get it to display.
Here is my angular
$scope.retrieveData = function(){
$http.get('/calldata').then(function(response){
$scope.toneDatas = response.data
var idArray = []
angular.forEach($scope.toneDatas, function(value, key) {
idArray.push({id: value._id, social_tone_data: value.social_tone_data})
for (var i = 0; i < idArray.length; i++) {
if (idArray[i].id === value._id) {
console.log(idArray[i].id)
var socialToneName = []
var socialToneScore = []
angular.forEach(value.social_tone_data, function(value, key) {
socialToneScore.push(value.tone_score)
socialToneName.push(value.tone_type)
})
$("#" + value._id).highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: socialToneName
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
data: socialToneScore
}]
});
};
};
})
});
};
When the page loads a get request calls the database and gets the data to be served to the web page, and I am trying for now to get the data group social_tone_data to display on a chart. I have 19 documents in my mongo database and want it so that each time the loop completes, one chart is generated and served to my webpage. I should have 19 charts. I am still playing around with the code but any help is appreciated.
UPDATE
I refactored my code through an angular directive and used the element argument to display on the page.

Some good info using NG-Highcharts.
as others have said, use a directive to modify dom elements, not controller & def not jQuery as updates fall outside of angulars digest loop.
Your example needs the supplemental template/html code to be relevant.

Highcharts column Point Click

Hello I have already asked a question on Highcharts Point Click not working. Further to that what I have found is my click function works in google chrome but not in IE 8. Can you please help me with this? I am not getting any responses on my earlier question hence I am posting this again -
Below is my code -
var columnoptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Exposure Details - Column Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Exposure'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('here');
}
}
}
}
},
series: []
};
and below is the function which draws column chart -
function displayColumnChart(){
columnoptions.series = [];
columnoptions.xAxis.categories = [];
var seriesOptions = {
name: 'chart',
data: [],
};
for(index = 0; index < categoryArray.length; index++){
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
}
columnoptions.series.push(seriesOptions);
chart = new Highcharts.Chart(columnoptions);
}
Is it because the way I am dynamically creating this chart? Please guide me regarding this. I am getting error - Object doesnt support this property or method. Highcharts.js line 25. Code 0. Char 55. I wish to implement chart drill down. Hence need to get this working. And IE is standard browser in the company. Please help me.

Object doesnt support this property or method
This is the Javascript error generated mostly in IE.
Always check for extra comma,single quote in your code when you encounter such JS error.
I can see such one in your code snippet.
var seriesOptions = {
name: 'chart',
data: [],
};
This should be
var seriesOptions = {
name: 'chart',
data: []
};
Firefox ignores such error but IE does not let you go. :)

I just used latest highcharts files 2.2.5 and that solved it. Works in IE8. And I feel overall performance is also improved..smooth. Thanks. :)