How to do Pie chart onload animation using billboard js

How to do Pie chart onload animation using billboard js - javascript

I am using billboard js to develop a pie chart with animation. I am unable to do the onload animation so, How will apply onload animation?
Here is the example of onload animation. Please help us.
Here is my code in codepen
HTML Code
<div id="chart"></div>
JS code:
bb.generate({
"data": {
"columns": [
["data1", 30],
["data2", 50]
],
"type": "pie",
"xLocaltime": true,
"xSort": true
},
"legend": {
"show": false
},
"clipPath": true,
"gauge": {
"width": 0,
"startingAngle": 0,
"expand": {
"duration": 88
}
},
"pie": {
"label": {
"threshold": 100
}
},
"donut": {
"label": {},
},
"tooltip": {
"show": false,
"grouped": false
},
interaction: {
enabled: false
}
});
Thanks!

The key point is initialize with '0' data and then load your final data.
// (1) Initialize with 0
var chart = bb.generate({
"data": {
"columns": [
["data1", 0],
["data2", 0]
],
});
// (2) then load data via .load() api
chart.load( ... );
Try with the Run code snippet.
var chart = bb.generate({
"data": {
"columns": [
["data1", 0],
["data2", 0]
],
"type": "pie"
},
"legend": {
"show": false
},
"pie": {
"label": {
show: false
}
},
interaction: {
enabled: false
}
});
setTimeout(() => {
chart.load({
"columns": [
["data1", 30],
["data2", 50]
],
});
}, 1000);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>billboard.js</title>
<script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

Related

Google spreadsheet API. Cannot specify axisPosition of a series

I want to specify the axis of a series. If i specify targetAxis to be "RIGHT_AXIS", it doesn't work..
The Axis-titles for LEFT_AXIS and RIGHT_AXIS are also not showing. Only the bottom one.
I want the graph to look like this:
But it ends up looking like this:
Here the red axis is at the bottom, because this column contains much lower numbers then the column with the numbers for the blue bars.
Someone who knows how i can solve this?
Here is my code:
{
addChart: {
chart: {
spec: {
title: "Graf - tibber",
basicChart: {
chartType: "COMBO",
axis: [
// X-AXIS
{
position: "BOTTOM_AXIS",
title: "TID",
},
// Y-AXIS LEFT
{
position: "LEFT_AXIS",
title: "FORBRUK(KWH)",
},
// X-AXIS RIGHT
{
position: "RIGHT_AXIS",
title: "PRIS",
},
],
legendPosition: "BOTTOM_LEGEND",
domains: [
{
domain: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 0,
endColumnIndex: 1
}
]
}
}
}
],
series: [
{
series: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 5,
endColumnIndex: 6,
},
],
},
},
targetAxis: "LEFT_AXIS",
},
{
series: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 3,
endColumnIndex: 4,
},
],
},
},
targetAxis: "RIGHT_AXIS",
}
],
headerCount: 1,
},
},
position: {
newSheet: true,
},
},
},
},
],

Improved request
Disclaimer, there is a bug in the API for the right hand axis, see end of answer
{
"requests": [
{
"addChart": {
"chart": {
"spec": {
"title": "Graf - tibber",
"basicChart": {
"chartType": "COMBO",
"legendPosition": "BOTTOM_LEGEND",
"axis": [
{
"position": "BOTTOM_AXIS",
"title": "TID"
},
{
"position": "LEFT_AXIS",
"title": "FORBRUK(KWH)"
},
{
"position": "RIGHT_AXIS",
"title": "PRIS"
}
],
"domains": [
{
"domain": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 0,
"endColumnIndex": 1
}
]
}
}
}
],
"series": [
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 1,
"endColumnIndex": 2
}
]
}
},
"targetAxis": "LEFT_AXIS",
"type": "COLUMN"
},
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 2,
"endColumnIndex": 3
}
]
}
},
"targetAxis": "RIGHT_AXIS",
"type": "LINE"
}
],
"headerCount": 1
}
},
"position": {
"newSheet": true
}
}
}
}
]
}
Note that the row and column indices I changed because I was working with some sample data. "type": "COLUMN" and "type": "LINE" entries in the series. In fact, for me, I would get 400 bad request without it. This produces a chart with BOTTOM_AXIS and LEFT_AXIS but not RIGHT_AXIS (see below for info on that). The chart also has two different scales so the line doesn't get overshadowed by the columns.
Right Axis
Unfortunately this is a current bug with the API: https://issuetracker.google.com/issues/153528225 - be sure to mark it with a ☆ to let Google know that this affects you.
Reference
Sample Chart Requests - I used the sample to navigate the documentation to find out if there were any attributes missing.

