Heat map with Highcharts and csv string data [duplicate] - string

I would like to do a heat map but without 'time' and integer as X and Y axis (In fact in the example of Highcharts http://jsfiddle.net/9pJhF/ it use csv with integers and data time) but with the strings, something like that:
'Name1','A',3077
'Name2','B',5486
'Name3','A',377
'Name4','B',546
'Name5','A',77
'Name6','B',46
I would like to know how is implemented the data variable when we not use the csv or a trick to circumvent the problem with csv strings.

You can use something like this
xAxis: {
//type: 'category',
categories: ['Name1','Name2','Name3'],
tickInterval: 1,
gridLineWidth: 1,
tickLength: 0,
lineWidth: 0,
min: 0,
max: 2
},
yAxis: {
categories: ['Name1a','Name2a','Name3a'],
tickInterval: 1,
title: {
text: null
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickLength: 0,
lineWidth: 0,
min: 0,
max: 2
},
http://jsfiddle.net/tZ6GP/5
http://jsfiddle.net/tZ6GP/6

Related

Chart JS change pointBackgroundColor based on data value

So I have created a basic line chart using Chartjs. How would I go about changing the color of the points (pointBackgroundColor) depending on the value of the data? For example, if the data point is less than 10 it changes to red, or if the data point is between 10 and 20 it changes to blue?
const CHART = document.getElementById("lineChart");
let lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["5/10/2010", "5/11/2010", "5/12/2010", "5/13/2010", "5/14/2010", "5/15/2010", "5/16/2010"],
datasets: [
{
label: "Theta",
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(9,31,62)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,191,255)",
pointBackgroundColor: "rgba(0,191,255)",
pointBorderWidth: 5,
pointBorderRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [15, 28, 11, 3, 34, 65, 20],
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false,
},
scales: {
yAxes:[{
ticks: {
fontColor: "#091F3e",
beginAtZero: true,
steps: 10,
stepSize: 10,
max: 100
},
gridLines: {
display: false
}
}],
xAxes:[{
ticks: {
fontColor: "#091F3e",
fontSize: "10",
},
gridLines: {
display: false
}
}]
}
}
});
You can use a closure on any option and manipulate the returned value according to the context. In the example bellow I'm the pointBackgroundColor is red when the current value is greater then 0 and blue otherwise.
pointBackgroundColor: function (context) {
let value = context.dataset.data[context.dataIndex];
return value > 0
? 'red'
: 'blue';
},
Here is another thing that may help you Change bar color depending on value.
Its original answer from Tot Zam
Adding the code sample in case the link doesn't work.
var colorChangeValue = 50; //set this to whatever is the decidingcolor change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] > colorChangeValue) {
dataset.backgroundColor[i] = chartColors.red;
}
}
myChart.update();
Its about bars background, but you can try work around and find same solution.

Flot line graph messing up data for x-axes and y-axes

I am making a line graph in Flot, but i can't manage to put x-axes and y-axes to display data normally, they are stick together. How can i make it to be over whole graph. I didn't find in any documentation how to fix that.
This need to be on left side outside of graph : [0.24, "0.24 USD"], [2085.95, "2085.95 USD"]
and this on bottom of a graph
[0, "0"], [1, "Jan"], [275, "Aug"], [549, "Mar"], [823, "Oct"], [1097, "Jun"], [1371, "Dec"], [1372, "Dec"]
Here is an image how it looks now, all is grouped on bottom left corner
And this is how it need to looks like, this is image from Flot website
Here is a code:
var data1 = [{chart_data_money}];
var dataset = [{
data: data1,
color: '#ffa500',
label: 'Loss in USD',
points: { symbol: "circle", fillColor: "#FF000;", show: true}
}];
var options = {
series: {
lines: { show: true },
points: {
radius: 1,
fill: true,
show: true
}
},
xaxes: [{
position: "bottom",
ticks: '{chart_xticks_money}',
color: "black",
axisLabel: "Sin(x)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}],
yaxes: [{
position: "left",
color: "red", // lines colors for y axes
ticks: '{chart_yticks_money}',
axisLabel: "Sin(y)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}],
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
// legend postion and color
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "orange",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }, // 2 colors gradient for bg of chart
axisMargin: 20
}
};
$(document).ready(function () {
$.plot($("#graph-line"), dataset, options);
});
The problem is that you give Flot your axis ticks as string instead of array:
ticks: '{chart_xticks_money}',
needs to be
ticks: {chart_xticks_money},
and the same for the other axis.
This fiddle has the same error as your image, and this is the correct version without the '.

Alter SVG After Highcharts is Redrawn

I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.
To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.
This is my configuration:
xAxis: [{
type: 'datetime',
showFirstLabel: true,
showLastLabel: true,
labels: {
step: 3,
formatter: function(){
return options.labels[this.value];
},
style: {
fontSize: '10px',
color: '#9c9c9c'
},
// x: 5,
y: 10
},
startOnTick: true,
// lineColor: 'transparent',
tickLength: 0,
minPadding: 0,
maxPadding: 0
}],
The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.
This was my solution on 'load', which I'd like to replicate on 'redraw':
Highcharts.Chart.prototype.callbacks.push(function(chart){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});
You should configure these callbacks in the options of your chart. It's cleaner that way:
function moveLabels(){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}
$('#container').highcharts({
chart: {
events: {
load: moveLabels
redraw: moveLabels
}
}
},
...

Syntax to create a heat map with Highcharts

I would like to do a heat map but without 'time' and integer as X and Y axis (In fact in the example of Highcharts http://jsfiddle.net/9pJhF/ it use csv with integers and data time) but with the strings, something like that:
'Name1','A',3077
'Name2','B',5486
'Name3','A',377
'Name4','B',546
'Name5','A',77
'Name6','B',46
I would like to know how is implemented the data variable when we not use the csv or a trick to circumvent the problem with csv strings.
You can use something like this
xAxis: {
//type: 'category',
categories: ['Name1','Name2','Name3'],
tickInterval: 1,
gridLineWidth: 1,
tickLength: 0,
lineWidth: 0,
min: 0,
max: 2
},
yAxis: {
categories: ['Name1a','Name2a','Name3a'],
tickInterval: 1,
title: {
text: null
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickLength: 0,
lineWidth: 0,
min: 0,
max: 2
},
http://jsfiddle.net/tZ6GP/5
http://jsfiddle.net/tZ6GP/6

How to render this bar chart with flot

Can you render a bar chart like this using flot?
Do I need to create the dataset manually to get this result, instead of using mode: 'time' ?
Actually pretty easy to produce using flot.
var options = {
series: {
bars: {
show: true,
barWidth: 15778463000, // 1/2 year in milliseconds
align: 'center'
},
},
yaxes: {
min: 0
},
xaxis: {
mode: 'time',
timeformat: "%y",
tickSize: [1, "year"],
autoscaleMargin: .10 // allow space left and right
}
};
$(function() {
$.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value]
[1262304000*1000, 200],
[1293840000*1000, 300]]], options);
});
Produces:

Resources