Create chart in SharePoint webpart based on chart.js (SharePoint Online)

%3CLINGO-SUB%20id%3D%22lingo-sub-48295%22%20slang%3D%22en-US%22%3ECreate%20chart%20in%20SharePoint%20webpart%20based%20on%20chart.js%20(SharePoint%20Online)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-48295%22%20slang%3D%22en-US%22%3E%3CP%3EI%20found%20this%20very%20interesting%20blog%20about%20creating%20a%20chart%20in%20a%20Sharepoint%20page%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22http%3A%2F%2Fletsdosharepoint.com%2Fchart-in-sharepoint%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fletsdosharepoint.com%2Fchart-in-sharepoint%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20tried%20to%20do%20this%20in%20my%20situation%20with%20my%20own%20list.%20Could%20not%20get%20it%20working.%20So%20I%20tried%20to%20create%20the%20exact%20same%20thing%20as%20in%20the%20example.%20But%20I%20make%20a%20missatke%20somewhre%20which%20I%20am%20not%20able%20to%20track.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEverything%20is%20running%20and%20executed%20but%20it%20ends%20up%20in%20an%20error%3A%3C%2FP%3E%3CPRE%3E%26lt%3Bcanvas%20id%3D%22lineChart%22%20width%3D%22700%22%20height%3D%22400%22%20style%3D%22float%3Aleft%3Bmargin-right%3A20px%3B%22%26gt%3B%26lt%3B%2Fcanvas%26gt%3B%26lt%3Bdiv%20id%3D%22chartDesc%22%26gt%3B%26lt%3B%2Fdiv%26gt%3B%0ATypeError%3A%20Unable%20to%20get%20property%20'getContext'%20of%20undefined%20or%20null%20reference%20%3C%2FPRE%3E%3CP%3ELooks%20like%20this%20piece%20of%20code%20is%20not%20converted%20to%20proper%20html%20or%20someting...%3C%2FP%3E%3CPRE%3Ereturn%20'%26amp%3Blt%3Bcanvas%20id%3D%22lineChart%22%20width%3D%22700%22%20height%3D%22400%22%20style%3D%22float%3Aleft%3Bmargin-right%3A20px%3B%22%26amp%3Bgt%3B%26amp%3Blt%3B%2Fcanvas%26amp%3Bgt%3B%26amp%3Blt%3Bdiv%20id%3D%22chartDesc%22%26amp%3Bgt%3B%26amp%3Blt%3B%2Fdiv%26amp%3Bgt%3B'%3B%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20a%20bit%20stuck%20now%2C%20can%20someone%20put%20me%20into%20the%20right%20direction%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20Mike%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular Contributor

I found this very interesting blog about creating a chart in a Sharepoint page:

 

http://letsdosharepoint.com/chart-in-sharepoint/

 

I tried to do this in my situation with my own list. Could not get it working. So I tried to create the exact same thing as in the example. But I make a missatke somewhre which I am not able to track.

 

Everything is running and executed but it ends up in an error:

<canvas id="lineChart" width="700" height="400" style="float:left;margin-right:20px;"></canvas><div id="chartDesc"></div>
TypeError: Unable to get property 'getContext' of undefined or null reference 

Looks like this piece of code is not converted to proper html or someting...

return '&lt;canvas id="lineChart" width="700" height="400" style="float:left;margin-right:20px;"&gt;&lt;/canvas&gt;&lt;div id="chartDesc"&gt;&lt;/div&gt;';

 

 

 

I'm a bit stuck now, can someone put me into the right direction?

 

 

Thanks, Mike

0 Replies