ZingChart pie tooltip not displaying

I have a pie ZingChart I'm using to show simple data. It happens to be using angular and updates the series object as the user drills down.
Everything is working fine except...the tooltip does not display? It doesn't display at any point, regardless of interaction or series assignment. The standard mouseover highlights work, and clicking nodes is fine, but no tooltip. Any ideas? Can't work out what I'm missing!
My chart config is:
{
type: "pie",
id: 'chart-1',
title: {
textAlign: 'center',
text: "Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot": {
"animation":{
"on-legend-toggle": true,
"effect": 5,
"method": 1,
"sequence": 1,
"speed": 0.7
},
"value-box": {
"text": "$%v",
"negation": "currency",
"thousands-separator": ",",
"font-color": "black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"decimals": "0",
"detach": false
},
series: [],
shapes: [{
type: 'triangle',
backgroundColor: '#66ccff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};

The - in chart-1 is causing an issue with our parse/selector process. If you change the id to chart_1 everything will work fine.
var myConfig = {
"graphset":[
{
"type":"pie",
"id":"chart_1",
"title":{
"textAlign":"center",
"text":"Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot":{
"animation":{
"on-legend-toggle":true,
"effect":5,
"method":1,
"sequence":1,
"speed":0.7
},
"value-box":{
"text":"$%v",
"negation":"currency",
"thousands-separator":",",
"font-color":"black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"decimals":"0",
"detach":false
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"series":[
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
}
],
"shapes":[
{
"type":"triangle",
"backgroundColor":"#66ccff",
"size":10,
"angle":-90,
"x":20,
"y":20,
"cursor":"hand",
"id":"backwards"
}
]
}
]
};
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;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>

displaying funnel chart using flot.js and data source as external json file

i am trying to plot a funnel chart using flot.js library ,taking an external json file as input but although the json is fetched it is not working as a datasource and the chart is not being plotted.
guys i have a json file SAMPLE.JSON
[
{
"data": 10,
"label": "a"
},
{
"data": 81,
"label": "b"
},
{
"data": 20,
"label": "c"
},
{
"data": 90,
"label": "d"
}
]
but it not working as a datasource for the Plot function of the folt.js library
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Funnel Charts</title>
<link href="css/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flot.funnel.js"></script>
<script type="text/javascript">
$(function() {
var data;
$.getJSON("sample.json", function(json) {
data=json;
console.log(data);
});
var placeholder = $("#placeholder");
$.plot('#placeholder', data, {
series:{
funnel: {
show: true,
stem: {
height: 0.2,
width: 0.4
},
margin: {
//right: 0.15
},
label:{
show: true,
align: "center",
threshold: 0.05,
formatter: labelFormatter
},
highlight: {
opacity: 0.2
}
},
},
grid: {
hoverable: true,
clickable: true
}
});
placeholder.bind("plotclick", function(event, pos, obj) {
if (!obj) {
return;
}
alert(obj.series.label + ": " + obj.series.value);
});
function labelFormatter(label, series) {
return "<div style='font-size:11pt; text-align:center; padding:2px; color:#fff;'>"+series.value+"</div>";
}
});
</script>
</head>
<body>
<div id="header">
<h2 style='text-align:center'>Funnel Charts</h2>
</div>
<div id="content">
<h3 id="title"></h3>
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="length:250px,width:250px"></div>
</div>
</div>
</body>
</html>

Your data is in the wrong format. From the plugin documentation, the expected data format is (your data isn't in an array of arrays):
var data = [
{
label: "a",
data: [ [ 1, 10 ] ]
},
{
label: "b",
data: [ [ 1, 81 ] ]
},
{
label: "c",
data: [ [ 1, 20 ] ]
},
{
label: "d",
data: [ [ 1, 90 ] ]
}
];
This JS Fiddle has a working example of a funnel chart with your data.

highlight feature with click in mapbox gl

I have a geojson layer of streets that are highlighted when moused-over.
My objective is now to highlight individual streets red with a click event. Only one street should be able to be highlighted at a time, and should remain highlighted until a different street is clicked.
Any idea as to what needs to be added to the following code?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-opacity": 0.0,
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#f48024",
"line-opacity": 0.9,
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
map.addLayer({
"id" : "street_toggle",
"source": "streets",
"type": "line",
"layout": {"line-join": "round",
"line-cap": "round"},
"paint": {
"line-color": "#FF0000",
"line-opacity": 0.9,
"line-width:": 3.5
}
});
map.on('mousemove', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter('route-hover', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('route-hover', ['==', 'rd_name', '']);
}
});
});
map.on('click', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["street_toggle"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('street_toggle', ['==', 'rd_name', '']);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537, ],
zoom: 13
});
map.on('style.load', function() {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-opacity": 0.0,
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#f48024",
"line-opacity": 0.9,
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
map.addLayer({
"id": "street_toggle",
"source": "streets",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#FF0000",
"line-opacity": 0.9,
"line-width:": 3.5
}
});
map.on('mousemove', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function(err, features) {
if (!err && features.length) {
map.setFilter('route-hover', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('route-hover', ['==', 'rd_name', '']);
}
});
});
map.on('click', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["street_toggle"]
}, function(err, features) {
if (!err && features.length) {
map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('street_toggle', ['==', 'rd_name', '']);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>
If you take a look at the console output when running your code, you should see this error message:
layers.street_toggle.paint.line-width:: unknown property "line-width:"
Because of this error, the street_toggle layer is not being added to the map and the click interaction is not working.
To fix the problem, please change the "line-width:" key to "line-width"(remove the spurious colon inside the quotes)

#Lucas features At() must be a depreciated method? His colon did throw a bug, but it doesn't help him select a road segment, at least at v0.16, right? I use queryRenderedFeatures()
note: I really wish this method had a optional radius parameter - you really have to click precisely on the line.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "red",
// "line-opacity": 0.0,
"line-width": 2.5
}
});
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['m_streets'] });
if (!features.length) {
return;
}
if (typeof map.getLayer('selectedRoad') !== "undefined" ){
map.removeLayer('selectedRoad')
map.removeSource('selectedRoad');
}
var feature = features[0];
//I think you could add the vector tile feature to the map, but I'm more familiar with JSON
console.log(feature.toJSON());
map.addSource('selectedRoad', {
"type":"geojson",
"data": feature.toJSON()
});
map.addLayer({
"id": "selectedRoad",
"type": "line",
"source": "selectedRoad",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "yellow",
"line-width": 8
}
});
});
});
</script>
</body>
</html>

