Related
I am migrating from Highcharts to ChartJs (v2.8), and in Highcharts, I can get the drawn ticks, and then modify the point style relational with this tick, as shown below:
but in ChartJs I don't see any way of doing that, I don't be able to get the drawn ticks and I don't see the way of modifying the style of only some points either. It's not possible?
Actual config:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
datasets: [
{
data: [611, 605, 594, 581, 573, 578, 585, 587, 588, 595, 601, 605, 608, 610, 612, 611, 612, 613, 616, 618, 621, 623, 625, 627, 628, 631, 636, 638, 643, 650],
fill: false,
borderWidth: 1,
pointRadius: 3,
pointBorderWidth: 1,
pointBackgroundColor: "#adadad",
pointHoverRadius: 6,
pointHoverBorderColor: "#adadad",
pointHoverBackgroundColor: `${"#adadad"}30`,
pointHoverBorderWidth: 1,
},
]
},
options: {
responsive: true,
tooltips: {
mode: 'interpolate',
intersect: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
distribution: 'series',
time: {
displayFormats: {
month: '%e. %b',
},
},
ticks: {
maxRotation: 0,
autoSkip: true,
autoSkipPadding: 10,
},
}],
yAxes: [{
gridLines: {
drawBorder: false,
},
ticks: {
padding: 15,
},
}],
},
colors: [{
borderColor: "#adadad",
}],
showLegend: false,
}
}
Example
I'm using a column chart with a slider that redraws the chart after slide operation is invoked. I'm storing each data array in a javascript object and the chart renders according to the slider option. After assigning the initial values for the first slider option, the chart renders correctly but when I slide back to the first position, the chart won't render. And the weird part is when I assign the initial values to a separate variable and the data option is assigned with this variable, the chart renders correctly at every position.
Here's the code:
var data = {
"jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0],
"feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25],
"mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15],
"apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30],
"may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43],
"jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57],
"jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312],
"aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30],
"sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30],
"oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30],
"nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30],
"dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30]
};
var someData = [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0];
var chart = new Highcharts.chart({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 50,
marginLeft: 100,
marginBottom: 50
},
title: false,
exporting: {enabled: false},
xAxis: {
crosshair: true,
tickColor: '#7F7F7F',
lineColor: '#7F7F7F',
tickWidth: 0,
labels: {
step: 5
},
title: {
text: 'x-axis',
align: "left",
x: -10,
rotation: 0,
style: {
"font-size" : "15px"
}
}
},
yAxis: {
min: 0,
title: {
text: 'y-axis',
align: 'high',
rotation: 0,
y: -10,
offset: 0,
style: {
"font-size" : "15px"
}
},
gridLineColor: 'transparent',
lineColor: '#7F7F7F',
lineWidth: 1,
tickWidth: 1,
tickColor: '#7F7F7F',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
step: 2,
formatter: function(){
if(this.value > 999)
return Math.round(this.value/1000) + 'k';
return this.value;
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: someData
}],
credits: false
});
$('#slider_bar').on("slide", function () {
chart.series[0].setData(data[document.getElementById('value').innerHTML]);
});
The initial position of the slider is at jan and the chart renders correctly when I slide back to jan. I'd like to know why the chart won't render when I assign series.data as:
data: data.jan
Any suggestions?
Highchart series.data expects a key value pair, or an array of arrays like
[[x1,y1],[x2,y2]]
or
{
y: [x1,x2]
}
now when you do data = data.jan Highchart is not able to find the Y value because data.jan is a simple array
Found the solution:
instead of writing
data: data.jan
write
data: data.jan.slice()
The slice function does not directly returns the reference of the array, instead it returns a copy of the array. I still wonder why we need to use the slice function in the first place, for this particular situation but it works.
I'm new to flot. I have this bar chart:
and here is the code I used for it:
$.getJSON('chartBar.json', function(graphDataBar){
$.plot($('#graph-bars'), graphDataBar, {
series: {
bars: {
show: true,
barWidth: .1,
align: 'right'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']],
min: 5.5,
max: 10.5,
mode: 'time',
timeformat: "%b %d",
minTickSize: [1, "day"],
tickSize: [1, "day"],
autoscaleMargin: .10
},
yaxis: {
tickSize: 5
}
});
I ve tried to use the properties inside x-axis but nothing seems to help.
I know there is a way to do it, I ve seen examples such as This one.
But it doesnt seem to work.
What Im trying to succeed here is this
As well I ve seen other sample on Stackoverflow like This
But it still didnt work out. Im not sure if I see this the wrong way, or if I need to use the timestamp in order to make it work, but I do it the wrong way.
Could anyone explain to me how the solution would work? I would like to understand it for future Bar Charts
Thank you in advance
I've made an assumption that the JSON data is the same as in your other question here so apologies if this is not the case.
I've created a Fiddle here that demonstrates the "non stacked bars" using the following JSON data:
[
{
"data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
"color": "#F02626",
"points": { "fillColor": "#F02626", "radius": 6 },
"lines": { "fillColor": "#CCF8FF"}
},
{
"data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
"color": "#26F041",
"points": { "radius": 10, "fillColor": "#26F041" }
},
{
"data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
"color": "#20AEFA",
"points": { "radius": 6, "fillColor": "#20AEFA"}
}
]
This uses the orderBars plugin. The key to getting the bars to appear side by side (rather than vertically) is to set the series.bars.order attribute to 1:
series: {
bars: {
...
order: 1
}
},
I'm new to json and flot. But I ve been asked to create a chart. Could someone explain to me why my code will not work?
$.getJSON('chart.json', function(graphData){
alert(graphData);
$.plot($('#graph-lines'), graphData, {
series: {
points: {
show: true,
radius: 15,
},
lines: {
show: true,
lineWidth: 6
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true,
highlightColor: "transparent"
},
xaxis: {
tickColor: 'transparent',
ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']]
},
yaxis: {
min: 0,
max: 1000,
tickSize: 500
}
});
// Bars
$.plot($('#graph-bars'), graphData, {
series: {
bars: {
show: true,
barWidth: .9,
align: 'center'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
tickDecimals: 2
},
yaxis: {
tickSize: 1000
}
});
});
From what I ve learned so far is that jquery $.getJSON('chart.json', function(graphData) should retrieve the json file. and $.plot($('#graph-lines'), graphData,{}) should parse it.
This is my JSON file:
{
data: [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
color: '#F02626',
points: { fillColor: '#F02626', radius: 6 },
lines: { fillColor: '#CCF8FF'}
}, {
data: [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
color: '#26F041',
points: { radius: 10, fillColor: '#26F041' }
}, {
data: [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
color: '#20AEFA',
points: { radius: 6, fillColor: '#20AEFA'}
}
So, I need all the properties in JSON (data, color and point) as they will override the default and give each line or bar a different color.
I got it working before. I had the json written inside .js but I want to call it from an external JSON file.
Im not looking for an answer "Try this". I would like to understand what I'm doing wrong and why, so I can learn why it works the way it does.
Thank you in advance.
it's simple your json file is not valid
it should be like this
[
{
"data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
"color": "#F02626",
"points": { "fillColor": "#F02626", "radius": 6 },
"lines": { "fillColor": "#CCF8FF"}
},
{
"data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
"color": "#26F041",
"points": { "radius": 10, "fillColor": "#26F041" }
},
{
"data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
"color": "#20AEFA",
"points": { "radius": 6, "fillColor": "#20AEFA"}
}
]
I have a page with multiple instances of handsontable. All custom properties of a handsontable seems to be attached to the last rendered table.
Is there anyway to get around this?
For Example in the image below while hovering on the top table, comments on the bottom table are shown
Fiddle
code:
$(document).ready(function () {
function getData() {
return [
["", "Kia", "Nissan", "Toyota", "Honda"], ["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13]];
}
var container1 = document.getElementById('example1');
var container2 = document.getElementById('example2');
var options = {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}]
};
var hot1 = Handsontable(container1, options);
var hot2 = Handsontable(container2, options);
})
This issue has been fixed by the Handsontable team.