So, I'm trying to implement CanvasJS into my project. I'm having a hard time trying to get the values from my structs to work in the tags. It works fine for the HTML code, but I'm not sure how to get it work for the javascript. Is it a different syntax?
<html>
<head>
<title>results</title>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
/*dataPoints: [
{ label: "Time", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]*/
dataPoints: [
{{range .Pair}}
{label: {{.Time}}, y: {{.Value}}}
{{end}}
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<h1>{{.Id}}</h1>
<ol>
{{range .Pair}}
<ul>
<li>Time: {{.Time}}</li>
<li>Value: {{.Value}}</li>
</ul>
{{end}}
</ol>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
Related
C3 version: 0.7.12
D3 version: 5.15.0
Browser: Chrome
OS: MAC
Codepen link
var chart = c3.generate({
bindto: '#c3',
data: {
x: 'x',
columns: [
['x', '2013-01-10'],
['sample', 30]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
// this also works for non timeseries data
values: ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04','2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12','2013-01-13', '2013-01-14', '2013-01-15']
}
}
}
});
When you have multiple values for x-axis ticks and there is single point to load on the graph ended in timestamps overlap.
This issue won't come if you have more than one point to load in same graph. How to resolve this when you have single point first for sometime and then second point loads after certain period of time ?
You could solve this by removing the tick values for the x axis and replacing them by format (you already define the date within the x data):
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
Please have a look at the executable snippet below. I have added a Timeout function for demonstration.
var chart = c3.generate({
bindto: "#root",
data: {
x: "x",
columns: [
["x", "2013-01-10"],
["sample", 30]
]
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d"
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['x', '2015-01-09', '2015-01-10', '2015-01-11'],
['sample', 20, 30, 45],
],
duration: 50,
});
}, 3500);
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
<div root>
<div rootRoot id="root" style="width: 95%; height: 200px"></div>
<div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>
If you already want to display all the times as ticks on the x axis at the beginning when only one data point is present, you could add "null" to the data string:
data: {
x: 'x',
columns: [
['x', '2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12'],
['sample', null, 30, null, null]
]
}
Below the executable snippet:
var chart = c3.generate({
bindto: "#root",
data: {
x: "x",
columns: [
['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
['sample', null, 30, null, null]
]
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d"
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
['sample', 20, 30, 15, 25],
],
duration: 50,
});
}, 3500);
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
<div root>
<div rootRoot id="root" style="width: 95%; height: 200px"></div>
<div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>
Hello I have this code using javascript and chart.js :
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id = "Global">
<div id = "gauche">
<canvas id="line-chart" width="800" height="450"></canvas>
<script>
var ctx = document.getElementById("line-chart").getContext('2d');
var config = {
type: 'line',
data: {
datasets: [{
data: [{'y': 426777.148122,'x': 18.123},
{'y': 258927.721326,'x': 46.8603108462},
{'y': 5419.37148146,'x': 1110.14081215},
{'y': 5136.33830766,'x': 1138.878123}],
label: "Model",
borderColor: "#3e95cd",
fill: false
}, {
label : 'Data',
fill:false,
showLine: false,
backgroundColor: "#FF0000",
data : [{x: 17.0, y: 454995.091169},
{x: 1137.0, y: 3369.7047454},
{x: 1138.0, y: 3539.605825},
{x: 1140.0, y: 4927.1313084}],
type: 'line'
}]
},
options: {
title:{
display: true,
text:"Graph"
},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
};
var forecast_chart = new Chart(ctx, config);
alert(data.datasets[0].data);
</script>
But when I type this : alert(data.datasets[0].data); I get nothing... basically I just want to express this 426777.148122 which is part of the data but I don't know how to do it, I thought to write this data.datasets[0].data but it does not work...
Any ideas ?
Thank you very much !
Try:
alert(JSON.stringify(config.data.datasets[0].data[0]));
You will need JSON.stringify because config.data.datasets[0].data is also an array of objects
or
alert(config.data.datasets[0].data[0].x);
To get the X value of the first entry of config.data.datasets[0].data
I have to create pie charts for a website. It seems to me that I can't dynamically render pie charts depending on how many I need. At max I have to render 28. So, I'm thinking that I would have to type out
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Gaming Consoles Sold in 2012"
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type: "pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ y: 4181563, indexLabel: "PlayStation 3" },
{ y: 2175498, indexLabel: "Wii" },
{ y: 3125844, indexLabel: "Xbox 360" },
{ y: 1176121, indexLabel: "Nintendo DS"},
{ y: 1727161, indexLabel: "PSP" },
{ y: 4303364, indexLabel: "Nintendo 3DS"},
{ y: 1717786, indexLabel: "PS Vita"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
this code 28 times. But, sometimes I won't need all 28 pie charts. So I was thinking I could hide the pie charts if they aren't needed. But, the main question is, "can I dynamically allocate canvasJS pie charts"? So I only have one main block of code that can create X amount of pie charts.
Got it. So following my original comment. I hard coded the 2 tuple variable in the data section just to get the basic idea running. So the variable data was not used. But, I followed through with just simply creating an array of charts. With a naming convention of pieContainer+i. Where in my html code. I have 29 div elements with the convention pieContainer+1.
var charts = [];
var data = [];
function populatePieCharts(size)
{
for (i = 0; i < size; i++)
{
console.log("FFFF" + i)
charts[i] = new CanvasJS.Chart("pieContainer" + i,
{
title: {
text: i
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type:"pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ y: 4181563, indexLabel: "PlayStation 3" },
{ y: 2175498, indexLabel: "Wii" },
{ y: 3125844, indexLabel: "Xbox 360" },
{ y: 1176121, indexLabel: "Nintendo DS" }
]
}]
});
}
renderCharts(size)
}
function renderCharts(chartAmount)
{
console.log(charts.length);
for (i2 = 0; i2 < chartAmount; i2++)
{
charts[i2].render();
console.log(i2);
}
}
Which leads me to another step. Instead of hard coding the 29 div elements. I could probably just dynamically create the div elements based on the pie charts needed.
i am a new when it comes to jquery and javascript but I'm trying learn slowly.What my question is, if i have a json file that looks like
var data= [{"tasknumber":304030,
"date":"2012-05-05",
"operator":"john doe"},
{"tasknumber":23130,
"date":"2012-07-07",
"operator":"john doeeeeeeee"},
{"tasknumber":233330,
"date":"2012-08-08",
"operator":"john doe"}]
and i applied .countBy to it from the underscore library to get a array that looks like this
{"john doe":2,"john doeeeeeeee":1}
so for the next part im using a sample jquery graph outline which i found online
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
I tried a couple ways to call my new array within this part of the code
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
//insert here
]
}
]
but i only get blank screens and undefine when i try and open it.does anyone have any guidance for me on how to call my array within the datapoints?
my data is in a different file called task.json and i gotta call it using
var input=require('./task.json');
const _ = require(`underscore`);
var names=_.countBy(input,'operator');
Lets say, your JSON object is stored in some variable(eg: myObject).
var myObject = {"john doe":2,"john doeeeeeeee":1};
Declare a variable to store dataPoints from your JSON and push dataPoints into your array.
var dps = [];
for(var element in myObject) {
dps.push({label: element, y: myObject[element]});
}
Once you have done this, assign this variable (dps) to dataPoints of CanvasJS chart.
data: [
type: "column",
dataPoints: dps
]
You can see a working example in this fiddle.
so I've created a database to store scientific research data and i wanted to created graphs out of this data. i want to use Highcharts but i can't even get the example code form the Highcharts website to work. i am new to web development so i'm not really sure where i'm going wrong.
<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<h2>Hey now brown cow</h2>
</body>
</html>
also the "hey now brown cow" is just in there so i know the html file works.