Embedding a line chart created with chart.js into an SVG container with the help of d3.js

My initial attempt was successful using a button element with the necessary classes and attributes.

<button type="button" class="btn btn-default glyphicon glyphicon-arrow-left"></button>

However, my next endeavor involved incorporating a canvas object, specifically a line chart generated by the chart.js library, which unfortunately did not yield the desired outcome. I utilized d3.js to embed the chart into an svg element. Upon inspection of my angularjs chart.js directive (utilized via the same), it was evident that the directive was not being invoked at all.

The foreignObject housing the chart.js canvas was successfully inserted into the html document, but rendering was unsuccessful.

<foreignObject x="5" y="5">
                <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" click="onClick"></canvas>
            </foreignObject>

Has anyone encountered a similar issue before?

javascriptangularjssvgd3.jschart.js

Answer №1

When inspecting the HTML code that's generated

Make sure to specify both height and width for the foreignObject element

d3.select("svg")
     .append("foreignObject")
         .attr("width", 480)
         .attr("height", 500)

Then, attach the canvas inside a body element below the foreignObject

  
<!-- Code snippet here -->
    . append("xhtml:body")
        .html('<canvas id = "line" class = "chart chart-line" data = "data" labels = "labels" legend = "true"></canvas>');

A functional example is provided below (works best with Chrome)

 <!-- Angular and D3 code here --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>
<link href="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css" rel="stylesheet" />
<script src="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>

<div ng-app="app">
  <div ng-controller="chartController">
    <svg width="960" height="500"></svg>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating circular patterns with looping on a canvas

My goal is to draw circles in a loop, but when I execute my code, I am encountering an unexpected result: The intention is to simply draw 3 circles in random positions. Here is my current code: for (var i = 0; i < iloscU; i++) { ctx.strokeStyle = ...

javascripthtml

### Setting Default String Values for Columns in TypeORM MigrationsDo you want to know how to

I'm working on setting the default value of a column to 'Canada/Eastern' and making it not nullable. This is the current setup for the column: queryRunner.addColumn('users', new TableColumn({ name: 'timezone_name', ...

javascripttypescriptpostgresqltypeorm

Automated pagination integrated with automatic refreshing of div every few seconds

I am currently working on setting up a datatable and I need it to be displayed on the monitor in such a way that it can refresh the div and automatically paginate to the next page. However, whenever the div is refreshed, the auto-pagination gets cancelle ...

javascriptdatatablescodeigniter-3

Why is it beneficial to define a function as an immediately invoked function expression that returns another function?

The pattern of using IIFE (Immediately Invoked Function Expression) in three.js source code is quite common. Interestingly, removing the IIFE doesn't seem to have any impact on the functionality. It appears that using a named function instead of an an ...

javascriptthree.js

The outcome of a MySQL query involving JSON_OBJECT() is a string value

I have crafted a query that extracts posts from a table and includes information about each post's author: SELECT post.id, post.text, post.datetime, JSON_OBJECT( 'username', user.username, 'firstName', user.firstName, 'last ...

javascriptmysqljsonnode.jsexpress

Updating the image source through ajax by retrieving the location from the database

Is there a way to dynamically change the image source using AJAX? I have the location saved in my database and I want to set the img src from the value of something like data[0]['patient_photo']. Below is the HTML code for the image: <img id= ...

javascriptphpjqueryajaximage

Error: The 'address' property cannot be found in the specified 'string' type

Hey there! I'm currently facing an issue while trying to pass an object from one page to another and store it in the object on the second page. I'm encountering an error with EsLint. let accountDetails:any={ name:this.userAccount.name, p ...

javascripttypescriptvue.jsnuxt.js

The screen isn't displaying the result after making an ajax call

As I work on developing a photo sharing website with a layout similar to Pinterest, I am facing an issue. When I click on a category in the menu, the old content disappears but the new content does not show up. Interestingly, upon inspecting the elements u ...

javascriptjqueryhtmlcssajax

Query modifier contains an unexpected token ":"

For my API project, I have opted to use sailsjs as my framework. The documentation at provides a list of query modifiers that can be used. User.find({ or: [ name: { startsWith: 'thelas' }, email: { startsWith: 'thelas' } ] ...

javascriptjsonexpresssails.js

creating dynamic JavaScript elements within a parent div container on the client side

I've been working on a JavaScript code that generates new div elements every few milliseconds and stacks them up. However, I'm facing an issue where the script is running outside of any specific div container. Is using document.getElementById("pa ...

javascripthtmldom

Exploring the Force-Directed Graph Demo on bl.ocks.org

I don't have much expertise in javascript, jquery, or json. My objective is to create a graph using the force-directed graph example from bl.ock.us. 1) I wrote a python script to generate the necessary json data. 2) I noticed others were us ...

javascriptjqueryjsond3.js

Using Jquery to dynamically link a textbox with the onload event: A Guide

When a user clicks a button, a textbox is dynamically created in Javascript. It appears on the screen to be filled by the user. <input type="text" id="documentTitle" name="documentTitle" value="<spring:message code="document.Title"/>" I am looki ...

javascriptjqueryhtml

Searching for a single cell within an HTML table

I've been on the hunt for a code that can search through a table and show just one cell. I tried creating my own, but finally stumbled upon one that seems to work perfectly, except for one hiccup. When the search bar is cleared, it displays the first ...

javascripthtmlsearchhtml-table

Exploring the FunctionDirective in Vue3

In Vue3 Type Declaration, there is a definition for the Directive, which looks like this: export declare type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>; Most people are familiar with the ObjectDirectiv ...

javascriptvue.jsvuejs3

Is there a workaround for the issue of the NodeJS Web Cryptography API require() being undefined in an unsecure origin (Heroku App)?

My goal is to implement the experimental Web cryptography API (SubtleCrypto) on my Node.js server hosted on Herokuapp. The aim is to encrypt data from a fetch request sent from gitpages to herokuapp, concealing sensitive information from the browser consol ...

javascriptnode.jsmongodbherokuwebcrypto-api

Tips on extracting JSON subcategories?

I am currently attempting to retrieve information from a local JSON file using the following JavaScript script: let accordion=document.querySelector('#accordion'); fetch('countries.json') .then(function(response){ return response.js ...

javascriptarraysjsonfetch-api

Using jQuery to select the child element of the parent that came before

Recently, I've been experimenting with creating animations using CSS and jQuery. While it has been successful so far, I'm now looking to take it a step further. Specifically, I want information to appear on top of an image when the user clicks on ...

javascriptjqueryhtmlcss

Changing the Material UI imported Icon on click - a step-by-step guide

Hey there, I'm currently working with React JS and Redux. I have a challenge where I need to change the star outline icon to a filled star icon on click. The icon is located just after emailRow in the emailRow__options section. Can someone assist me w ...

javascriptreactjsreduxmaterial-ui

Is the express.json() middleware for parsing JSON request body designed to handle synchronous calls?

According to Express.js's documentation, it is recommended to avoid using synchronous functions as much as possible. This is because in high-traffic websites, the accumulation of synchronous calls can negatively impact the performance of the applicati ...

javascriptnode.jsexpress

Troubleshooting React Native in VS Code using Node shims

I recently started working on a React Native project using the Ignite CLI 2.0.0 default boilerplate, and I find myself in need of some dependencies from node-based packages. To address this, I created files named transformers.js, babel-transform.js, and r ...

javascriptnode.jsreact-nativevisual-studio-codejestjs