I'm new to the forum and hope to get help to complete my chart!
My problem is to call a json file in the drilldown; this is the result I would get by calling the json (for example)
http://jsfiddle.net/1dmaduwg/2/ and this is the html code and json code that I wrote to call the first json file.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CHART_1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
</head>
<body>
<h1 style="background: center; text-align: center; color: #E52B50"> ----------> TEST HIGHTCHARTS <----------</h1>
<div id="container" style="width: auto; height: 400px; max-width: 1000px; margin: auto">
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
colors: ['#C80815', '#404040']
});
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
backgroundColor: '#EFEFEF',
borderColor: '#FF0000',
borderWidth: 2,
borderRadius: 10,
inverted: false,
type: 'column'
},
title: {
text: 'ACTIVITIES MANAGEMENT ',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Activity'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
enabled: true
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'},
}
},
series: [],
}
$.getJSON("test_1.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[2];
options.series[1] = json[3];
chart = new Highcharts.Chart(options);
});
});
});
</script>
</div>
</body>
</html>
test_1.json
[
{
"name": "user_name",
"data": ["user_1", "user_2", "user_3", "user_4"]
},
{
"name": "user_id",
"data": ["052193002", "052193007", "052193013", "052193004"]
},
{
"name": "MANAGED",
"data": [52, 13, 42, 10]
},
{
"name": "TO MANAGE",
"data": [12, 3, 32, 1]
}
]
when I click on a column or user name I want the right data for each user in a drilldown series.
is the right way to go or I have to make changes to json (test_2) to separate the data?
can anyone help me to write the exact code to insert test_2.json into the Drilldown?
test_2.json
//USER_1
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [13, 12, 27]
},
{
"name": "TO MANAGE",
"data": [3, 4, 5]
}
],
//USER_2
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [3, 7, 3]
},
{
"name": "TO MANAGE",
"data": [1, 0, 2]
}
],
//USER_3
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [13, 17, 12]
},
{
"name": "TO MANAGE",
"data": [13, 7, 12]
}
],
//USER_4
[
{
"name": "activity_name",
"data": [ "Activity 1", "Activity 2", "Activity 3"]
},
{
"name": "MANAGED",
"data": [5, 3, 2]
},
{
"name": "TO MANAGE",
"data": [0, 0, 1]
}
]
thank you all!!
I would vote for separate files.
It would be optimal (better performance for the chart and lower bandwidth for the connection) to do not force user to download not needed data.
Related
I'm working on data visualization with Highcharts but since I started fetching my data from an API, it doesn't display anymore.
Data is response from the API. The information is gotten from the array (trying to mimic an API here), but this still doesn't display after a lot of tweaking and it doesn't display any errors.
It be helpful if one could also point out how to display highchart errors.
$(document).ready(function() {
Highcharts.setOptions({
lang: {
numericSymbols: null
}
});
data = [{
"chart": {
"height": 500,
"renderTo": "chart_ID",
"type": "line"
},
"plotOptions": {
"line": {
"dataLabels": {
"enabled": true
},
"enableMouseTracking": false
}
},
"series": [{
"data": [5000.0, 4100.0, 1000.0, 7500.0, 5100.0, 5000.0],
"name": "Amount"
}, {
"data": [179, 86, 150, 393, 188, 322],
"name": "Millage"
}],
"title": {
"text": "Jhpiego Fuel Consumption"
},
"xAxis": {
"categories": ["3 Jul", "12 Jul", "13 Jul", "14 Jul", "15 Jul", "16 Jul"]
},
"yAxis": {
"max": 1000000,
"title": {
"text": "Fuel Price"
}
}
}]
apiData = data[0];
highChartInfo = {
chart: {
renderTo: apiData.chart.renderTo,
type: apiData.chart.type,
height: 500,
displayErrors: true
},
plotOptions: {
line: {
dataLabels: {
enabled: apiData.plotOptions.line.dataLabels.enabled
},
enableMouseTracking: apiData.plotOptions.line.enableMouseTracking
}
},
title: {
text: apiData.title.text
},
xAxis: {
categories: apiData.xAxis.categories
},
yAxis: {
title: {
text: apiData.yAxis.title.text
},
max: apiData.yAxis.max
},
series: [{
name: apiData.series[0].name,
data: apiData.series[0].data
},
{
name: apiData.series[1].name,
data: apiData.series[1].data
}
],
}
console.log(highChartInfo)
$(data[0].chart.renderTo).highcharts(highChartInfo);
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chart_ID" class="chart" style="height: 100%; width: 100%"></div>
So, I am new to Javascript, but I have a code to make a stable bar chart, but I need to make it dynamic.
MY JSON File format is:
"valid_columns_counts": {
"Sr no.": 0,
"Domain": 37,
"Company Name": 0,
"Address": 36,
"Industry": 38,
"Phone Number": 30,
"Zipcode": 33,
"email": 14}
I ran this code:
window.onload = function () {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
},
axisY: {
title: "Percentage",
titleFontColor: "#4F81BC",
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
itemclick: toggleDataSeries
},
data:
{
type: "column",
name: "Consistency",
legendText: "Consistency",
axisYType: "secondary",
showInLegend: true,
dataPoints: dataPoints
}
});
function addData(data) {
for (var i = 0; i < data.length; i++) {
dataPoints.push({
x: data[i].valid_columns_counts
y: data[i].valid_columns_counts
});
}
}
chart.render();
$.getJSON("localhost/sample_output.json", addData);
}
But this code shows blank page when runned.Please if someone can help me.
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>
I am very confused about how to load json data into the combo pie / bar Highcharts. Please find the code below. Its an example and by no means finished. I just need a better grasp on the json load and how the data series should be expressed. Thanks in advance.
Please note the js code that is highlighted - is that correct? The project resides on my dev box and the json file is local.
For starters I would like to chart the Status and ID values from my json file. How should the series in the js code look?
i.e
name: 'id',
data: processed_json
-Begin Code example html/js-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>xxxxxxxx Automation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Load jason data
// var processed_json = new Array();
//$.getJSON('json_output.json', function(data) {
// // Populate series
// for (i = 0; i < data.length; i++){
// processed_json.push([data[i].key, data[i].value]);
$('#container').highcharts({
title: {
text: 'xxxxxxxxxxxxxx'
},
xAxis: {
categories: ['Nightly Scheduled Smoke Test', 'New Release Test', 'Regression Test', ' Discovery Test']
},
labels: {
items: [{
html: 'xxxxxxxxx Validation',
style: {
left: '55px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Ad-Hoc',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create Order',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create-Express-Ready-Parameter',
data: [3, 5, 5, 8]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'xxxxxxx Passed',
data: [{
name: 'Ad-Hoc',
y: 13,
color: Highcharts.getOptions().colors[0] // Ad-Hoc's color
}, {
name: 'Create Order',
y: 23,
color: Highcharts.getOptions().colors[1] // Create Order's color
}, {
name: 'Create-Express-Ready-Parameter',
y: 19,
color: Highcharts.getOptions().colors[2] // Create-Express-Ready-Parameter's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<p><center>
The following XXXXXn Report illustrates current Pass validation by test category.
<p> * Green represents the number of passed scenarios
<p> * Black represents the number of scenarios that are in progress or dev/test.
<p> * Blue represents the number of failed scenarios.
</p>
</center>
</html>
-snippet of json-
[
{
"uri": "features/TC-0001-Bill-Of-Laiding-Shipping.feature",
"id": "check-pricing-for-bill-of-laiding",
"keyword": "Feature",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 3,
"tags": [
{
"name": "#Bill-Of-Laiding-Shipping",
"line": 1
}
],
"elements": [
{
"id": "check-pricing-for-bill-of-laiding;check-pricing-for-bill-of-laiding",
"keyword": "Scenario",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 5,
"type": "scenario",
"tags": [
{
"name": "#Bill-Of-Laiding-Shipping",
"line": 1
}
],
"steps": [
{
"keyword": "Given ",
"name": "TC-0006-Log into One Lisa",
"line": 7,
"match": {
"location": "features/step_definitions/my_steps.rb:779"
},
"result": {
"status": "passed",
"duration": 9024120000
}
},
{
"keyword": "Then ",
"name": "TC-0001-Bill-Of-Laiding Query onleLisa (Lisa_One) to access existing Bill Of laiding",
"line": 8,
"match": {
"location": "features/step_definitions/my_steps.rb:1194"
},
I will try to help you mading your code a bit easy to understand.
You JSON, should fill the var 'dataPie' that I created.
I hope that it will help you.
$(document).ready(function() {
var dataPie = [
{
name: 'ONE PART OF PIE',
y: 10,
color: Highcharts.getOptions().colors[0]
}, {
name: 'ANOTHER PART OF PIE',
y: 15,
color: Highcharts.getOptions().colors[1]
}];
var pieObject = {
type: 'pie',
name: 'xxxxxxx Passed',
data: dataPie,
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
$('#container').highcharts({
title: {
text: 'xxxxxxxxxxxxxx'
},
xAxis: {
categories: ['Nightly Scheduled Smoke Test', 'New Release Test', 'Regression Test', ' Discovery Test']
},
labels: {
items: [{
html: 'xxxxxxxxx Validation',
style: {
left: '55px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Ad-Hoc',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create Order',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create-Express-Ready-Parameter',
data: [3, 5, 5, 8]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
},
pieObject
]
});
})
1) There is a Highcharts Documentation on custom data preprocessing that covers loading data from JSON. If you are going to load data using jQuery's $.getJSON, then before creating the chart you should include data in chart's configuration object (used to create the chart).
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
2) Series should look like described in Documentation. The most important and most needed part is data array. To plot your chart you will need to parse your JSON data into format acceptable by Highcharts - more info in API.
In short - data must be 1 of 3: an array of numerical values(1), or array of arrays(2), or array of object with named properties(3). Data must cover y values of each point and can have additional info.
I am unable to help you with data parsing since I do not know where are required values nor what data you want to include in chart's data nor where (meaning as what - point names, additional tooltip values, series names, others?). If you will provide more info, then I could update this answer with more precise example / demo.
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();