How to add a jquery chart to an openxml word doc?

[rogersbParticipant]

Hi

I have been using the openxml to generate word docs for about 8+ months and it works great. now am stumped, there is a bar chart graph that i fill for a web page, its javascript/jquery based, dhtmlx.com and the goal is to add it into the word doc.

but how? where to begin? would it have to be converted to an image, like a copy/paste operation in Word? Its a stacked horizontal bar chart, doubtful office has anything like that but just need a solution

[Eric WhiteKeymaster]

Probably converting to an image would be the most straight-forward. Word does has a stacked horizontal bar chart, so you could use the approach in the following screen-cast to update data for your chart.

http://openxmldeveloper.org/home2/bm8qcmjy/public_html/blog/b/openxmldeveloper/archive/2011/03/28/updating-data-for-an-embedded-chart-in-an-open-xml-wordprocessingml-document.aspx

Thinking out of the box – another approach works only with Office 2016 (and maybe 2013) – you could write a JavaScript Add-In and ‘include’ your bar chart graph as written in javascript/jquery.

[rogersbParticipant]

Thanks Eric
I was having to modify the existing layout of an openxml word doc, adding extra rows to a table, kept getting errors when opening with Word. Finally figured out that with the 16+ items for each cell that seem to have nearly arbitrary numbers, for each group Id replace the

paragraphProperties46.Append(paragraphStyleId46);
with
paragraphProperties4000.Append(paragraphStyleId4000); and for the section but 4000 on all of these, as it applies. then i can copy it, then do a find/replace to something else like 7500, a different number completely then its easier to read.

but the problem now? I seem to crash visual studio. I thought ok it works great i want to make a copy of my new mvc controller. select the name then copy then paste and it adds a controllername-copy file. and for some reason today, visual studio is saying, about my file with 0 errors: 1578 Errors. Type … already defines a member called ‘contentcontrols’ with the same parameter types file Mycontroller-Copy.cs

i already deleted it, removed it from the project. Still there. But anyway making the reference numbers 4 digits wide in the 1000’s made it much easier to read, for me

Adding the graph, it will be running on a server that does not have Office so its got to be created in OpenXML. I looked at all the links, thank you, and will be on this once the errors get cleared

[rogersbParticipant]

Ok I watched the video and so it seems a bit complicated to drill down into the values area for the chart and the cached values, its do-able but my follow up question would be: can the chart values be attached to content controls that are named and you find those controls and change them?

In my case my chart is at the end of the document so i could take my doc template that is used for all the other data, draw out my horizontal bar chart with maybe values of 1, but somehow associate the values to content controls. The names of the 3 series’ will always be the same just the data and it is a 0-100% kind of chart. In the jquery chart i had to add another series with the other part of the bar to fill in to 100% so 100 – first series = 2nd series, or if first series > 100 then first series = 100

But thats easy. I have been trying without luck to put a chart in a word.docx then open it with the sdk tool and get the code to duplicate it; embed that code in my method, it runs but the resulting docx file is “corrupted” and wont open.

I was able to do this with table embedding, not sure why its not working.

But is the content control link to parameters possible?

thanks

[Eric WhiteKeymaster]

No, that is not a feature of Open XML, nor of Word. It is a great idea, but there is no facility in the markup to bind chart values to XML in a custom XML part.

As far as I know, the only way to update a chart is to both drill down and change the cached values, and if you need to, then update the embedded XLSX. If you leave the XLSX in the DOCX package, and if you don’t update the values in it, will lead to a broken user experience where the values they see in the chart are changed to the values in the spreadsheet. You must either update the spreadsheet, or else remove it.

The Open-Xml-Sdk for JavaScript was designed (by me) to give almost line by line compatibility between Open-Xml-Sdk code in C#, and JavaScript code using the Open-Xml-Sdk for JavaScript. I have successfully translated thousands of lines of C# code to JavaScript, and it worked great. Unfortunately, I was not able to release that code publicly.

Translating just the ChartUpdater.cs to JavaScript is not a super huge project. But there is a fair amount to learn – you must be familiar with the idioms of LINQ to XML, as I re-implemented LINQ to XML for JavaScript, in order to facilitate just this type of translation of C# to JavaScript. Please check out the following:

Screen-Cast Series: Recursive Pure Functional Transforms

In particular, watch #11, #12, #13 in that series. But the rest of the screen-casts in that series are important – those techniques made me into a more effective XML developer.

I would love to port the entirety of Open-Xml-PowerTools to JavaScript – would be a useful project. But it is not going to happen in the near future, I don’t believe.

Cheers, Eric

[rogersbParticipant]

thats impressive that you did all of that. I started watching the videos, at #1 – 5 then realized you said 11 – 13. I heard c# added some new features like this, interesting. I started in the 70s and have seen functional, alot of assembler, then interfaces and controllers, cpu/mem (hw/sw). i learned Java but didnt use it much, mostly visual studio or some other ui’s. really liked cpu design and next address concepts and internal microcode.

when coming into .net the delegate was the most difficult thing. didnt have to use them too much. i came from old C, so c# is just fun. But now expanding to web programming, slowly getting used to it. will keep looking at the videos, they’re very well done.

If you want to have me try to do small modules at a time to duplicate the openxml for javascript, I will try if you let me know just what to do.

In this project its a final report, the user would not change the chart, although if that helps reduce complexity or not, am not sure.

