Related
I am using a scatter diagram with apexcharts like this: https://apexcharts.com/javascript-chart-demos/scatter-charts/basic/.
My problem is that if there is two or more datapoints with the exact same value, they will be stacked above eachother and therefore only one is shown and the other ones are completely hidden (not shown on hover either).
Is there any function to make them all viewable even if they have the same value? Maybe some sort of offset if more of the same value or some tooltip showing number of layers or something?
Code:
var options = {
series: [{
name: "Data A",
data: [
[16, 5], [16, 5, [16, 5], [15, 2], [14, 1], [14, 4]]
},{
name: "Data B",
data: [
[16, 5], [14, 1], [14, 4], [12, 11]]
},
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
so here is code :
var data = [
['tn-4431', 0],
['tn-sf', 1],
['tn-me', 2],
['tn-to', 3],
['tn-mn', 4],
['tn-bj', 5],
['tn-ba', 6],
['tn-bz', 7],
['tn-je', 8],
['tn-nb', 9],
['tn-tu', 10],
['tn-kf', 11],
['tn-ks', 12],
['tn-gb', 13],
['tn-gf', 14],
['tn-sz', 15],
['tn-sl', 16],
['tn-mh', 17],
['tn-ms', 18],
['tn-kr', 19],
['tn-ss', 20],
['tn-za', 21],
['tn-kb', 22],
['tn-ta', 23]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/tn/tn-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Tunisia'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tn/tn-all.js"></script>
<div id="container"></div>
since I am using already Highcharts.js to render line charts and polar chart in my code i can't use highmaps . I followed the general documentation for Highcharts maps and installed the plugin for highcharts maps. the code was fine 1 day ago and it render the map but now it is showing me this error in the chrome console "Uncaught TypeError: Cannot read property 'dataMin' of undefined".
is there any solution ?
thanks in Advance.
I reproduce your code and seems that everything works fine: https://jsfiddle.net/BlackLabel/cjr9p7oq/
// Create the chart
Highcharts.mapChart('container', {
...
});
It could be a temporary issue related to binding files after the new release. Please confirm if everything works fine.
I want to create bar chart using google charts
Condition to create chart is like Bar should have fixed width and padding between the bars and it should be plot at center of grid lines.
I used google chart for this .
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: getValueAt.bind(undefined, 1),
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {
groupWidth: 20
},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
JsFiddle for the same
I want to create something like this.
in order to get the bars between the gridlines,
will need to use a continuous data type for the x-axis,
timeofday will work, which takes an array of either 3 or 4 numbers,
representing hours, minutes, seconds, and optionally milliseconds, respectively
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
...
set the data values at the half minute mark,
then use ticks at the full minute mark...
ticks: [
[9, 0, 0],
[10, 0, 0],
...
for padding between the bars, use a percentage...
bar: {
groupWidth: '95%'
},
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
EDIT
to expand the gridlines, use option hAxis.viewWindow.min & max
and chartArea.width can extend the chart to the edges of the chart container
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
chartArea: {
width: '100%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
viewWindow: {
min: [6, 0, 0],
max: [20, 0, 0]
}
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
I'm using ZingChart and I'm trying to add 3 different series to a line chart.
The problem is that when I do this, the select marker does not work.
What seems to happen is that the second and third series don't receive any events as I would expect and instead other nodes receive them.
Is what I'm trying to do invalid?
I want to group these dates in 3 sets so that I set a different marker to each one. If I could set the marker in some other way that would be acceptable too.
var myConfig = {
graphset:[
{
type:"line",
x:"0%",
y:"0%",
height:"100%",
width:"100%",
plot: {
selectionMode : 'multiple',
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star5",
backgroundColor:"white",
borderColor:"black",
borderWidth:2,
size:8
}
},
scaleY: {
minValue: 0,
maxValue: 10,
step: 1
},
scaleX: {
// minValue: 1480883248000,
// step: 720000,//12min
transform: {
type: 'date',
all: '%m/%d/%y %h:%i %A'
},
},
series: [
{
text: 'f',
values: [
[1480883248000, 1],
[1480898368000, 1],
[1480883248000, 1],
[1480883968000, 1],
[1480884688000, 1],
[1480885408000, 1],
[1480886128000, 1],
[1480886848000, 1],
[1480887568000, 1],
[1480888288000, 1],
[1480889008000, 1],
[1480889728000, 1],
[1480890448000, 1],
[1480891168000, 1],
[1480891888000, 1],
[1480892608000, 1],
[1480893328000, 1],
[1480894048000, 1],
[1480894768000, 1],
[1480895488000, 1],
[1480896208000, 1],
[1480896928000, 1],
/* [1480897648000, 1, 'n'],
[1480898368000, 1, 'n'],
[1480899088000, 1, 'n'],
[1480899808000, 1, 'n'],
[1480900528000, 1, 'n'],*/
],
marker: {
type: 'circle',
size: 2
}
},
{
text: 'a',
values: [[1480883728000, 1]],
marker: {
type: 'triangle',
size: 7
}
},
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square', //circle
size: 7
}
}
]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: "100%"
});
There are couple things you need to do.
1) Apply the selectedMarker attribute to each individual series object. Series takes the same values as plot. Thus, you can overwrite and redefine individual styling within each series object.
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square', //circle
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star6",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
}
]
}
If you are using the data posted, you must adjust two things.
1) Adjust the z-index of the first plot (series[0]). Making this z-index a lower value will allow you to click on plots placed on top of it.
2) Two of your timestamps in series[0].values[1] and series[0].values[2] are plotted beyond the furthest point in the values array and plotted before the first point in the values array. If you keep the data the same and click on the blue line, it always looks like its selecting the first point. This is true because it's really selecting the 3rd point which the line spans the first half of the plot.
Try clicking on the blue line for the first half of the chart
issue chart here
If you still don't believe me, fork the demo above and change the first couple values from 1 to 2 and 3 etc...
The final product (fixed data) looks like the following.
var myConfig = {
graphset:[
{
type:"line",
plot: {
selectionMode : 'multiple',
},
scaleY: {
minValue: 0,
maxValue: 10,
step: 1
},
scaleX: {
// minValue: 1480883248000,
// step: 720000,//12min
transform: {
type: 'date',
all: '%m/%d/%y %h:%i %A'
},
},
series: [
{
zIndex:300,
text: 'f',
values: [
[1480883248000, 1],
//[1480898368000, 1],
//[1480883248000, 1],
[1480883968000, 1],
[1480884688000, 1],
[1480885408000, 1],
[1480886128000, 1],
[1480886848000, 1],
[1480887568000, 1],
[1480888288000, 1],
[1480889008000, 1],
[1480889728000, 1],
[1480890448000, 1],
[1480891168000, 1],
[1480891888000, 1],
[1480892608000, 1],
[1480893328000, 1],
[1480894048000, 1],
[1480894768000, 1],
[1480895488000, 1],
[1480896208000, 1],
[1480896928000, 1],
],
marker: {
type: 'circle',
size: 2
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star5",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
},
{
text: 'a',
values: [[1480883728000, 1]],
marker: {
type: 'triangle',
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star3",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
},
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square', //circle
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star6",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
Using google charts API with line chart controlled by range finder.I am stuck with two annoying issues:
The control has extra space before and after the data values it was set to follow, leaving an ugly space the control can slide to.
I can not seem to get the control to snap to data value.
If you can give me a pointer what I am doing wrong I will appreciate it a lot.
I set a JSfiddle here: http://jsfiddle.net/Db4fm/2/
Thank you very much!
JS
function drawChart() {
var activity_breakdown = [
['Text Index', 'Numeric Index', 'totals', 'Value 1', 'Value 2', 'Value 3',
'Value 4', 'Value 5', 'Value 6', 'Value 7'],
['W15', 1, 13, 2, 0, 20, 2, 1, 0, 0],
['W16', 2, 20, 0, 1, 10, 3, 0, 0, 2],
['W17', 3, 19, 3, 0, 20, 2, 0, 2, 0],
['W18', 4, 31, 0, 2, 10, 4, 1, 0, 3],
['W19', 5, 11, 1, 0, 10, 2, 0, 3, 0],
['W20', 6, 26, 0, 0, 10, 6, 0, 0, 4],
['W21', 7, 39, 2, 0, 30, 2, 1, 2, 0],
['W22', 8, 41, 0, 3, 10, 7, 0, 0, 0],
['Today', 9, 44, 0, 1, 20, 2, 1, 0, 5]
];
// Data table
var data1 = google.visualization.arrayToDataTable(activity_breakdown);
// Chart
var chart1 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_activity',
dataTable: data,
options: {
width: 950,
height: 300,
chartArea: {
left: 40,
top: 20,
width: 700,
height: 250
},
legend: {
position: 'right',
textStyle: {
fontSize: 13
}
}
},
view: {
columns: [0, 3, 4, 5, 6, 7, 8, 9]
}
});
var control1 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_activity',
'options': {
// Filter by the date axis.
'filterColumnIndex': 1,
'ui': {
'chartType': 'LineChart',
'snapToData': true, // this bugger is not working
'chartOptions': {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
'hAxis': {
textPosition: 'none'
}
},
'chartView': {
'columns': [0, 2]
},
'minRangeSize': 1
}
},
'state': {
'range': {
'start': 7,
'end': 8
}
}
});
var dashboard1 = new google.visualization.Dashboard(
document.getElementById('dashboard_activity'));
// Draw
dashboard1.bind(control1, chart1);
dashboard1.draw(data1);
google.visualization.events.addListener(control1, 'statechange', function () {
var v = control1.getState();
document.getElementById('dbgchart').innerHTML = v.range.start + ' -> ' +
v.range.end;
return 0;
});
// FSM knows why but without this line this line the code will not run...
var data = new google.visualization.DataTable();
}
google.load('visualization', '1.1', {
packages: ['corechart', 'controls']
});
google.setOnLoadCallback(drawChart);
HTML
<div id="dashboard_activity">
<div id="chart_activity"></div>
<div id="control_activity"></div>
</div>
<p>Debug range: <span id="dbgchart">Init</span></p>
The space before and after your data values is a result of setting your range filter's chart's domain axis to axis 0, which is a "string" type axis. If you want the line to go edge-to-edge, the domain axis has to be a continuous data type ("number", "date", "datetime", "timeofday"). If you change the control's chart's view.columns parameter to [1, 2], the spaces will go away:
var control1 = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_activity',
options: {
filterColumnIndex: 1,
ui: {
chartType: 'LineChart',
snapToData: true, // this bugger is not working
chartOptions: {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
hAxis: {
textPosition: 'none'
}
},
chartView: {
columns: [1, 2]
},
minRangeSize: 1
}
},
state: {
range: {
start: 7,
end: 8
}
}
});
I couldn't replicate your problem with the ui.snapToData option.
Updated jsfiddle with fix: http://jsfiddle.net/asgallant/Db4fm/3/
Change line 67 to as follows:
'columns': [1, 2]
jsFiddle: http://jsfiddle.net/Db4fm/4/