Related
I have some problems rendering some data from a JSON in my apexchart series.
Here is the example of my chart with the data that I want to be in my JSON, and i don't know how to write it.
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
var options = {
series: [{
name: "Q",
data: [0, 4800, 9500, null],
},
{
name: "Q - 1",
data: [0, 6500, 12000, 16000]
},{
name: "Q Target",
data: [15500, 15500, 15500, 15500]
},
],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Clicks',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [' ', 'Month1', 'Month2', 'Month3'],
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
#chart {
max-width: 450px;
margin: 35px auto;
}
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
If someone could give me a hint, is kindly appreciated.
The JSON looks like this , for retrieving data for the apexchart
{
"data_clicks":[
{
"name":"Q",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":2400
},
{
"x":"Month2",
"y":5200
},
{
"x":"Month3",
"y":null
}
]
},
{
"name":"Q - 1",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":1800
},
{
"x":"Month2",
"y":7150
},
{
"x":"Month3",
"y":10200
}
]
},
{
"name":"Q Target",
"data":[
{
"x":" ",
"y":11000
},
{
"x":"Month1",
"y":11000
},
{
"x":"Month2",
"y":11000
},
{
"x":"Month3",
"y":11000
}
]
}
],
var chartByProduct = {
"type":"hbar",
"title": {
"text": "TOP & BOTTOM 5 PRODUCTS BY CM",
"text-align": "center",
"font-family":"arial",
"font-color": "#5b5b5b",
"font-size": "18px",
"padding": "25px",
"background-color": "none"
},
"plot": {
"valueBox":{
"decimals": 2,
"rules":[
{
rule:"%v<0",
placement:"out",
text:"%v%",
offsetX:"-25px",
},
{
rule:"%v>0",
placement:"out",
text:"%v%",
offsetX: "25px"
},
]
},
},
"plotarea":{
"adjustLayout":true,
"marginLeft":"30%",
"marginRight":"30%",
"marginBottom":"15%",
"marginTop": "15%",
},
"scale-x":{
"offset-end":"50%",
"offset-x":"50%",
alpha:1,
tick:{alpha:0},
"label":{
"text":"Bottom 5 products by sales"
},
"labels":[negative_product_name[0],negative_product_name[1],negative_product_name[2],negative_product_name[3],negative_product_name[4]],
},
"scale-x-2":{
"offset-start":"50%",
alpha:0,
tick:{alpha:0},
"label":{
"text":"Top 5 products by sales"
},
"labels":[positive_product_name[0],positive_product_name[1],positive_product_name[2],positive_product_name[3],positive_product_name[4]],
},
"scale-y":{
"alpha":1.0,
},
"scale-y-2":{
"alpha":1.0,
},
"series":[
{
"values":negative_cm_excluding_no_ev_percent,
"decimals":2,
"scales":"scale-x,scale-y",
"data-custom-token" : negative_cm_excluding_no_ev,
"tooltip":{
"text":'%data-custom-token',
},
"rules":[
{
rule:"%v<0",
"background-color":"#fd625e"
},
{
rule:"%v>0",
"background-color":"#68d7c6"
},
],
},
{
"values":positive_cm_excluding_no_ev_percent,
"decimals":2,
"scales":"scale-x-2,scale-y",
"data-custom-token" : positive_cm_excluding_no_ev,
"tooltip":{
"text":'%data-custom-token',
},
"rules":[
{
rule:"%v<0",
"background-color":"#fd625e"
},
{
rule:"%v>0",
"background-color":"#68d7c6"
},
],
},
]
};
zingchart.render({
id: 'productBarChart',
data: chartByProduct,
hideprogresslogo: true,
height: "100%",
width: "100%"
});
Here the labels in this config are coming above the bars where as i want these labels below them. How could i do so? What are the properties i could use to shift labels on scale of the graph.
Can i make changes in this configuration or should i use mixed chart or maybe 2 different charts?
Please help.
Full Disclosure, I'm a member of the ZingChart team.
var myConfig =
{
"type":"hbar",
"title":{
"text":"TOP & BOTTOM 5 PRODUCTS BY CM",
"text-align":"center",
"font-family":"arial",
"font-color":"#5b5b5b",
"font-size":"18px",
"padding":"25px",
"background-color":"none",
"adjustLayout":true
},
"plotarea":{
"adjustLayout":true,
"margin":'dynamic'
},
"plot":{
"valueBox":{
"fontColor":"#000"
},
"stacked":true
},
"scale-x":{
"offset-end":"55%",
"offset-x":"50%",
"alpha":1,
"tick":{
"alpha":0
},
"label":{
"text":"Bottom 5 products by sales"
}
},
"scale-x-2":{
"offset-start":"55%",
"alpha":0,
"tick":{
"alpha":0
},
"label":{
"text":"Top 5 products by sales"
},
},
"scale-y":{ },
"scale-y-2":{ },
"series":[
{
"values":[-5,-4,-6,-7,-1],
"decimals":2,
"stack":1,
"scales":"scale-x,scale-y",
'data-custom-token': ['Videocon 1.5 Ton Star Split', 'Samsung Galaxy s6 Edge','Voltas 155CY 1.2 Ton 5 Star Air SPlit Conditioner','Google Nexus', 'Gitanjali 100 Gm 24Kt 995 Bis Hallmarked Purity Plain Gold Bar'],
"valueBox":{
"text":'%data-custom-token',
"placement":'bottom'
},
"background-color":"#fd625e"
},
{
"values":[0,0,0,0,0],
"decimals":2,
stack:1,
"scales":"scale-x,scale-y",
'data-custom-token':[-5,-4,-6,-7,-1],
"valueBox":{
"text":'%data-custom-token',
"placement":'bottom',
},
"background-color":"#fd625e"
},
{
"values":[0,0,0,0,0],
"decimals":2,
"stack":2,
'data-custom-token':[5,4,6,7,1],
"scales":"scale-x-2,scale-y",
"valueBox":{
"text":'%data-custom-token',
"placement":'bottom-in'
},
"background-color":"#68d7c6"
},
{
"values":[5,4,6,7,1],
"decimals":2,
"stack":2,
"scales":"scale-x-2,scale-y",
'data-custom-token':['Insect And Mosquito Killer with NIght Lamp','Lenovo K3 Note 16GB', 'LED Projection Clock', 'Nokia 225 (black)', 'Nokia 225'],
"valueBox":{
"text":'%data-custom-token',
"placement":'bottom-out'
},
"background-color":"#68d7c6"
},
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 500,
width: '99%'
});
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= 'https://cdn.zingchart.com/2.4.0/zingchart.min.js'></script>
<script> ZC.MODULESDIR = 'https://cdn.zingchart.com/2.4.0/modules/';
</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>
The idea behind this was to create another series. Stack that series and show another valueBox in there. The ordering of the series does matter for stacking and displaying the valueBox.
Another alternative is to use labels and calculate the height of each bar and place the label at the end of the bar using offsetX. This involves direct SVG manipulation, but it is very possible.
var labelName = ['Apple','Microsoft','Samsung', 'Sony', 'LG', 'Motorola', 'Nokia', 'HTC'];
function createLabel(text, nodeWidth, yh) {
var clientWidth = document.getElementById('myChart').clientWidth;
var labelWidth = nodeWidth ? clientWidth - nodeWidth : clientWidth;
return {
"text": text,
"font-size": "18px",
"font-family": "arial",
"font-weight": "normal",
"font-color": "#000000",
"textAlign":"left",
"borderBottom" : "3px dotted black",
"border-spacing": 5,
"width" : labelWidth,
"x":0,
"y": 25 + yh, // Fixed height, will adjust offsetBased on Height
"shadow": false
}
}
var myConfig = {
type: "hbar",
scaleY: {
mirrored: true,
values:"0:150:10", //scale the bars down
visible:false
},
scaleX: {
visible:false
},
plotarea: {
margin:0,
padding:0
},
series : [
{
valueBox: {
text: "%pper",
decimals: 3,
fontSize: "18px",
fontColor: "#FFFFFF",
placement: "node: top",
paddingLeft: "75px"
},
values : [35,42,67,89,25,34,67,85],
backgroundColor : "#4CB8C4 #3CD3AD",
// Cannont have borderRadius with it,
}
]
};
zingchart.load = function(p) {
// Data to update the chart
var json = {};
json.labels = [];
var padding = 20;
// Get the plot container from svg
var plotPath = document.getElementById("myChart-graph-id0-plot-0-bl-1-c");
// Get the svg plots from the container
var plots = plotPath.getElementsByTagName("path");
// Loop through and create labels
for(var i = 0; i < plots.length; i++) {
// Get the path attribute from d matching this. Minimal amount of info to get x1 x2 and y1
var xyCords = plots[i].getAttribute("d").match(/M{1} [0-9]{1,4} [0-9]{1,4} L [0-9]{1,4}/)
// Split after the M, grab the first numbers encountered, grab that value
var x1 = xyCords[0].split('M ')[1].match(/[0-9]{1,4}/)[0];
// Get y cordinate for position line up and down
var y1 = xyCords[0].split('M ')[1].match(/[0-9]{1,4} [0-9]{1,4}/)[0].split(' ')[1];
// Split after the L, grab the first numbers and we have our starting point
var x2 = xyCords[0].split('L ')[1];
// Create new labels
// padding is offset for border size and labe fontSize
json.labels.push(createLabel(labelName[i], (x2-x1 + padding), parseInt(y1) - padding));
}
// Update the chart to the new labels
zingchart.exec('myChart', 'modify', {
graphid: 0,
plotid: 0,
data: json
});
}
zingchart.render({
id : 'myChart',
data : myConfig,
height: "100%",
width: "100%", //Meant for 100% width charts
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
<body>
<div id='myChart'></div>
</body>
</html>
I have a site which loads html (comming from a database) into a div.
Using Backbone as a framework and Handlebars as templating tool.
In this html I also have some javascript which also works perfectly.
However, when I try to also include the plotly cdn or even the whole javascript it will not recognize Plotly. resulting into the error:
"Plotly not defined"
I tried to solve this loading Plotly using jQuery and even placing the full minified Plotly Code into the HTML however with no result.
This is html / javascript code what works when loaded into a div.:
<div class='ldbp_img' style='overflow: auto; height:100%; width: 100%;'></div>
<script type='application/javascript' language='JavaScript'>
if (!Date.now) {
Date.now = function() { return new Date().getTime(); }
}
var img = new Image(),
imageUrl = "http://new.image.nu/1234.png',
interval = 30000;
$(img).attr('width', '100%');
$(img).attr('height', '100%');
var setImg = function () {
//var img = new Image();
var time = Math.floor(Date.now() / 1000);
img.src = imageUrl + time;
$('.ldbp_img').html(img);
};
img.src = imageUrl';
$('.ldbp_img').html(img);
if (window.countInt) {
clearInterval(window.countInt);
window.countInt = null;
}
window.countInt = setInterval(setImg, interval);
</script>
When loading plotly it doesn't work:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
Plotly.plot('my-graph', data, layout);
</script>
I also tried this using jQuery with no result:
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
$.ajax({
url: "https://cdn.plot.ly/plotly-latest.min.js",
dataType: "script",
cache: true,
success: function () {
runNow();
}
});
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
var runNow = function () {
Plotly.plot('my-graph', data, layout);
};
</script>
This does work in jsfiddle, the only difference is that I do not load the html asynchronously into the DOM.
working fiddles:
https://jsfiddle.net/b2js15nm/
https://jsfiddle.net/b2js15nm/1/
Hence!: I cannot use backbone and handlebars to really re-create the situation. It looks like the AMD of Plotly does not work when loaded later on the page. Therefore Plotly will be undefined.
If you want dynamically add script into page, try to create script element and listen to load event and after that initialize your logic, e.g.:
var script = document.createElement('script');
script.setAttribute('src', 'https://cdn.plot.ly/plotly-latest.min.js');
document.body.appendChild(script);
script.addEventListener('load', function () {
// Plotly loaded
console.log(Plotly);
})
As I was thinking that the AMD module was the issue, I tried to load the script using require. I am already using require so I needn't do much to implement it.
Here is what the page looks like now:
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
require(['https://cdn.plot.ly/plotly-latest.min.js'], function (Plotly) {
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
Plotly.plot('my-graph', data, layout);
});
</script>
I have a problem with some code.
It only runs in jsfiddle and i dont know why it's not working in codepen or in files.
Why does this code only works in jsfiddle?
I tried it in codepen and just in files but it doesnt show anything
http://jsfiddle.net/auagufL8/
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js"> </script>
<div id="container"></div>
$(function () {
// Prepare demo data
var data = [
{
"hc-key": "nl-fr",
"value": 0
},
{
"hc-key": "nl-gr",
"value": 1
},
{
"hc-key": "nl-fl",
"value": 2
},
{
"hc-key": "nl-ze",
"value": 3
},
{
"hc-key": "nl-nh",
"value": 4
},
{
"hc-key": "nl-zh",
"value": 5
},
{
"hc-key": "nl-dr",
"value": 6
},
{
"hc-key": "nl-ge",
"value": 7
},
{
"hc-key": "nl-li",
"value": 8
},
{
"hc-key": "nl-ov",
"value": 9
},
{
"hc-key": "nl-nb",
"value": 10
},
{
"hc-key": "nl-ut",
"value": 11
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
Oh!
This code perfectly works everywhere.
To get it to work in Codepen, you need to add all your JS resources via the little cog inside JS panel, and check that Latest version of jQuery is selected. <script> tags are ignored in HTML panel.
$(function () {
// Prepare demo data
var data = [
{"hc-key": "nl-fr","value": 0},
{"hc-key": "nl-gr","value": 1},
{"hc-key": "nl-fl","value": 2},
{"hc-key": "nl-ze","value": 3},
{"hc-key": "nl-nh","value": 4},
{"hc-key": "nl-zh","value": 5},
{"hc-key": "nl-dr","value": 6},
{"hc-key": "nl-ge","value": 7},
{"hc-key": "nl-li","value": 8},
{"hc-key": "nl-ov","value": 9},
{"hc-key": "nl-nb","value": 10},
{"hc-key": "nl-ut","value": 11}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js"></script>
<div id="container"></div>
To run code is a browser, you need to put it inside a <script> //Your code goes here </script> tag
this ->
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
Is CSS, it must be inside a <style> tag.
this ->
$(function () {
// Prepare demo data
var data = [
{
"hc-key": "nl-fr",
"value": 0
},
{
"hc-key": "nl-gr",
"value": 1
},
{
"hc-key": "nl-fl",
"value": 2
},
{
"hc-key": "nl-ze",
"value": 3
},
{
"hc-key": "nl-nh",
"value": 4
},
{
"hc-key": "nl-zh",
"value": 5
},
{
"hc-key": "nl-dr",
"value": 6
},
{
"hc-key": "nl-ge",
"value": 7
},
{
"hc-key": "nl-li",
"value": 8
},
{
"hc-key": "nl-ov",
"value": 9
},
{
"hc-key": "nl-nb",
"value": 10
},
{
"hc-key": "nl-ut",
"value": 11
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
Is Javascript, it must be inside a <script> tag.
Put all your CSS related files either in a separate .css file or put it under tag in your HTML file. Also put all the scripts inside a .js file or embed it under tag in your HTML file.
for more reference you can visit this older post.
I have having a problem with flot pie chart, its not showing correct percent value in tooltip, for example it shows series1:%p.0%
js code
var data = [{
label: "Series 0",
data: 1
}, {
label: "Series 1",
data: 3
}, {
label: "Series 2",
data: 9
}, {
label: "Series 3",
data: 20
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
},
colors: ["#99c7ce","#efb3e6","#a48ad4","#AEC785","#fdd752"],
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Please help to resolve this.
thanks
You Need to include jquery.flot.tooltip.min.jsand change few setting as per below working example to display the tooltip with value.
datapie = [
{label: "Running", data: 19.5, color: '#e1ab0b'},
{label: "Stopped", data: 4.5, color: '#fe0000'},
{label: "Terminated", data: 36.6, color: '#93b40f'}
];
function legendFormatter(label, series) {
return '<div ' +
'style="font-size:8pt;text-align:center;padding:2px;">' +
label + ' ' + Math.round(series.percent)+'%</div>';
};
$.plot($("#placeholder"), datapie, {
series: {
pie: {show: true, threshold: 0.1,
// label: {show: true}
}
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
cssClass: "flotTip",
content: "%p.0%, %s",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
legend: {show: true, labelFormatter: legendFormatter}
});
#flotTip {
padding: 3px 5px;
background-color: #000;
z-index: 100;
color: #fff;
opacity: .80;
filter: alpha(opacity=85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>
<div id="placeholder" style="width:500px;height:400px;"></div>
Working Example Link : http://jsfiddle.net/Rnusy/335/
You need the Tooltip plugin.
See a complete list of available plugins here: Flot plugins