Is it possible to scale Chart.js background Image so that when the page is resized, the background image is also resized?
Followed the chartjs.org example, but it doesn't resize either.
I've tried CSS on the image object...
Could possibly tie image to around chart that sizes with page.
Suggestions?
//setup block
const data = {
datasets: [{
label: "Elevation",
radius: 0,
borderWidth: 2,
pointBorderColor: 'blue',
pointBackgroundColor: 'red',
data: [{
x: "03/02/2022",
y: "659.63"
}, {
x: "03/03/2022",
y: "659.6"
}, {
x: "03/04/2022",
y: "659.6"
}, {
x: "03/05/2022",
y: "659.63"
}, {
x: "03/06/2022",
y: "659.81"
}, {
x: "03/07/2022",
y: "659.86"
}, {
x: "03/08/2022",
y: "659.99"
}, {
x: "03/09/2022",
y: "660.29"
}, {
x: "03/10/2022",
y: "660.38"
}, {
x: "03/11/2022",
y: "660.39"
}, {
x: "03/12/2022",
y: "660.78"
}, {
x: "03/13/2022",
y: "660.95"
}, {
x: "03/14/2022",
y: "660.95"
}, {
x: "03/15/2022",
y: "661.01"
}, {
x: "03/16/2022",
y: "661.48"
}, {
x: "03/17/2022",
y: "661.39"
}, {
x: "03/18/2022",
y: "661.24"
}, {
x: "03/19/2022",
y: "661.34"
}, {
x: "03/20/2022",
y: "661.44"
}, {
x: "03/21/2022",
y: "661.34"
}, {
x: "03/22/2022",
y: "661.12"
}, {
x: "03/23/2022",
y: "661.27"
}, {
x: "03/24/2022",
y: "661.29"
}, {
x: "03/25/2022",
y: "661.29"
}, {
x: "03/26/2022",
y: "661.29"
}, {
x: "03/27/2022",
y: "661.29"
}, {
x: "03/28/2022",
y: "661.52"
}, {
x: "03/29/2022",
y: "661.53"
}, {
x: "03/30/2022",
y: "661.44"
}, {
x: "03/31/2022",
y: "661.36"
}, {
x: "04/01/2022",
y: "661.0"
}, {
x: "04/02/2022",
y: "660.68"
}, {
x: "04/03/2022",
y: "660.41"
}, {
x: "04/04/2022",
y: "660.247"
}, {
x: "04/05/2022",
y: "660.31"
}, {
x: "04/06/2022",
y: "660.46"
}, {
x: "04/07/2022",
y: "660.7"
}, {
x: "04/08/2022",
y: "660.73"
}, {
x: "04/09/2022",
y: "660.73"
}, {
x: "04/10/2022",
y: "660.73"
}, {
x: "04/11/2022",
y: "660.85"
}, {
x: "04/12/2022",
y: "660.87"
}, {
x: "04/13/2022",
y: "660.83"
}, {
x: "04/14/2022",
y: "660.75"
}, {
x: "04/15/2022",
y: "660.73"
}],
fill: false,
borderColor: 'blue'
}]
};
//plugin block
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
width,
height
}
} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
const image = new Image();
image.src = 'castle.png';
const imgPlugin = {
id: 'custom_canvas_background_image',
beforeDraw: (chart) => {
if (image.complete) {
const ctx = chart.ctx;
const {
top,
left,
width,
height
} = chart.chartArea;
const x = left + width / 2 - image.width / 2;
const y = top + height / 2 - image.height / 2;
ctx.drawImage(image, x, y);
} else {
image.onload = () => chart.draw();
}
}
};
var GradientBgPlugin = {
beforeDraw: function(chart, args, options) {
const ctx = chart.ctx;
const canvas = chart.canvas;
const chartArea = chart.chartArea;
// Chart background
var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
gradientBack.addColorStop(0, "rgba(255, 255, 255, 0.7)");
gradientBack.addColorStop(1, "rgba(200, 204, 255, 0.7)");
ctx.fillStyle = gradientBack;
ctx.fillRect(chartArea.left, chartArea.bottom, chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
}
};
//config block
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom'
},
title: {
display: true,
text: "HARTWELL PROJECT ",
font: {
size: 20
}
},
},
scales: {
x: {
type: 'time',
time: {
parser: 'MM/dd/yyyy',
unit: 'month',
displayFormats: {
month: 'MMM yyyy'
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
position: 'left',
display: true,
text: 'Elevation (FT-MSL)'
}
}
},
chartAreaBorder: {
borderColor: 'black',
borderWidth: 10,
//borderDash: [5, 5],
borderDashOffset: 5
},
imgPlugin: {}
},
plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};
// render block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
.chartBox {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
When drawing the image inside the beforeDraw hook, you should should specify its width and height depending on the size of the canvas.
const x = left + width / 2 - height / 2;
const y = top + height / 2 - height / 2;
ctx.drawImage(image, x, y, height, height);
Please take a look at your amended code and see how it works.
const data = {
datasets: [{
label: "Elevation",
radius: 0,
borderWidth: 2,
pointBorderColor: 'blue',
pointBackgroundColor: 'red',
data: [{
x: "03/02/2022",
y: "659.63"
}, {
x: "03/03/2022",
y: "659.6"
}, {
x: "03/04/2022",
y: "659.6"
}, {
x: "03/05/2022",
y: "659.63"
}, {
x: "03/06/2022",
y: "659.81"
}, {
x: "03/07/2022",
y: "659.86"
}, {
x: "03/08/2022",
y: "659.99"
}, {
x: "03/09/2022",
y: "660.29"
}, {
x: "03/10/2022",
y: "660.38"
}, {
x: "03/11/2022",
y: "660.39"
}, {
x: "03/12/2022",
y: "660.78"
}, {
x: "03/13/2022",
y: "660.95"
}, {
x: "03/14/2022",
y: "660.95"
}, {
x: "03/15/2022",
y: "661.01"
}, {
x: "03/16/2022",
y: "661.48"
}, {
x: "03/17/2022",
y: "661.39"
}, {
x: "03/18/2022",
y: "661.24"
}, {
x: "03/19/2022",
y: "661.34"
}, {
x: "03/20/2022",
y: "661.44"
}, {
x: "03/21/2022",
y: "661.34"
}, {
x: "03/22/2022",
y: "661.12"
}, {
x: "03/23/2022",
y: "661.27"
}, {
x: "03/24/2022",
y: "661.29"
}, {
x: "03/25/2022",
y: "661.29"
}, {
x: "03/26/2022",
y: "661.29"
}, {
x: "03/27/2022",
y: "661.29"
}, {
x: "03/28/2022",
y: "661.52"
}, {
x: "03/29/2022",
y: "661.53"
}, {
x: "03/30/2022",
y: "661.44"
}, {
x: "03/31/2022",
y: "661.36"
}, {
x: "04/01/2022",
y: "661.0"
}, {
x: "04/02/2022",
y: "660.68"
}, {
x: "04/03/2022",
y: "660.41"
}, {
x: "04/04/2022",
y: "660.247"
}, {
x: "04/05/2022",
y: "660.31"
}, {
x: "04/06/2022",
y: "660.46"
}, {
x: "04/07/2022",
y: "660.7"
}, {
x: "04/08/2022",
y: "660.73"
}, {
x: "04/09/2022",
y: "660.73"
}, {
x: "04/10/2022",
y: "660.73"
}, {
x: "04/11/2022",
y: "660.85"
}, {
x: "04/12/2022",
y: "660.87"
}, {
x: "04/13/2022",
y: "660.83"
}, {
x: "04/14/2022",
y: "660.75"
}, {
x: "04/15/2022",
y: "660.73"
}],
fill: false,
borderColor: 'blue'
}]
};
//plugin block
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
width,
height
}
} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
const image = new Image();
image.src = 'https://i.stack.imgur.com/S7tJH.png';
const imgPlugin = {
id: 'custom_canvas_background_image',
beforeDraw: (chart) => {
if (image.complete) {
const ctx = chart.ctx;
const {
top,
left,
width,
height
} = chart.chartArea;
const x = left + width / 2 - height / 2;
const y = top + height / 2 - height / 2;
ctx.drawImage(image, x, y, height, height);
} else {
image.onload = () => chart.draw();
}
}
};
var GradientBgPlugin = {
beforeDraw: function(chart, args, options) {
const ctx = chart.ctx;
const canvas = chart.canvas;
const chartArea = chart.chartArea;
// Chart background
var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
gradientBack.addColorStop(0, "rgba(255, 255, 255, 0.7)");
gradientBack.addColorStop(1, "rgba(200, 204, 255, 0.7)");
ctx.fillStyle = gradientBack;
ctx.fillRect(chartArea.left, chartArea.bottom, chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
}
};
//config block
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom'
},
title: {
display: true,
text: "HARTWELL PROJECT ",
font: {
size: 20
}
},
},
scales: {
x: {
type: 'time',
time: {
parser: 'MM/dd/yyyy',
unit: 'month',
displayFormats: {
month: 'MMM yyyy'
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
position: 'left',
display: true,
text: 'Elevation (FT-MSL)'
}
}
},
chartAreaBorder: {
borderColor: 'black',
borderWidth: 10,
//borderDash: [5, 5],
borderDashOffset: 5
},
imgPlugin: {}
},
plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};
// render block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
Related
`
<html>
<head>
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
}
.main-panel {
width: 70%;
float: left;
}
.side-panel {
width: 30%;
background-color: lightgray;
min-height: 300px;
overflow: auto;
float: right;
}
</style>
</head>
<body>
<div class="graph-container">
<div id="myDiv" class="main-panel"></div>
<div id="lineGraph" class="side-panel"></div>
</div>
<script>
var nodes = [
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }
];
var edges = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 }
];
var x = [];
var y = [];
var z = [];
for (var i = 0; i < nodes.length; i++) {
x.push(nodes[i].x);
y.push(nodes[i].y);
z.push(nodes[i].z);
}
const edge_x = [];
const edge_y = [];
const edge_z = [];
for (var i = 0; i < edges.length; i++) {
const a = nodes[edges[i].source];
const b = nodes[edges[i].target];
edge_x.push(a.x, b.x, null);
edge_y.push(a.y, b.y, null);
edge_z.push(a.z, b.z, null);
}
var traceNodes = {
x: x, y: y, z: z,
mode: 'markers',
// marker: { size: 12, color: 'red' },
// marker: { size: 12, color: Array.from({length: nodes.length}, () => 'red') },
text: [0, 1, 2, 3, 4],
// add the color gradient to the nodes from red to blue
// marker: { size: 12, color: Array.from({length: nodes.length}, () => 'red'), colorscale: 'Viridis'},
marker:{color: [1,2,3,4,5],colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']], showscale: true, size: 12},
hoverinfo: 'text',
hoverlabel: {
bgcolor: 'white'
},
customdata: nodes.map(function(node) {
if (node.value !== undefined)
return node.value;
}),
type: 'scatter3d'
};
var traceEdges = {
x: edge_x,
y: edge_y,
z: edge_z,
//add the color gradient to the lines from red to blue
// line: { color: Array.from({length: edge_x.length}, () => 'red'), width: 5, colorscale: 'Viridis'},
line: {
color: [4,1,4,1,4,1],
colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']],
showscale: true,
width: 5
},
type: 'scatter3d',
mode: 'lines',
// line: { color: 'red', width: 2, arrow: {size: 50, color: 'black', end:1}},
// line: { color: 'red', width: 2, shape: 'spline', arrow: {size: 500, color: 'black', end:1}},
//add color gradient to the lines
// line: { width: 2, shape: 'spline', arrow: {size: 500, color: 'black', end:1}, colorscale: 'Viridis'},
opacity: 2.8
//add cones shape to the end of the lines
};
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0 }
};
// var traceCone = {
// type: "cone",
// x: [1], y: [1], z: [1],
// u: [1], v: [1], w: [0]
// };
//add the cones shape at the middle of the lines and they are pointing to the end of the lines
var traceCone = {
type: "cone",
x: [0.5, 1.5, 2.5, 3.5], y: [0.5, 0.5, 0.5, 0.5], z: [0.5, 1.5, 2.5, 3.5],
u: [1,1,1,1], v: [1,-1,1,-1], w: [1,1,1,1],
//set the size of the cones
sizemode: "absolute",
sizeref: 0.5,
// give color to cone which have co-oridnates (0.5,0.5,0.5)
colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']],
// color: [1,2,3,4], // color array
// colorscale: 'Viridis',
showscale: false
// colorscale: 'Viridis',
// color: [1,4,1,1,4,1],
// showscale: false,
};
Plotly.newPlot('myDiv', [traceNodes, traceEdges,traceCone],layout, { displayModeBar: false });
// max y value for the line plot
const ymax = Math.max(...nodes.map(n => n.value).flat());
document.getElementById('myDiv').on('plotly_click', function(data){
var nodeIndex = data.points[0].pointNumber;
var values = nodes[nodeIndex].value;
//change the color of the clicked node to blue and when clicked on another node, change the color of the previous node to red
var update = {
//give the color of the nodes to the initial color
// marker: { color: Array.from({length: nodes.length}, () => 'red') }
//give the color of the nodes to the color gradient
marker: { color: [1,2,3,4,5],colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']], showscale: true, size: 12}
};
update.marker.color[nodeIndex] = 'blue';
setTimeout(function() {
Plotly.restyle('myDiv', update);
}, 50);
Plotly.newPlot('lineGraph', [{
type: 'scatter',
mode: 'lines',
x: [0, 1, 2],
y: values
}], {
margin: { t: 0 },
yaxis: {autorange: false, range: [0, ymax + 1]}
});
});
</script>
</body>
</html>
The code above shows how to display a 3D network graph , and cones were used as an arrow of the edge.Basically we wanted to give different colors to the cones,but its not working...
Please help us to way out of this problem.
So,the code that I have shown ,assign same color to all the cones (which I dont want), is there any way out?
Unlike scatter traces, cone traces don't have a color property where you can specify an array of numbers that are mapped to a color scale. You can only define what the colorscale is, and its bounds in the color space using cmin and cmax.
The thing (number) that determines the color of a cone is its u/v/w norm in the vector field, and it seems that it's not possible to decide arbitrarily - regardless of that norm - how each cone should be colored.
If I'm not wrong the u/v/w norm is computed as follows :
const norm = Math.sqrt(u**2 + v**2 + w**2);
In your example, all cones are assigned the same color because they all have the same norm, which is √3. If you try to assign different u/v/w values, it should change accordingly.
I have a simple json file:
{
"id": 1,
"name": "Bitcoin",
"quantity": 1,
"price": 1,
"old_price": 0.99,
"info": "The most famous one",
"archived_data": [
{
"id": 0,
"name": "jan",
"sold": 5,
"bought": 3
},
{
"id": 1,
"name": "feb",
"sold": 15,
"bought": 30
},
{
"id": 2,
"name": "mar",
"sold": 5,
"bought": 3
},
{
"id": 3,
"name": "apr",
"sold": 15,
"bought": 30
}
]
}
I now want to display them in my chart:
import CanvasJSReact from '../plugins/canvasjs.react';
import React, {Component} from 'react';
const CanvasJSChart = CanvasJSReact.CanvasJSChart;
class CryptoChart extends Component {
constructor(props) {
super(props);
this.toggleDataSeries = this.toggleDataSeries.bind(this);
}
toggleDataSeries(e){
e.dataSeries.visible = !(typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible);
this.chart.render();
}
render() {
const options = {
theme: "light2",
animationEnabled: true,
axisX: {
title: "Months"
},
axisY: {
title: "Sold",
titleFontColor: "#007bff",
lineColor: "#007bff",
labelFontColor: "#007bff",
tickColor: "#007bff"
},
axisY2: {
title: "Bought",
titleFontColor: "#51CDA0",
lineColor: "#51CDA0",
labelFontColor: "#51CDA0",
tickColor: "#51CDA0"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: this.toggleDataSeries
},
data: [
{
type: "spline",
name: "Sold",
showInLegend: true,
xValueFormatString: "MMM YYYY",
yValueFormatString: "#,##0 Units",
dataPoints: [
{ x: new Date(2020, 0, 1), y: this.props.crypto.archived_data[0].sold },
{ x: new Date(2020, 1, 1), y: this.props.crypto.archived_data[1].sold },
{ x: new Date(2020, 2, 1), y: this.props.crypto.archived_data[2].sold },
{ x: new Date(2020, 3, 1), y: this.props.crypto.archived_data[3].sold },
{ x: new Date(2020, 4, 1), y: this.props.crypto.archived_data[4].sold },
{ x: new Date(2020, 5, 1), y: this.props.crypto.archived_data[5].sold },
{ x: new Date(2020, 6, 1), y: this.props.crypto.archived_data[6].sold },
{ x: new Date(2020, 7, 1), y: this.props.crypto.archived_data[7].sold },
{ x: new Date(2020, 8, 1), y: this.props.crypto.archived_data[8].sold },
{ x: new Date(2020, 9, 1), y: this.props.crypto.archived_data[9].sold },
{ x: new Date(2020, 10, 1), y: this.props.crypto.archived_data[10].sold },
{ x: new Date(2020, 11, 1), y: this.props.crypto.quantity}
]
},
{
type: "spline",
name: "Bought",
axisYType: "secondary",
showInLegend: true,
xValueFormatString: "MMM YYYY",
yValueFormatString: "$#,##0.#",
dataPoints: [
{ x: new Date(2020, 0, 1), y: this.props.crypto.archived_data[0].bought },
{ x: new Date(2020, 1, 1), y: this.props.crypto.archived_data[1].bought },
{ x: new Date(2020, 2, 1), y: this.props.crypto.archived_data[2].bought },
{ x: new Date(2020, 3, 1), y: this.props.crypto.archived_data[3].bought },
{ x: new Date(2020, 4, 1), y: this.props.crypto.archived_data[4].bought },
{ x: new Date(2020, 5, 1), y: this.props.crypto.archived_data[5].bought },
{ x: new Date(2020, 6, 1), y: this.props.crypto.archived_data[6].bought },
{ x: new Date(2020, 7, 1), y: this.props.crypto.archived_data[7].bought },
{ x: new Date(2020, 8, 1), y: this.props.crypto.archived_data[8].bought },
{ x: new Date(2020, 9, 1), y: this.props.crypto.archived_data[9].bought },
{ x: new Date(2020, 10, 1), y: this.props.crypto.archived_data[10].bought },
{ x: new Date(2020, 11, 1), y: this.props.crypto.quantity }
]
}
]
}
return (
<div>
<CanvasJSChart options = {options} onRef={ref => this.chart = ref} />
</div>
);
}
} export default CryptoChart;
The this.props.crypto.quantity works as expected, but the this.props.crypto.archived_data[0].sold and this.props.crypto.archived_data[0].bought don't work: the app crashes and the console says
TypeError: Cannot read property '0' of undefined
Does anyone know how to output this?
Edit: Ive made a react.new here so its easier to see what is going wrong and maybe how it can be fixed
pls help. SOS
I'm trying to bind chart-data to plot graph, like:
[attr.chart-data]='chartData'
My Component:
export class AppComponent {
arr: Array<Object> = [];
seriesConfig: {};
ngOnInit(): void {
this.arr = [
{ x: 1530426560000, y: 179.46 },
{ x: 1530426570000, y: 179.58 },
{ x: 1530426580000, y: 179.58 },
{ x: 1530426590000, y: 179.6 },
{ x: 1530426600000, y: 179.52 },
{ x: 1530426610000, y: 179.56 },
{ x: 1530426620000, y: 179.52 },
{ x: 1530426630000, y: 179.52 }
];
this.seriesConfig = {
y: { type: "line", name: "series1", x: "x", y: "y" }
};
} }
My View:
<div>
<h2 id="title-tag">Timeseries</h2>
<px-vis-timeseries id="ts1" prevent-resize width="950" height="500" register-location="side" enable-tooltip="true" tooltip
include-all-series selection-type="x" [attr.chart-data]='arr' [attr.series-config]='seriesConfig' x-axis-config='{"title": "Date"}'
y-axis-config='{"title": "y1"}'>
</px-vis-timeseries>
Questions:
Could you please tell, how to correctly bind data?
What for series-config needed? How to correctly make it up?
Thanks in advance!
I think you need to pass the chart data with a camelCase key, rather than dashes. (This is the way Polymer works.) Something like this:
<px-vis-timeseries [chartData]='arr'></px-vis-timeseries>
Some more info & links here:
https://www.predix-ui.com/#/develop/frameworks-angular
UPDTAED:Now with the below code, the json is parsing correctly ,
But the columns are not displayed on the initial load, if i put the cursor over i can see the tooltip displaying the series name and value. However, if i re-size the browser window the columns appear. i tried adding chart.redraw(); after the updatedChart(); but it dosent help my div is as below
<div id="container" style="min-width: 400px ; height: 650; margin:0 auto"></div>
Any ideas please? Also, i cannot re-produce this problem on jsfiddle and have tested this on safari,chrome and firefox (all showing this strange behavior)
var chart;
options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series:
[]
};
$(document).ready(function() {
chart= new Highcharts.Chart(options)
console.log("calling update chart");
updateChart();
});
function updateChart() {
$.ajax({
type: "GET",
url: "test.json",
async: false,
dataType: "json",
success: function(data){
console.log(data);
var i=0;
$.each(data,function(index,item){
console.log(data.Chart1[index]);
console.log("i value is "+i);
chart.addSeries(data.Chart1[index]);
i++;
});
}
});
}
}
my json input file is below
[
{
name: 'name1',
y: [32.6,16.6,1.5]
}, {
name: 'name2',
y: [6.7,0.2,0.6]
}, {
name: 'name3',
y: [1,3.7,0.7]
}, {
name: 'name4',
y: [20.3,8.8,9.5]
},{
name: 'name5',
y: [21.5,10,7.2]
}, {
name: 'name6',
y: [1.4,1.8,3.7]
}, {
name: 'name7',
y: [8.1,0,0]
}, {
name: 'name8',
y: [28.9,8.9,6.6]
}
]
Edited:
var chart = null,
options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: []
};
$(document).ready(function() {
updateChart();
});
function updateChart() {
$.getJSON('test.json', function(data) {
// check if the chart's already rendered
if (!chart) {
// if it's not rendered you have to update your options
options.series = data;
chart = new Highcharts.Chart(options);
} else {
// if it's rendered you have to update dinamically
jQuery.each(data, function(seriePos, serie) {
chart.series[seriePos].setData(serie, false);
});
chart.redraw();
}
});
}
Fiddle: LINK
Please help,
I have only known about highcharts, Json and Jquery for 5 days. I have a Json file with info about 3 sets of results. I am trying to put 3 different lines on a highcharts chart. I do not know the syntax for this. i know that calling the options object allows you to add series and categories. I do not know the syntax to accomplish this
Here is the code so far:
var chart;
var eng_data;
var data;
var options, series;
$(document).ready(function () {
options = {
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
// events: { load: requestData }
},
title: {
text: null
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 7 * 24 * 3600000, // 7 days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Percentages'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 2
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: []
};
});
$.getJSON('eng.txt', function (eng_data) {
for (var i = 0; i < eng_data.length; i++) {
series = {
data: []
};
if (i == 1 && i <= 4) {
// options.addSeries({
data: eng_data[i];
name: "English";
pointInterval: 72 * 3600 * 1000;
pointStart: Date.UTC(2012, 0, 01)
// });
}
if (i == 5 && i <= 8) {
// options.addSeries({
data: eng_data[i];
name: "Maths";
pointInterval: 72 * 3600 * 1000;
pointStart: Date.UTC(2012, 0, 02)
// });
}
if (i == 9 && i <= 12) {
// options.addSeries({
data: eng_data[i];
name: "Science";
pointInterval: 72 * 3600 * 1000;
pointStart: Date.UTC(2012, 0, 03)
// });
}
options.series.push(series);
var chart = new Highcharts.Chart(options);
}
});