Highchart and timeline does not work with large dataset

I have been working on a large dataset : http://jsfiddle.net/470bddfp/1/
It's about 2600 entries
I don't want to group data, but use zoomtype feature instead
Unfortunately it does not work, I just change selection, and I have empty data.
What is even worst, is when I use smaller dataset like I made in this exemple http://jsfiddle.net/470bddfp/2/ zoomtype is working !
$(function() {
var chart = new Highcharts.Chart({
chart: {
"renderTo": "container",
"zoomType": "x",
"panning": true,
"panKey": "shift"
},
plotOptions: {
"series": {
"states": {
"hover": {
"enabled": false
}
}
}
},
series: [{
"name": "First Timeline",
"type": "line",
"data": [
[1447608100000, 4.256],
[1447608070000, 4.471],
[1447608045000, 4.916],
[1447608042000, 2.946],
[1447608029000, 3.517],
[1447608003000, 5.801],
[1447607954000, 4.162],
[1447607924000, 2.415],
[1447607908000, 3.314],
[1447607898000, 2.765],
[1447607888000, 3.581],
[1447607861000, 7.016],
[1447607740000, 3.485],
[1447607719000, 4.264],
[1447607700000, 2.855],
[1447607694000, 3.142],
[1447607676000, 4.92],
[1447607613000, 2.899],
[1447607603000, 2.729],
[1447607594000, 4.054],
[1447607538000, 2.61],
[1447607526000, 2.43],
[1447607515000, 5.984],
[1447607467000, 2.529],
[1447607445000, 3.398],
[1447607391000, 4.9],
[1447607365000, 4.829],
[1447607310000, 2.935],
[1447607287000, 4.811],
[1447607242000, 4.897],
[1447607219000, 3.354],
[1447607157000, 5.929],
[1447607156000, 4.444],
[1447607128000, 6.542],
[1447607125000, 8.854],
[1447607121000, 5.693],
[1447607118000, 3.906],
[1447607092000, 2.843],
[1447607085000, 2.615],
[1447607076000, 2.651],
[1447607060000, 5.015],
[1447607057000, 2.441],
[1447607045000, 4.417],
[1447607015000, 5.198],
[1447607012000, 7.056],
[1447607006000, 4.014],
[1447606988000, 3.363],
[1447606965000, 2.329],
[1447606925000, 4.209],
[1447606922000, 4.095],
[1447606892000, 3.021],
[1447606879000, 4.54],
[1447606815000, 3.73],
[1447606783000, 7.097],
[1447606781000, 4.336],
[1447606732000, 2.786],
[1447606714000, 2.774],
[1447606675000, 6.027],
[1447606626000, 3.349],
[1447606576000, 3.147],
[1447606565000, 4.873],
[1447606518000, 4.064],
[1447606500000, 2.458],
[1447606484000, 2.601],
[1447606480000, 3.839],
[1447606429000, 5.348],
[1447606390000, 5.665],
[1447606287000, 7.904],
[1447606079000, 4.976],
[1447606055000, 5.577],
[1447606016000, 4.474],
[1447605931000, 5.43],
[1447605893000, 2.979],
[1447605889000, 6.101],
[1447605758000, 2.608],
[1447605757000, 5.77],
[1447605732000, 4.056],
[1447605701000, 5.834],
[1447605668000, 3.143],
[1447605665000, 2.924],
[1447605647000, 2.941],
[1447605631000, 3.544],
[1447605589000, 3.78],
[1447605566000, 7.102],
[1447605564000, 4.404],
[1447605563000, 5.95],
[1447605536000, 3.158],
[1447605499000, 2.618],
[1447605470000, 4.327],
[1447605456000, 4.384],
[1447605434000, 6.955],
[1447605307000, 3.632],
[1447605289000, 3.25],
[1447605276000, 3.711],
[1447605266000, 4.151],
[1447605224000, 4.985],
[1447605186000, 3.37],
[1447605163000, 2.553],
[1447605136000, 6.708],
[1447605042000, 6.076],
[1447604944000, 2.934],
[1447604923000, 6.721],
[1447604660000, 5.824],
[1447604608000, 4.777],
[1447604572000, 2.702],
[1447604560000, 3.34],
[1447604512000, 8.953],
[1447604509000, 7.409],
[1447604399000, 6.201],
[1447604327000, 2.912],
[1447604317000, 3.708],
[1447604280000, 4.575],
[1447604251000, 6.961],
[1447604248000, 3.878],
[1447604237000, 3.699],
[1447604232000, 4.066],
[1447604194000, 2.265],
[1447604182000, 4.943],
[1447604135000, 2.764],
[1447604132000, 7.494],
[1447603986000, 6.042],
[1447603983000, 3.071],
[1447603948000, 5.029],
[1447603887000, 7.517],
[1447603762000, 6.409],
[1447603758000, 4.375],
[1447603729000, 6.743],
[1447603584000, 2.78],
[1447603561000, 5.06],
[1447603536000, 5.109],
[1447603499000, 3.178],
[1447603433000, 6.729],
[1447603368000, 4.771],
[1447603278000, 4.775],
[1447603256000, 2.522],
[1447603242000, 6.729],
[1447603065000, 5.433],
[1447603016000, 3.842],
[1447602983000, 7.156],
[1447602780000, 7.057],
[1447602609000, 5.594],
[1447602566000, 6.967],
[1447602420000, 4.171],
[1447602345000, 5.094],
[1447602311000, 3.869],
[1447602293000, 4.59],
[1447602290000, 2.944],
[1447602271000, 6.146],
[1447602174000, 2.749],
[1447602161000, 2.713],
[1447602116000, 7.074],
[1447602065000, 3.175],
[1447602053000, 3.326],
[1447601987000, 3.973],
[1447601984000, 5.376],
[1447601933000, 3.106],
[1447601899000, 6.304],
[1447601822000, 2.749],
[1447601773000, 5.92],
[1447601650000, 7.701],
[1447601547000, 2.893],
[1447601532000, 3.036],
[1447601523000, 6.992],
[1447601392000, 7.213],
[1447601061000, 6.555],
[1447600809000, 5.283],
[1447600771000, 4.829],
[1447600748000, 2.75],
[1447600719000, 5.896],
[1447600632000, 4.905],
[1447600607000, 2.821],
[1447600583000, 2.98],
[1447600582000, 4.549],
[1447600568000, 4.821],
[1447600527000, 3.244],
[1447600521000, 6.498],
[1447600404000, 4.902],
[1447600380000, 5.754],
[1447600287000, 4.958],
[1447600250000, 3.106],
[1447600235000, 2.655],
[1447600231000, 3.266],
[1447600194000, 5.529],
[1447600152000, 4.377],
[1447600086000, 3.799],
[1447600083000, 3.085],
[1447600072000, 5.024],
[1447600036000, 4.372],
[1447600024000, 2.653],
[1447600024000, 3.836],
[1447600015000, 3.173],
[1447600007000, 5.187],
[1447599920000, 3.063],
[1447599914000, 3.986],
[1447599898000, 4.572],
[1447599817000, 4.282],
[1447599807000, 4.841],
[1447599802000, 4.515],
[1447599764000, 2.617],
[1447599749000, 2.932],
[1447599724000, 7.049],
[1447599720000, 4.841],
[1447599695000, 6.434],
[1447599692000, 3.248],
[1447599687000, 3.738],
[1447599680000, 4.174],
[1447599625000, 4.691],
[1447599575000, 3.657],
[1447599561000, 3.93],
[1447599506000, 7.645],
[1447599243000, 7.372],
[1447599242000, 5.109],
[1447599212000, 3.965],
[1447599188000, 3.358],
[1447599177000, 5.133],
[1447599177000, 2.737],
[1447599168000, 3.591],
[1447599104000, 3.627],
[1447599094000, 4.185],
[1447599079000, 4.75],
[1447599040000, 3.388],
[1447599029000, 2.608],
[1447599020000, 2.721],
[1447598998000, 3.548],
[1447598983000, 4.117],
[1447598967000, 3.311],
[1447598953000, 4.011],
[1447598911000, 3.208],
[1447598886000, 4.261],
[1447598878000, 5.554],
[1447598845000, 4.951],
[1447598783000, 4.79],
[1447598728000, 4.677],
[1447598665000, 3.013],
[1447598648000, 3.199],
[1447598630000, 5.953],
[1447598556000, 2.935],
[1447598549000, 3.082],
[1447598521000, 4.991],
[1447598493000, 5.14]
],
"tooltip": {
"valueSuffix": " secondes"
}
}],
title: {
"text": "Temps de r\u00e9ponse de RISe"
},
xAxis: [{
"type": "datetime",
"dateTimeLabelFormats": {
"hours": "%H:%M"
}
}],
yAxis: {
"labels": {
"format": "{value}s"
},
"title": {
"text": null
},
"min": 0,
"max": 9
},
});
});
I didn't found anything in documentation relating on limitations for zoomtype
Thanks by advance for any help

Develop Reference

JavaScript is the programming language of the Web.

How to do Pie chart onload animation using billboard js - javascript

Related

Google spreadsheet API. Cannot specify axisPosition of a series

ZingChart pie tooltip not displaying

displaying funnel chart using flot.js and data source as external json file

highlight feature with click in mapbox gl

Highchart and timeline does not work with large dataset

Categories

Resources