Can I create multiple charts on multiple canvases?
« Back to message list
I have a asp.net web forms app with a portal or dashboard page containing multiple widgets. Each widget is contained in
a user control. Each user control has it's own canvas. RGraph is working ok with the first gauge control, but once I
had the second gauge control it seems that one control overwrites the other.
Can you use multiple controls with multiple canvases on one page?
Which controls can be used, each with its own canvas, without tripping on each other?
Thanks,
Ron
Posted by RGraph support on 30th May 2013Can you use multiple controls with multiple canvases on one page?
Which controls can be used, each with its own canvas, without tripping on each other?
Thanks,
Ron
Hi there,
Sounds like you might be giving the canvas tags the same IDs. Each canvas tag must have its own unique id - like this:
<canvas id="cvs1" width="600" height="200">[No canvas support]</canvas>
<canvas id="cvs2" width="600" height="200">[No canvas support]</canvas>
Richard, RGraph Support
Posted by Kade on 14th March 2016Sounds like you might be giving the canvas tags the same IDs. Each canvas tag must have its own unique id - like this:
<canvas id="cvs1" width="600" height="200">[No canvas support]</canvas>
<canvas id="cvs2" width="600" height="200">[No canvas support]</canvas>
Richard, RGraph Support
I have set different id for my Canvas's and my last graph is the only one that is showing up.
<div class="charts">
<canvas id="cvs1" width="800" height="500">[No Canvas Support]</canvas>
</div>
<div class="charts">
<canvas id="cvs" width="800" height="500">[No Canvas Support]</canvas>
</div>
<script>
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv1 = new RGraph.CSV('/data/data.csv', function (csv)
{
// Get the first column which becomes the labels
var labels1 = csv1.getCol(1);
// Get the number of rows in the CSV
var numrows1 = csv1.numrows;
// Get the number of cols in the CSV
var numcols1 = csv1.numcols;
// Get the second column which becomes the data
var data1 = csv1.getCol(0);
// Create the chart
var bar1 = new RGraph.Bar({
id: 'cvs1',
data: data1,
options: {
labels: labels1,
labelsColor: 'red',
xlabelsOffset: 10,
textColor: 'green',
title: 'title',
titleVpos: 0.25,
colors: ['blue'],
gutterLeft: 50,
gutterRight: 5,
gutterBottom: 150,
gutterTop: 50,
textAngle: 50,
hmargin: 25,
numxticks: 0,
numyticks: 0,
axisLinewidth: 3,
shadow: false,
ylabels: false,
labelsAbove: true,
labelsAboveSize: 12,
}
}).draw()
})
}
</script>
I am rather new to Web Development so it could be something very simple that I am overlooking
Posted by Richard on 14th March 2016<div class="charts">
<canvas id="cvs1" width="800" height="500">[No Canvas Support]</canvas>
</div>
<div class="charts">
<canvas id="cvs" width="800" height="500">[No Canvas Support]</canvas>
</div>
<script>
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv1 = new RGraph.CSV('/data/data.csv', function (csv)
{
// Get the first column which becomes the labels
var labels1 = csv1.getCol(1);
// Get the number of rows in the CSV
var numrows1 = csv1.numrows;
// Get the number of cols in the CSV
var numcols1 = csv1.numcols;
// Get the second column which becomes the data
var data1 = csv1.getCol(0);
// Create the chart
var bar1 = new RGraph.Bar({
id: 'cvs1',
data: data1,
options: {
labels: labels1,
labelsColor: 'red',
xlabelsOffset: 10,
textColor: 'green',
title: 'title',
titleVpos: 0.25,
colors: ['blue'],
gutterLeft: 50,
gutterRight: 5,
gutterBottom: 150,
gutterTop: 50,
textAngle: 50,
hmargin: 25,
numxticks: 0,
numyticks: 0,
axisLinewidth: 3,
shadow: false,
ylabels: false,
labelsAbove: true,
labelsAboveSize: 12,
}
}).draw()
})
}
</script>
I am rather new to Web Development so it could be something very simple that I am overlooking
Hi,
You're only creating one chart, using the 'cvs1' canvas. If you want another chart you need to create and configure it eg:
// Create the chart
var bar = new RGraph.Bar({
id: 'cvs',
data: [4,2,8,1,2,8,5,2],
options: {
}
}).draw();
Richard
Posted by Kade on 14th March 2016You're only creating one chart, using the 'cvs1' canvas. If you want another chart you need to create and configure it eg:
// Create the chart
var bar = new RGraph.Bar({
id: 'cvs',
data: [4,2,8,1,2,8,5,2],
options: {
}
}).draw();
Richard
sorry here are both the scripts for the charts
<script>
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv1 = new RGraph.CSV('/data/allDate.csv', function (csv)
{
// Get the first column which becomes the labels
var labels1 = csv1.getCol(1);
// Get the number of rows in the CSV
var numrows1 = csv1.numrows;
// Get the number of cols in the CSV
var numcols1 = csv1.numcols;
// Get the second column which becomes the data
var data1 = csv1.getCol(0);
// Create the chart
var bar1 = new RGraph.Bar({
id: 'cvs1',
data: data1,
options: {
labels: labels1,
labelsColor: 'red',
xlabelsOffset: 10,
textColor: 'green',
title: 'title1',
titleVpos: 0.25,
colors: ['blue'],
gutterLeft: 50,
gutterRight: 5,
gutterBottom: 150,
gutterTop: 50,
textAngle: 50,
hmargin: 25,
numxticks: 0,
numyticks: 0,
axisLinewidth: 3,
shadow: false,
ylabels: false,
labelsAbove: true,
labelsAboveSize: 12,
}
}).draw()
})
}
</script>
<script>
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv = new RGraph.CSV('/data/dataApp.csv', function (csv){
// Get the first column which becomes the labels
var labels = csv.getCol(1);
// Get the number of rows in the CSV
var numrows = csv.numrows;
// Get the number of cols in the CSV
var numcols = csv.numcols;
// Get the second column which becomes the data
var data = csv.getCol(0);
// Create the chart
var bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
labels: labels,
labelsColor: 'red',
xlabelsOffset: 10,
title: 'title',
colors: ['green'],
gutterLeft: 50,
gutterRight: 5,
gutterBottom: 150,
gutterTop: 50,
textAngle: 45,
hmargin: 25,
}
}).draw()
})
}
</script>
Posted by Richard on 14th March 2016<script>
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv1 = new RGraph.CSV('/data/allDate.csv', function (csv)
{
// Get the first column which becomes the labels
var labels1 = csv1.getCol(1);
// Get the number of rows in the CSV
var numrows1 = csv1.numrows;
// Get the number of cols in the CSV
var numcols1 = csv1.numcols;
// Get the second column which becomes the data
var data1 = csv1.getCol(0);
// Create the chart
var bar1 = new RGraph.Bar({
id: 'cvs1',
data: data1,
options: {
labels: labels1,
labelsColor: 'red',
xlabelsOffset: 10,
textColor: 'green',
title: 'title1',
titleVpos: 0.25,
colors: ['blue'],
gutterLeft: 50,
gutterRight: 5,
gutterBottom: 150,
gutterTop: 50,
textAngle: 50,
hmargin: 25,
numxticks: 0,
numyticks: 0,
axisLinewidth: 3,
shadow: false,
ylabels: false,
labelsAbove: true,
labelsAboveSize: 12,
}
}).draw()
})
}
</script>
<script>
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv = new RGraph.CSV('/data/dataApp.csv', function (csv){
// Get the first column which becomes the labels
var labels = csv.getCol(1);
// Get the number of rows in the CSV
var numrows = csv.numrows;
// Get the number of cols in the CSV
var numcols = csv.numcols;
// Get the second column which becomes the data
var data = csv.getCol(0);
// Create the chart
var bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
labels: labels,
labelsColor: 'red',
xlabelsOffset: 10,
title: 'title',
colors: ['green'],
gutterLeft: 50,
gutterRight: 5,
gutterBottom: 150,
gutterTop: 50,
textAngle: 45,
hmargin: 25,
}
}).draw()
})
}
</script>
Hi,
You have two "window.onload = " blocks and the second is replacing the first. So just have one which creates both charts:
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv1 = new RGraph.CSV('/data/allDate.csv', function (csv)
{
// Get the first column which becomes the labels
var labels1 = csv1.getCol(1);
// Get the number of rows in the CSV
var numrows1 = csv1.numrows;
// Get the number of cols in the CSV
var numcols1 = csv1.numcols;
// Get the second column which becomes the data
var data1 = csv1.getCol(0);
// Create the chart
var bar1 = new RGraph.Bar({
id: 'cvs1',
data: data1,
options: {
}
}).draw()
})
// Create the second chart
var csv = new RGraph.CSV('/data/dataApp.csv', function (csv){
// Get the first column which becomes the labels
var labels = csv.getCol(1);
// Get the number of rows in the CSV
var numrows = csv.numrows;
// Get the number of cols in the CSV
var numcols = csv.numcols;
// Get the second column which becomes the data
var data = csv.getCol(0);
// Create the chart
var bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
}
}).draw()
})
}
Richard
Posted by Kade on 14th March 2016You have two "window.onload = " blocks and the second is replacing the first. So just have one which creates both charts:
window.onload = function ()
{
/**
* This fetchs the CSV file and shows the Bar chart
*/
var csv1 = new RGraph.CSV('/data/allDate.csv', function (csv)
{
// Get the first column which becomes the labels
var labels1 = csv1.getCol(1);
// Get the number of rows in the CSV
var numrows1 = csv1.numrows;
// Get the number of cols in the CSV
var numcols1 = csv1.numcols;
// Get the second column which becomes the data
var data1 = csv1.getCol(0);
// Create the chart
var bar1 = new RGraph.Bar({
id: 'cvs1',
data: data1,
options: {
}
}).draw()
})
// Create the second chart
var csv = new RGraph.CSV('/data/dataApp.csv', function (csv){
// Get the first column which becomes the labels
var labels = csv.getCol(1);
// Get the number of rows in the CSV
var numrows = csv.numrows;
// Get the number of cols in the CSV
var numcols = csv.numcols;
// Get the second column which becomes the data
var data = csv.getCol(0);
// Create the chart
var bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
}
}).draw()
})
}
Richard
Worked wonderfully. Thank you so much
Posted by Adeel on 5th October 2017How to combine these two charts? in the same page lets say 3rd graph combination of both lines.
Posted by Richard on 5th October 2017Hi there,
You can add the lines to the same chart, like this:
www.rgraph.net/demos/line-black.html
Richard
You can add the lines to the same chart, like this:
www.rgraph.net/demos/line-black.html
Richard
Add a reply
« Back to message list