score:2
it sounds like you're loading the same javascript file (which contains the configurations for both of your charts) in both of your pages. the problem is since you're using a single javascript file with two chart definitions, the chart you try to create that doesn't exist in the html is throwing an error because you are passing in an empty context.
window.onload = function(){
//piechart (this will be null on page2.html)
var piectx = document.getelementbyid("piechart");
// you are passing in a null piectx on page2.html because there is no element with an id = "piechart"
var mypiechart = new chart(piectx, pievar);
//linechart (this will be null on page1.html)
var linectx = document.getelementbyid("linechart");
// you are passing in a null linectx on page1.html because there is no element with an id = "linechart"
var mylinechart = new chart(linectx, linevar);
};
you should either split your javascript file into two files so that the first page only includes the definition for the first chart and the second page only includes the definition for the second chart. or, add some conditions to prevent trying to create the empty chart (like this).
window.onload = function(){
//piechart (this will be null on page2.html)
var piectx = document.getelementbyid("piechart");
if (piechart) {
var mypiechart = new chart(piectx, pievar);
}
//linechart (this will be null on page1.html)
var linectx = document.getelementbyid("linechart");
if (linechart) {
var mylinechart = new chart(linectx, linevar);
}
};
Source: stackoverflow.com
Related Query
- Chartjs.org Chart only displaying in one page
- Why is the html page only displaying one of the charts?
- Chartjs chart with only one axis
- VueJS + Chartjs - Chart only renders after code change
- ChartJS with React: Only one value showing on time chart
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- chartjs datalabels change font and color of text displaying inside pie chart
- Chartjs linechart with only one point - how to center
- How to display value of only one datapoint in line chart
- ChartJS - Line chart issue with only 1 point
- ChartJS "half donut" chart not displaying properly
- ChartsJS make number in middle for only one chart
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- Displaying multiple line graphs on one page
- Empty circle - only point strok in line chart for ChartJS
- ChartJs - Is is possible to show only tooltip in one dataset?
- Disable chartJS tool tip on one dataset only
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Chartjs Stacked bar chart not displaying correctly
- ChartJS remove previous chart when making new one
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- Why my ChartJs only Coloring one section?
- When I added a funnel chart to chartjs all the charts are load compressed until resize page
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- Chartjs bar chart appears empty when page loads
- Displaying a chartjs chart within a bulma full height hero
- Chart js - render images on only one dataset
- Why i only get one value after executing "for loop" to display "datasets.data" in ChartJS
- Bar chart (chart.js) with only 2 points does not show one of the bars
- Draw multiple chart in one page with Chart.js
More Query from same tag
- JQuery Line Chart's X Axis not display in ASP.NET, C#, SQL Server
- chart.js datapoint offset multiple charts
- how do I break a comma separated string into new lines in tooltip callbacks afterBody?
- Add text before time in tooltip
- Changing the background of a ChartJS on node js
- How to show a "total" sum label on the top of stacked bars
- Dynamic js chart display problems
- break y axis in line chart chart.js
- Chart.js customization, two Y-Axis overlay, chart area padding, odd tick padding
- Why is the data from my API not displaying on my chart.js chart in React?
- ChartJS in Datatable cell performance
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- How to show Charts.js lables
- Why chart.js charts are not plotting data in Safari (works in Chrome)
- How to convert JSON data to object that contains other objects?
- ng2-chart with Angular 4: Can't bind to 'data' since it isn't a known property of 'canvas'
- Adding item to TooltipItems[] in ChartJS doesn't update labelColors
- chart.js chart-click pass parameter in Angular controller
- Hide chart labels
- Chartjs draw line chart where line go back and forth (by chronological order)
- Why aren't my data points getting placed in the corresponding locations in my chart?
- ChartJS v2.6 update breaks custom line-with-area-range (stripe) chart
- Chart.js render problem when routing Angular
- Remove tooltip if has no label
- Use of ng-class with Chart.js
- Group bar chart in ReactChartJS2 click particular element
- Accessing data in an associative array in CodeIgniter 3
- issue populating chart.js from entity framework in .Net Core 5
- How to group chart labels together?
- generator-angular-fullstack and angular-chart.js not displaying charts