Column Chart with lines - Combo chart customization

Column Chart with lines - Combo chart customization - javascript

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
}],
});
});

Related

Chart Legend Customization with Chart.js

I am looking to develop the following type of chart.
So far I have achieved the following result:
But I have the following problems and I have no idea how to perform them.
The days have 2 bar graphs in the form of a stack. The legend for these 2 graphs is the same so I am looking for it not to show duplicate at the top. These represent a percentage.
Each bar has a name: "Turn 1" and "Turn 2", so I would like them to be able to show when I hover over the charts along with their corresponding value.
Place on the right side of the "Y Axis" another text but this represents a whole number that is represented by the black line.
My source code is the following:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<script src="https://www.chartjs.org/dist/2.9.4/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<script>
var barChartData = {
labels: [
"Día 1",
"Día 2",
"Día 3",
"Día 4",
"Día 5",
"Día 6",
"Día 7",
"Día 8",
"Día 9",
"Día 10",
],
datasets: [
{
type: "line",
label: "Toneladas Provisionales",
borderColor: "#000000",
backgroundColor: "#000000",
borderWidth: 2,
fill: false,
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% UTILIZACION",
backgroundColor: "#3393df",
stack: "Turno 1",
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% COLAS LARGAS",
backgroundColor: "#e88967",
stack: "Turno 1",
data: [59, 10, 12, 8, 6, 17, 6],
},
{
label: "% COLAS DESCARGA",
backgroundColor: "#9d81bd",
stack: "Turno 1",
data: [10, 23, 13, 12, 8, 7, 11],
},
{
label: "% TALLER",
backgroundColor: "#b3b3b3",
stack: "Turno 1",
data: [19, 16, 10, 19, 18, 16, 11],
},
{
label: "% STAND BY + PARALIZACIONES",
backgroundColor: "#409640",
stack: "Turno 1",
data: [0, 23, 14, 11, 16, 7, 18],
},
{
label: "% TURNOS 0 PRODUCCION",
backgroundColor: "#ffdf00",
stack: "Turno 1",
data: [0, 0, 0, 0, 0, 0, 0],
},
{
label: "% UTILIZACION",
backgroundColor: "#3393df",
stack: "Turno 2",
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% COLAS LARGAS",
backgroundColor: "#e88967",
stack: "Turno 2",
data: [59, 10, 12, 8, 6, 17, 6],
},
{
label: "% COLAS DESCARGA",
backgroundColor: "#9d81bd",
stack: "Turno 2",
data: [10, 23, 13, 12, 8, 7, 11],
},
{
label: "% TALLER",
backgroundColor: "#b3b3b3",
stack: "Turno 2",
data: [19, 16, 10, 19, 18, 16, 11],
},
{
label: "% STAND BY + PARALIZACIONES",
backgroundColor: "#409640",
stack: "Turno 2",
data: [0, 23, 14, 11, 16, 7, 18],
},
{
label: "% TURNOS 0 PRODUCCION",
backgroundColor: "#ffdf00",
stack: "Turno 2",
data: [0, 0, 0, 0, 0, 0, 0],
},
],
};
var ctx = document.getElementById("canvas").getContext("2d");
var canvas = new Chart(ctx, {
type: "bar",
data: barChartData,
options: {
title: {
display: true,
text:
"Detalle de Tiempos de Utilización de Flota y Toneladas Transportadas por Turno del 1 al:",
},
legend: {
display: true,
},
tooltips: {
enabled: true,
},
responsive: true,
scales: {
xAxes: [
{
stacked: true,
},
],
yAxes: [
{
stacked: true,
ticks: {
min: 0,
max: this.max, // Your absolute max value
callback: function (value) {
return ((value / this.max) * 100).toFixed(0) + "%"; // convert it to percentage
},
},
scaleLabel: {
display: true,
labelString: "Porcentaje",
},
},
],
},
},
});
</script>
</body>
</html>

Echarts, how to use visualMap

How to use the visualMap to color lines based on their value on the X-axis. I want to color red for all values greater than 23 and green for all values greater than 23.
My script looks like the following:
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main_chart'));
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
visualmap: {
show: false,
dimension: 0,
min: 0,
max: 10,
range: [0, 23],
inRange: {
color: 'red'
},
outOfRange: {
color: 'green'
}
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html
Unfortunately this doesn't work like this.
In general, there is a good description somewhere how this works with the visualMap, in the official documentary of echarts I don't get it.

I assume you want to color red for all values less than 23 and green for all values greater than 23.
you can use visualMap like this
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
let echartsObj = echarts.init(document.querySelector('#canvas'));
let seriesData = [1, 1, 2, 3, 4, 6, 8];
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}],
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 400px">
</div>
</body>
</html>

Set default zoom in AmChart

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>

Draw dojo spider chart without axis labels(ticks)

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 :)

How to get all json values in line chart

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();

Develop Reference

JavaScript is the programming language of the Web.

Column Chart with lines - Combo chart customization - javascript

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

Related

Chart Legend Customization with Chart.js

Echarts, how to use visualMap

Set default zoom in AmChart

Draw dojo spider chart without axis labels(ticks)

How to get all json values in line chart

Categories

Resources