I have this example from chart.js docs:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [
{
type: 'bar',
label: 'Bar Component',
data: [10, 20, 30],
},
{
type: 'line',
label: 'Line Component',
data: [30, 20, 10],
}
]
}
});
It works fine. However, my intention is to change the type dynamically.
I am aware that there is getDatasetMeta() method, that you can apply to your chart instance, and if I output the result it returns to the console I get something like this:
{
bar: true,
controller: ChartElement,
data: Array[...],
dataset: null,
hidden: false,
type: 'bar',
...
}
I can control the appearance of a certain dataset via hidden property, though if I change type to line and invoke update() it won't re-render.
So, is there a way to dynamically change dataset type?
Found a workaround here: Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
Sad that it's not yet supported officially.
Related
I have a question. I want to create horizontal stacked bar chart which will show status code (filled with corresponding color) in timeline.
How it should look
Actually I have created plugin for chart like this (effect is visible on the picture) but it's far away from perfection (no tooltips etc, it's only canvas drawing). I'm wondering if it's possible to achieve this chart without my own controller, maybe am I missing sth from docs?
Also I tried to create it with floating bar chart but I have to create a new dataset for every status change, here is my dataset definition and full code on jsfiddle.
const options = {
data: {
datasets: [{
label: 'Status 1',
data: [
[new Date('2021-09-11T00:00:00'), new Date('2021-09-13T00:00:00')]
],
backgroundColor: "red",
},
{
label: 'Status 2',
data: [
[new Date('2021-09-14T00:00:00'), new Date('2021-09-15T00:00:00'), ]
],
backgroundColor: "blue",
},
{
label: 'Status 3',
data: [
[new Date('2021-09-16T00:00:00'), new Date('2021-09-18T00:00:00')]
],
backgroundColor: "orange",
},
{
label: 'Status 2',
data: [
[new Date('2021-09-18T00:00:00'), new Date('2021-09-18T10:00:00')]
],
backgroundColor: "blue",
},
{
label: 'Status 1',
data: [
[new Date('2021-09-18T10:00:00'), new Date('2021-09-22T00:00:00')]
],
backgroundColor: "red",
}]
}
}
https://jsfiddle.net/7esko3vw/
Any ideas?
Hello i have a wird issue that the echarts is not loading even there is an instance on the DOM. I want to load it inside a widget. It works fine otherwise.
no chartdissplayed
chart displayed in html
My chart code:
var myChart = echarts.init(document.getElementById('displayarea'));
var option = {
title: {
text: 'ECharts '
},
tooltip: {},
legend: {
data:['aa']
},
xAxis: {
data: ["aa","bb","cc","dd","ee","ff"]
},
yAxis: {},
series: [{
name: 'rr',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
Can anyone guide on what could be the issue. Thanks in advance.
I have the following array:
Where the arrays keys are the dates and the only element I want to plot, of each set, is the weight. Look:
I am putting the code as follows. Notice that I am already grouping in the date attribute the whole set belonging to each that key.
var ctx = document.getElementById("barChart").getContext("2d");
var data = {
labels: ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'],
datasets: [
{
label: '21/03/2018',
data: [12, 0, 0]
},
{
label: '01/04/2018',
data: [15.00, 15.00,15.00]
},
{
label: '02/04/2018',
data: [25.00, 25.00, 25.00]
},
{
label: '04/04/2018',
data: [25.00, 25.00, 25.00]
},
{
label: '05/04/2018',
data: [-8.14,-7.93, -7.84]
},
{
label: '06/04/2018',
data: [-35.9 ,-38.1, -37.5]
},
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
});
But in this way ChartJs does not understand that it only needs to plot the data set present in the "data" attribute and grouping them by the key. Plotting the graph in the wrong way.
How could I plot the data correctly knowing that they are already grouped?
You need to organize your data as such:
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
labels: ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'],
datasets: [
{
data: [12, 15.00, 25.00, 25.00, -8.14, -35.9]
},{
data: [0, 15.00, 25.00, 25.00, -7.93, -38.1]
},{
data: [0, 15.00, 25.00, 25.00, -7.84, -37.5]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options:{
legend: 'none'
}
});
I took your legend out as it's useless in this case. To look at it in the coding persepective, whatever index the date in labels is at needs to correlate with the index of the information you want to display in that grouping. data[0] refers to labels[0] and so on.
I am simply trying to allow each data section or series of a pie chart via highcharts to be clickable, eg. Shop section should link to #shop_section I've found demos where a global link was set to every data section in a chart. But I simply would like a unique #link to be accessible via clicking one of my three data sections / series.
series: [{
innerSize: '30%',
data: [
['Shop', 10],
['Buy', 10],
['Own', 10],
]
}]
});
This didn't work: (attempt)
data: [
{name: 'Shop', 10, url: 'http://my_site1.com'},
{name: 'Buy', 10, url: 'http://my_site2.com'},
{name: 'Own', 10, url: 'http://my_site3.com'}
]
Your series is incorrect, it should be:
data: [
{name: 'Shop', y: 10, url: 'http://my_site1.com'},
{name: 'Buy', y: 10, url: 'http://my_site2.com'},
{name: 'Own', y: 10, url: 'http://my_site3.com'}
]
Using plotOptions would do the work:
plotOptions: {
series:{
point:{
events:{
click: function(){
window.location.href = this.url;
}
}
}
},
},
By simply using a series->point->events we can speficy which events to delegate to our series points (in the case of a pie chart a point is a "slice").
On the event handler function itself, this refers to the clicked point, therefore I can directly use the custom property url you've set.
EDIT:
So now I have a chart with all my data pushed off to the right, BUT I have labels in different colors for the sets I want to show but no data?? Updated my code
Original post:
I have a working highchart here http://opensourcesurf.com/chart.html . The problem is when I try and change the color of an individual data set, they all change. How could I change these settings given my code? Thanks in advance!
code:
var options1 = {
chart: {
renderTo: 'container1',
type: 'area'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Swell Period',
color: '#0066FF',
data: 'newSeriesData',
},
{ name: ' Maximum Breaking Wave Height',
color: '#ffffff',
data: 'newSeriesData',
},
{ name: 'Swell Height',
color: '#123456',
data: 'newSeriesData',
}],
};
var drawChart = function(data, name, color) {
var newSeriesData = {
name: name,
data: data
};
// Add the new data to the series array
options1.series.push(newSeriesData);
// If you want to remove old series data, you can do that here too
// Render the chart
var chart = new Highcharts.Chart(options1);
};
$.getJSON('decode.php', function(data){
drawChart(data, 'Swell Height');
});
$.getJSON('decode2.php', function(data){
drawChart(data, ' Maximum Breaking Wave Height');
});
$.getJSON('decode3.php', function(data){
drawChart(data, 'Swell Period');
});
Try this:
// 'series' is an array of objects with keys:
// - 'name' (string)
// - 'data' (array)
// - 'color' (HTML color code)
var newSeriesData = {
name: name,
data: data,
color: color
};
The way to specify a color for a specific series is to define it when you're defining the series. For example:
series: [{
name: 'John',
color: '#0066FF',
dashStyle: 'ShortDash',
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 2, 1), 71.5],
[Date.UTC(2010, 3, 1), 106.4]
]
},
So essentially when you're creating your series in your drawchart function, do a check for the name, and appropriately assign a color:
var color;
if(name=="Swell Height"){
color="#0066FF";
}else if(name=="Maximum Breaking Wave Height"){
color="#0066EE";
}else if(name=="Swell Period"){
color="#0066HH";
}
var newSeriesData = {
name: name,
data: data,
color: color
};
It looks to me like you are not looping through the array of data and/or you only have one set of data in data.