I have created a dojo spider chart with the default parameters.
I need to hide the axis labels(data values on the ticks, not talking about the axis title).
I have tried the 'ticks: false', however it doesn't work with spider chart.
require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
"dojox/charting/plot2d/Spider", "dojo/fx/easing"
],
function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
var chart1;
ready(function() {
chart1 = new Chart("test1");
chart1.addPlot("default", {
type: Spider,
labelOffset: -10,
divisions: 7,
axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0,
spiderType: "polygon"
});
chart1.addSeries("China", {
data: {
"GDP": 2,
"area": 6,
"population": 2000,
"inflation": 15,
"growth": 12
}
}, {
fill: "blue"
});
chart1.addSeries("France", {
data: {
"GDP": 6,
"area": 15,
"population": 500,
"inflation": 5,
"growth": 6
}
}, {
fill: "red"
});
chart1.addSeries("USA", {
data: {
"GDP": 3,
"area": 20,
"population": 1500,
"inflation": 10,
"growth": 3
}
}, {
fill: "green"
});
chart1.addSeries("Japan", {
data: {
"GDP": 4,
"area": 2,
"population": 1000,
"inflation": 20,
"growth": 2
}
}, {
fill: "yellow"
});
chart1.addSeries("Korean", {
data: {
"GDP": 10,
"area": 10,
"population": 800,
"inflation": 2,
"growth": 18
}
}, {
fill: "orange"
});
chart1.addSeries("Canada", {
data: {
"GDP": 1,
"area": 18,
"population": 300,
"inflation": 3,
"growth": 15
}
}, {
fill: "purple"
});
chart1.render();
});
});
<script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<body>
<h1>Spider Chart</h1>
<div id="test1" style="width: 500px; height: 500px;"></div>
</body>
Thank you in advance!!!
Well, It seems like you just want to hide html labels(correct me if I am wrong).
I have updated the running sample.
require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
"dojox/charting/plot2d/Spider", "dojo/fx/easing"
],
function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
var chart1;
ready(function() {
chart1 = new Chart("test1");
chart1.addPlot("default", {
type: Spider,
labelOffset: -10,
divisions: 7,
axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0,
spiderType: "polygon",
htmlLabels: false // hide html labels
});
chart1.addSeries("China", {
data: {
"GDP": 2,
"area": 6,
"population": 2000,
"inflation": 15,
"growth": 12
}
}, {
fill: "blue"
});
chart1.addSeries("France", {
data: {
"GDP": 6,
"area": 15,
"population": 500,
"inflation": 5,
"growth": 6
}
}, {
fill: "red"
});
chart1.addSeries("USA", {
data: {
"GDP": 3,
"area": 20,
"population": 1500,
"inflation": 10,
"growth": 3
}
}, {
fill: "green"
});
chart1.addSeries("Japan", {
data: {
"GDP": 4,
"area": 2,
"population": 1000,
"inflation": 20,
"growth": 2
}
}, {
fill: "yellow"
});
chart1.addSeries("Korean", {
data: {
"GDP": 10,
"area": 10,
"population": 800,
"inflation": 2,
"growth": 18
}
}, {
fill: "orange"
});
chart1.addSeries("Canada", {
data: {
"GDP": 1,
"area": 18,
"population": 300,
"inflation": 3,
"growth": 15
}
}, {
fill: "purple"
});
chart1.render();
});
});
<script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<body>
<h1>Spider Chart</h1>
<div id="test1" style="width: 500px; height: 500px;"></div>
</body>
Hoping this will help you :)
Related
Which JS library is best to do the above type of chart ?
I want to combine clustered column chart with line chart as shown in the picture above.
My requirement is each column should have a low and high value set
Please use highcharts for this.
please refer JSFiddle for the code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
plotOptions: {
series: {
pointWidth: 25
},
line: {
marker: {
type: 'dot'
}
}
},
title: {
text: null
},
series: [{ "name": "india", "data": [{ y: 1, color: 'red' }, { y: 3, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 2, color: '#965129' }] },
{"name": "usa", "data": [0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 1, color: '#965129' }] },
{ "name": "china", "data": [0, 0, 0, 0, 0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3.1, color: '#f1da37' }, { y: 1.9, color: '#965129' }]}, { "name": "target", "data": [3, 1, 3, 2, 2, 1, 1.9, 2.4, 2.8, 1.9, 2.9, 1.6], yAxis: 1, type: 'line' },
{ "name": "baseline", "data": [1.3, .1, 1.3, 0, 1.2, .5, 1.2, .2, .5, 1.2, 2.1, .2], yAxis: 1, type: 'line' }],
xAxis: {
categories: [{ "name": "india", "categories": ["june 2016", "july 2016", "august 2016", "september 2016"] }, { "name": "usa", "categories": ["may 2017", "june 2016", "july 2016", "august 2016"] }, { "name": "china", "categories": ["may 2017", "june 2017", "july 2017", "august 2017"] }]
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
}
}, ,
labels: {
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
}],
});
});
I created a chart in Billboard.js which looks like this:
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": columns
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
"label": {
"text": label,
"position": "outer-center"
},
},
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
Now it looks like the classic style, X axis on the bottom and Y axis on the left. I want to move the Y axis on the right of the table.
I've tried many ways to do it but without success like these ones:
-changing its name from y to y2
-adding the same code but with y2:
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
I addied show attribute inside the label like this:
"y": {
"label": {
"show": false,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"show": true,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
Any ideas?
Try
var chart = bb.generate({
"data": {
"columns": [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2" // set additional y axis
}
},
"axis": {
"y": {
"show": false // hide default y axis
},
"y2": {
"show": true
}
},
"bindto": "#AdditionalYAxis"
});
I have tried it on their demo from github. There is an option axis where you can simply hide the axis. Hope this helps.
Working Example: https://jsfiddle.net/k3o1ws47/
I think, #Nouphal pointed exactly what to do.
The key point is set data.axes options to bound datas to y2 axis.
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data:axes
I made working demo with your code(except the data value), so replace it setting with your data and will work.
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": [
// replace with your data value
['x', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06'],
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2",
"data2": "y2"
}
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
"label": {
"text": "label",
"position": "outer-center"
},
},
"y": {
"show": false
},
"y2": {
"show": true,
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
<div id="main-chart"></div>
</body>
</html>
I want to know if there is a way to set a default zoom when a amchart graph is generated in AmCharts.
Here is the code:
AmCharts.makeChart("chartdiv", {
type: "serial",
mouseWheelZoomEnabled: true,
fontFamily: "Montserrat",
path: "lib/amcharts/",
theme: "light",
fontSize: 12,
categoryField: "category",
precision: 0,
decimalSeparator: ",",
thousandsSeparator: ".",
plotAreaFillAlphas: 0.11,
plotAreaFillColors: "#61a1e6",
zoomOutButtonColor: "#D6E7F9",
sequencedAnimation: true,
startDuration: 1,
startEffect: "easeOutSine",
balloonText: "[[title]] [[category]]:[[value]]",
urlTarget: "#drill",
categoryAxis: {
autoRotateAngle: 0,
autoWrap: false,
gridPosition: "start",
axisAlpha: 0.16,
color: "#054bff",
gridAlpha: 0,
title: ""
},
chartScrollbar: {
"enabled": true
},
trendLines: [],
graphs: [
[LEGEND]
],
guides: [],
valueAxes: [{
[STACKED]
id: "ValueAxis-1",
axisAlpha: 0,
axisThickness: 0,
color: "#ff4444",
fillAlpha: 1,
gridAlpha: 0.17,
integersOnly: true,
title: ""
}],
allLabels: [],
balloon: {
fillAlpha: 0.95,
shadowAlpha: 0.11,
borderThickness: 5,
animationDuration: 2,
cornerRadius: 5
},
legend: {
markerBorderThickness: 4,
markerSize: 15,
markerType: "circle",
position: "right",
useGraphSettings: true,
valueText: ""
},
titles: [{
font: "Segoe UI",
bold: true,
color: "#17baef",
id: "Title-1",
size: 25,
text: "[TITLE]"
},
{
color: "#7adaf9",
id: "Title-2",
size: 15,
text: "[SUBTITLE1]"
},
{
color: "#7adaf9",
id: "Title-3",
size: 15,
text: "[SUBTITLE2]"
}
],
export: {
enabled: true,
}
})
You can use a listener such as init to call the chart's zoom methods upon chart initialization. For example, using zoomToIndexes
listeners: [{
event: "init",
method: function(e) {
e.chart.zoomToIndexes(4, 7); //set default zoom
}
}]
Demo:
var data = [
{
"category": "cat-1",
"value3": 4,
"value2": 2,
"value1": 6
},
{
"category": "cat-2",
"value3": 1,
"value2": 3,
"value1": 5
},
{
"category": "cat-3",
"value3": 3,
"value2": 4,
"value1": 6
},
{
"category": "cat-4",
"value3": 1,
"value2": 3,
"value1": 3
},
{
"category": "cat-5",
"value3": 5,
"value2": 4,
"value1": 4
},
{
"category": "cat-6",
"value3": 4,
"value2": 2,
"value1": 6
},
{
"category": "cat-7",
"value3": 4,
"value2": 2,
"value1": 4
},
{
"category": "cat-8",
"value3": 1,
"value2": 4,
"value1": 4
},
{
"category": "cat-9",
"value3": 4,
"value2": 3,
"value1": 6
},
{
"category": "cat-10",
"value3": 3,
"value2": 3,
"value1": 3
}
];
AmCharts.makeChart("chartdiv", {
type: "serial",
dataProvider: data,
mouseWheelZoomEnabled: true,
fontFamily: "Montserrat",
//path: "lib/amcharts/",
theme: "light",
fontSize: 12,
categoryField: "category",
precision: 0,
decimalSeparator: ",",
thousandsSeparator: ".",
plotAreaFillAlphas: 0.11,
plotAreaFillColors: "#61a1e6",
zoomOutButtonColor: "#D6E7F9",
sequencedAnimation: true,
startDuration: 1,
startEffect: "easeOutSine",
balloonText: "[[title]] [[category]]:[[value]]",
urlTarget: "#drill",
categoryAxis: {
autoRotateAngle: 0,
autoWrap: false,
gridPosition: "start",
axisAlpha: 0.16,
color: "#054bff",
gridAlpha: 0,
title: ""
},
chartScrollbar: {
"enabled": true
},
trendLines: [],
graphs: [{
title: "Graph 1",
type: "column",
fillAlphas: .8,
valueField: "value1"
},
{
title: "Graph 2",
type: "column",
fillAlphas: .8,
valueField: "value2"
},
{
title: "Graph 3",
type: "column",
fillAlphas: .8,
valueField: "value3"
}
],
guides: [],
valueAxes: [{
stackType: "stacked",
id: "ValueAxis-1",
axisAlpha: 0,
axisThickness: 0,
color: "#ff4444",
fillAlpha: 1,
gridAlpha: 0.17,
integersOnly: true,
title: ""
}],
allLabels: [],
balloon: {
fillAlpha: 0.95,
shadowAlpha: 0.11,
borderThickness: 5,
animationDuration: 2,
cornerRadius: 5
},
legend: {
markerBorderThickness: 4,
markerSize: 15,
markerType: "circle",
position: "right",
useGraphSettings: true,
valueText: ""
},
titles: [{
font: "Segoe UI",
bold: true,
color: "#17baef",
id: "Title-1",
size: 25,
text: "[TITLE]"
},
{
color: "#7adaf9",
id: "Title-2",
size: 15,
text: "[SUBTITLE1]"
},
{
color: "#7adaf9",
id: "Title-3",
size: 15,
text: "[SUBTITLE2]"
}
],
export: {
enabled: true,
},
listeners: [{
event: "init",
method: function(e) {
e.chart.zoomToIndexes(4, 7); //set default zoom
}
}]
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
With these basic options, this chart is feeling cramped — the 'U.S. Average' plotline label is overlapping the first bar.
Is there a way to add padding to the top and bottom of the plot area, thereby giving a little breathing room for the plotline & its label?
JSFiddle of the problem
Plotline code:
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Oswald, sans-serif",
textTransform: "uppercase"
}
}
});
var chart = new Highcharts.Chart({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "bar"
},
"title": {
"text": "Percent of Adults Who Binge Drank"
},
"subtitle": {
"text": "2013 | Percent of Adults Who Binge Drank"
},
"xAxis": {
"categories": ["Boston", "Denver", "Miami", "New York", "Phoenix", "San Antonio", "San Jose", "Seattle", "Washington"],
"labels": {
"useHTML": true,
"style": {
"width": "100px",
"min-width": "100px",
"text-align": "right"
}
}
},
"yAxis": {
"title": {
"text": null
},
"plotLines": [{
"color": "#9b9b9b",
"dashStyle": "shortdot",
"value": 26,
"width": 2,
"label": {
"text": "U.S. Average",
"align": "left",
"x": 5,
"rotation": 0,
"zIndex": 1000,
"useHTML": true,
"style": {
"font-size": "10px",
"background-color": "#fff"
}
}
}]
},
"series": [{
"data": [35, 26, 18, 18, 15, 21, 55, 19, 22],
"color": "#e12922"
}],
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": "buttons"
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;width:600px;margin:1.5em 1em;"></div>
I have many Json values, using them I am going to create a line chart but it shows only one value in the chart. I am a newbie to javascript and have an idea to plot all values in chart. please anybody give jsfiddle example for this issue.
HTML code
<div id="chartContainer" class="chart">
Script
$.getJSON('dashboard_summary.php?', function(data) {
var len = data.length
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
});
function chart (dates,Tip,Rev,len) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: new Date(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: new Date(dates),
y: parseInt(Rev)
}
]
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
};
Json data
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}
Based on your code, I can see why the chart shows only one point, which is the last data point of those points expected to be shown on the chart. Here is the problem:
var len = data.length;
/* Loop through each item in the data */
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len); /* Draw a chart with one point */
});
So you end up drawing many charts with the last chart which has the last data point to replace all the previous charts.
Instead, you should adjust the foreach block as follow and draw the chart once you've converted the data into an array of points.
$.getJSON('dashboard_summary.php?', function(data) {
var Tips = [];
var Revs = [];
$.each(data, function(i, v) {
Tips.push({ x: new Date(v.Date), y: parseInt(v.Tip) });
Revs.push({ x: new Date(v.Date), y: parseInt(v.Revenue) });
});
chart(Tips, Revs);
});
Also, you can format the x-axis to make the chart look prettier (The format of the x-axis here is designed for the data given above. In your application, you may have to use another format style depending on the actual data):
function chart (Tips, Revs) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM",
interval:14,
intervalType: "day"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: Tips
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: Revs
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
A jsFiddle is made here for your review.
Updated codes. it Works >> Pastebin
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src = "http://canvasjs.com/wp-content/themes/bootstrap_child/assets/js/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" class="chart">
<script type="text/javascript">
data=[
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}];
var len = data.length;
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
function chart (dates,Tip,Rev,len) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: new Date(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: new Date(dates),
y: parseInt(Rev)
}
]
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
</script>
</body>
</html>
jsFiddle
Update Code:
dataRevenue=
[
{ x: new Date(2014, 00,30), y: 0 },
{ x: new Date(2014, 01,31), y: 7},
{ x: new Date(2014, 02,28), y: 47}
];
dataTip =[
{ x: new Date(2014, 00,30), y: 0 },
{ x: new Date(2014, 01,31), y: 3},
{ x: new Date(2014, 02,28), y: 8}
];
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2",
title:{
text: "line chart"
},
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: dataTip
},
{
type: "line",
//lineThickness: 3,
dataPoints: dataRevenue
}
]
});
chart.render();