thought it was going to be easy to put a chart onto the word docx. but now if we made the javascript version happen, would i be able for instance to use the dhtmlx chart app in jquery and generate and drop it into the openxml doc? if i can help create the charting code let me know

will finish the videos and try again,

[rogersbParticipant]

trying to put the latest power tools in vs 2015 pro. cannot figure out how. open powershell ISE
git
the term ‘git’ is not recognized as ….

in your video it uses mingw32… will keep trying

[rogersbParticipant]

the video you have there https://www.youtube.com/watch?v=60w-yPDSQD0
shows the wrong URL, missing the ‘e’ it says sourcforge instead of sourceforge. it takes you to some dark domain

[rogersbParticipant]

I have tried every example and link to install power tools. i have it in vs2015, ive reinstalled it i installed GIT and cloned it i ran the solutions.

in the example to open a word doc? I drag the .docx file onto visual studio, it will NOT open it. i had this for vs2013 and used it before, it was simple then. this time something’s missing

i cannot figure out how to use or add the power tools

[rogersbParticipant]

is there something thats supposed to be added in to visual studio 2015 to make it know about openxml power tools?

in searching I also found the detail that some questions would move to stack overflow? Really hope NOT, Id say thats not good, ask a question there and get flamed, reviled and down voted and called stupid and every name in the book. they have traffic but the stack overflow community SUCKS. Ive done this pushing 40 years, was in the IEEE and other groups, couple years ago hit by a car on my bicycle and have struggled to get my energy and abilities back, have challenges to write it their way apparently. Getting ridiculed as an idiot by stack overflow I take as an insult, I know what professional engineering and team work in many successful groups is. What stack overflow has is hacker level types who dont.

Code Project, MSDN and asp.net have forums with professional people, my 2 cents is use them instead

[Eric WhiteKeymaster]

I think you are looking for the Open XML Package Editor PowerTool for Visual Studio, not Open-Xml-PowerTools. This is what enables editing an Open XML document in Visual Studio. I believe that it works with VS 2015, but perhaps it doesn’t work with community edition. I haven’t tried.

https://visualstudiogallery.msdn.microsoft.com/450a00e3-5a7d-4776-be2c-8aa8cec2a75b

I recommend taking a quick look at the screen-cast series on Open XML, which contains several screen-casts on using tools.

Screen-cast Series: Introduction to Open XML

Your point about StackOverflow is noted. Just FYI, unless something changes, I anticipate primarily attending to the forums here at EricWhite.com.

[Eric WhiteKeymaster]

To use git from within PowerShell, you need to add the git bin directory to your path.

I like to install gitextensions – it installs all the things you need to use git. The installer is not the most intuitive – it puts up dialog boxes under windows, and you have to respond to the dialog boxes in order to finish the installation.

https://sourceforge.net/projects/gitextensions/

Don’t underestimate the time necessary to learn git fully. Git solves a very hard problem – large number of distributed developers working on the same project, and the complexities (while sometimes hidden) are needed in order to facilitate this scenario. You may find the following two videos of interest:

Cheers, Eric

[rogersbParticipant]

watching the xml videos, VERY WELL DONE! this is info I needed to learn. worked with XElement for a few years, didnt know some of this. NodesBeforeSelf? cool

[rogersbParticipant]

Im trying to implement the basic code to access the chart, but get stuck

referencing the video https://www.youtube.com/watch?v=xOJ_AgXgL-M at about the 6:21 mark,

 using (Stream strr = epp.GetStream())
                    using (MemoryStream memst = new MemoryStream())
                    {
                        CopyStream(strr, memst);
                        using (SpreadsheetDocument spreadsheetDoc = SpreadsheetDocument.Open(memst, true))
                        {

CopyStream, oddly has a red underline. am trying to copy this line by line from the video, is there code from that video available?

[rogersbParticipant]

I got it all to run, had to double check.

but now Im just not able to find the chart. I made a winForms application that will iterate thru the Word.docx and ‘show’ whats there. But in the actual app itself it will not get past drawing.

    byte[] byteArray = System.IO.File.ReadAllBytes(Server.MapPath("~/mydoc.docx"));
 using (MemoryStream mem = new MemoryStream())
            {
                mem.Write(byteArray, 0, (int)byteArray.Length);
                using (WordprocessingDocument wordDoc =
                    WordprocessingDocument.Open(mem, true))
                {
                    //start of the chart processing

                    string rid = null;
                    Paragraph ppp = wordDoc.MainDocumentPart.Document.Body.Elements<Paragraph>().FirstOrDefault();
                    if(ppp != null)
                    {
                        Drawing ddd = ppp.Descendants<Drawing>().FirstOrDefault();
                        if(ddd != null)
                        {
                            C.ChartReference cr = ddd.Descendants<C.ChartReference>().FirstOrDefault();
                            if(cr != null)
                            {

the chart is at the end of the word document. there are tables and paragraphs. how could the contents be displayed?

In the winform test app, it uses the exact same code to find and open the word doc and make into the stream, so its just as above except its got this.

     foreach (DocumentFormat.OpenXml.OpenXmlElement xde in ppp)
                        {
                            // richTextBox1.Text += "par = " + xde.InnerText.ToString() + "\n";
                            richTextBox1.Text += "val = " + xde.InnerText.ToString();
                        }

to toss into the textbox what it encounters so i could get an idea how to find it. but am not finding the chart and do not know what to look for

• This reply was modified 8 years, 8 months ago by  rogersb. Reason: clarify

[Author]

Posts